WP – Loop | post_thumbnail – Adding elements piece by piece

Your Basic WordPress Loop

https://developer.wordpress.org/reference/functions/get_the_post_thumbnail/
https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
https://wpengineer.com/1930/the-ultimative-guide-for-the_post_thumbnail-in-wordpress-2-9/
https://www.elegantthemes.com/blog/tips-tricks/the-wordpress-loop-explained-for-beginners – loop breakdown

Easily Adaptable WordPress Loop Templates4+ Ways to Loop with WordpressTab name

Easily Adaptable WordPress Loop Templates

https://perishablepress.com/easily-adaptable-wordpress-loop-templates/

// any code included here occurs before the wordpress loop and is always displayed

<?php if (have_posts()) : ?>

	// if there are posts to display, process any code included here only once
	// display any code output from this region above the entire set of posts

	<?php while (have_posts()) : the_post(); ?>

		// loop through posts and process each according to the code specified here
		// process any code included in this region before the content of each post

		<?php the_content(); ?> // this function displays the content of each post

		// process any code included in this region after the content of each post

	<?php endwhile; ?>

	// stop the post loop and process any code included here only once
	// any code output will be displayed below the entire set of posts
	
<?php else : ?>

	// if there are no posts to display, process any code that is included here
	// the output of any code included here will be displayed instead of posts

<?php endif; ?>

// any code included here occurs after the wordpress loop and is always displayed

In this article, I present several heavily commented examples of WordPress loops. I have found that many readers appreciate these types of loop examples, as it helps them to understand how the loop works while enabling them to easily copy, paste, and adapt the code for their own purposes. In our first example, we examine a basic WordPress loop. When implemented, this loop will display “x” number of posts, where “x” represents the number specified via the WordPress Admin reading options panel. To use this code, simply copy & paste into your WordPress theme’s index.php file¹ and customize accordingly.

Your Basic WordPress Loop

// any code included here occurs before the wordpress loop and is always displayed

<?php if (have_posts()) : ?>

	// if there are posts to display, process any code included here only once
	// display any code output from this region above the entire set of posts

	<?php while (have_posts()) : the_post(); ?>

		// loop through posts and process each according to the code specified here
		// process any code included in this region before the content of each post

		<?php the_content(); ?> // this function displays the content of each post

		// process any code included in this region after the content of each post

	<?php endwhile; ?>

	// stop the post loop and process any code included here only once
	// any code output will be displayed below the entire set of posts
	
<?php else : ?>

	// if there are no posts to display, process any code that is included here
	// the output of any code included here will be displayed instead of posts

<?php endif; ?>

// any code included here occurs after the wordpress loop and is always displayed

Hopefully, this basic loop will look very familiar to you. If you are new to WordPress, and would like to gain a better understanding of how the loop works, I highly recommend utilizing the following example. The next example is a carbon copy of the previous loop example, only with several key (X)HTML elements added for clarity. Copy & paste this code into the index.php¹ of your WordPress theme and examine the results in a browser. Hopefully, combining the code comments with the browser output² will give you a crystal clear picture of the various features of the WordPress loop.

// any code included here occurs before the wordpress loop and is always displayed
<h2>This text is generated via the h2 element included before the WordPress loop.</h2>
<p>Any code included in this part of the document is processed only once.</p>

<?php if (have_posts()) : ?>

	// if there are posts to display, process any code included here only once
	// display any code output from this region above the entire set of posts
	<h2>This text is generated via the h2 element only if there are posts.</h2>
	<p>Any code included in this part of the document is processed only once.</p>

	<?php while (have_posts()) : the_post(); ?>

		// loop through posts and process each according to the code specified here
		// process any code included in this region before the content of each post
		<h3><a href="<?php%20the_permalink()%20?>">Title: <?php the_title(); ?></a></h3>
		<p>The title of this post is generated before the content of each post.</p>

		<?php the_content(); ?>  // this function displays the content of each post

		// process any code included in this region after the content of each post
		<h4>This is post #<?php the_ID(); ?>, written by <?php the_author(); ?></h4>
		<p>The previous metadata is generated after the content of each post.</p>

	<?php endwhile; ?>

	// stop the post loop and process any code included here only once
	// any code output will be displayed below the entire set of posts
	<h5>This text is generated via the h5 element only if there are posts.</h5>
	<p>Any code included in this part of the document is processed only once.</p>
	
<?php else : ?>

	// if there are no posts to display, process any code that is included here
	// the output of any code included here will be displayed instead of posts
	<p>If you are seeing this message, there are no posts to process/display.</p>
	<p>Any code included in this part of the document is processed only once.</p>

<?php endif; ?>

// any code included here occurs after the wordpress loop and is always displayed
<h6>This text is generated via the h6 element included after the WordPress loop.</h6>
<p>Any code included in this part of the document is processed only once.</p>

Once you understand the basic functionality of a basic WordPress loop, it is much easier to customize the look and feel of your WordPress-powered blog. Using built-in WordPress functionality, you can display any information you want, wherever you want. WordPress makes it easy to display vital post data, navigational tools, and many other versatile features³.

To see an example of this in action, replace the previous loop example with the following, fully-pimped version of WordPress looping bliss. This is like the advanced course for understanding the basic WordPress loop. Dig into this, and you will soon be crafting your own, highly specialized loops.

// any code included here occurs before the wordpress loop and is always displayed
<h2><?php%20echo%20get_settings('home');%20?>/"><?php bloginfo('name'); ?></a></h2>
<ul class="menu">
	<li><a href="<?php%20echo%20get_settings('home');%20?>/">Home Page</a></li>
	<?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
	<?php wp_register('<li>','</li>'); ?>
</ul>

<?php if (have_posts()) : ?>

	// if there are posts to display, process any code included here only once
	// display any code output from this region above the entire set of posts
	<h2>Here are a few of my recent posts:</h2>

	<?php while (have_posts()) : the_post(); ?>

		// loop through posts and process each according to the code specified here
		// process any code included in this region before the content of each post
		<h3><a href="<?php%20the_permalink()%20?>">Title: <?php the_title(); ?></a></h3>
		<p>Date: <?php echo date("l, F d, Y"); ?> | <?php comments_number(); ?></p>

		<?php the_content(); ?> // this function displays the content of each post

		// process any code included in this region after the content of each post
		<h4>This is post #<?php the_ID(); ?> | Author: <?php the_author(); ?></h4>
		<p>Filed under: <?php the_category(','); ?> | <?php edit_post_link(); ?></p>

	<?php endwhile; ?>

	// stop the post loop and process any code included here only once
	// any code output will be displayed below the entire set of posts
	<h4><?php posts_nav_link() ?><?php previous_post_link(); ?> &#8226; 
	    <?php posts_nav_link() ?><?php next_post_link(); ?></h4>

<?php else : ?>

	// if there are no posts to display, process any code that is included here
	// the output of any code included here will be displayed instead of posts
	<p>Sorry, no posts matched your criteria.</p>

<?php endif; ?>

// any code included here occurs after the wordpress loop and is always displayed
<h6>Copyright &copy; <?php%20echo%20get_settings('home');%20?>/"><?php bloginfo('name'); ?></a> <?php echo date('Y'); ?></h6>

Observing the patterns involved with the WordPress loop, it becomes easier to look at the code and understand how each part operates and contributes to the whole. With a little practice tweaking and rearranging the various elements, you will improve your ability to manipulate your theme files and gain a better understanding of how WordPress works in general.

The Ever-Popular Mullet Loop

Now that we understand the functionality behind a basic WordPress loop, let’s tweak things a bit and transform our previous example to serve as the ever-popular “mullet” loop. Rather than simply display the full content from each post, the mullet loop displays the full content for only the first post, and then displays only excerpts for all remaining posts. This is a very popular and effective way of highlighting your latest article while providing easy access to recently published posts. To get a better idea of how this works, consider the following:

This paragraph represents the full content of your most recent post.
It will be displayed in its entirety until you publish your next post, 
at which time it will appear beneath this location as an excerpt only.
If we were numbering these hypothetical posts, this post would be #7.
Here comes the dummy text Lorem ipsum.. Lorem ipsum dolor sit amet, a
consectetuer adipiscing elit. Suspendisse nisi. Aliquam ac massa vitae 
ligula dictum congue. Sed elit nulla, eleifend ut, fringilla porttitor, 
tincidunt, nunc. Nam eros nisi, dapibus faucibus, placerat sed, congue 
sed, lectus. Pellentesque vel risus in lacus iaculis auctor. Fusce vel. 
Praesent imperdiet diam ut urna. Phasellus a tortor sit amet maurismet 
vulputate gravida. Suspendisse sed diam. Duis pede ipsum, sagittisorit 
ut, semper in, ultricies at, justo. Sed leo risus, scelerisque quis, a
luctus dictum, vulputate id, mi. Praesent at magna auctor magna dictum
suscipit sagittis. Aliquam gravida facilisis dui. Morbi placerat leros 
est. Nulla a nibh fringilla est eleifend lacinia. Mauris arcu. Ut diam.


This sentence represents an excerpt from post #6, which is displayed 
instead of its full content, thanks to the ever-popular mullet loop.


This sentence represents an excerpt from post #5, which is displayed 
instead of its full content, thanks to the ever-popular mullet loop.


This sentence represents an excerpt from post #4, which is displayed 
instead of its full content, thanks to the ever-popular mullet loop.


This sentence represents an excerpt from post #3, which is displayed 
instead of its full content, thanks to the ever-popular mullet loop.


This sentence represents an excerpt from post #2, which is displayed 
instead of its full content, thanks to the ever-popular mullet loop.


This sentence represents an excerpt from post #1, which is displayed 
instead of its full content, thanks to the ever-popular mullet loop.

To produce this presentational functionality, we have modified our previously discussed, basic WordPress loop according to the following, heavily commented example. As before, read through the comments to gain an understanding of how everything works, and then proceed to the final example for a “marked-up” version to use on a “live” WordPress page.

// any code included here occurs before the wordpress loop and is always displayed

<?php if (have_posts()) : ?>
	<?php $count = 0; ?>

	// if there are posts to display, set the count to zero and begin the loop
	// if there are posts to display, process any code included here only once
	// display any code output from this region above the entire set of posts

	<?php while (have_posts()) : the_post(); ?>
		<?php $count++; ?>

		// for each post, increase the count variable by one and process any code included here
		// the output of any code included here will be displayed above the content of every post

		<?php if ($count == 1) : ?>

			// if this is the first post, process any code that is specified in this region
			// process any code specified in this region before the content of the first post

			<?php the_content(); ?> // display the full content of the first post only

			// process any code specified in this region after the content of the first post

		<?php else : ?>

			// if this is not the first post, process any code specified in this region
			// process any code specified in this region before the content of each post

			<?php the_excerpt(); ?> // display only the excerpt for all other posts

			// for all posts except the first, process this code below each post

		<?php endif; ?>

		// for each post, including the first, process any code included here
		// any code output will be displayed below the content of every post

	<?php endwhile; ?>

	// stop the post loop and process any code included here only once
	// any code output will be displayed below the entire set of posts
	
<?php else : ?>

	// if there are no posts to display, process any code that is included here
	// the output of any code included here will be displayed instead of posts

<?php endif; ?>

// any code included here occurs after the wordpress loop and is always displayed

Now, let’s wrap up this monster post with a marked up example of the mullet loop. Copy and paste the following code into your index.php file¹, upload to your server, and examine in a browser. And with that, you now have a complete mullet loop template with which to conquer the world, as well as a better understanding of how to create your own looping masterpiece!

// any code included here occurs before the wordpress loop and is always displayed
<h2><?php%20echo%20get_settings('home');%20?>/"><?php bloginfo('name'); ?></a></h2>
<ul class="menu">
	<li><a href="<?php%20echo%20get_settings('home');%20?>/">Home Page</a></li>
	<?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
	<?php wp_register('<li>','</li>'); ?>
</ul>

<?php if (have_posts()) : ?>
	<?php $count = 0; ?>

	// if there are posts to display, set the count to zero and begin the loop
	// if there are posts to display, process any code included here only once
	// display any code output from this region above the entire set of posts
	<h2>Welcome to the Mullet Loop: Full article first, followed by excerpts</h2>

	<?php while (have_posts()) : the_post(); ?>
		<?php $count++; ?>

		// for each post, increase the count variable by one and process any code included here
		// the output of any code included here will be displayed above the content of every post
		<h3><a href="<?php%20the_permalink()%20?>">Title: <?php the_title(); ?></a></h3>
		<h4>Date: <?php echo date("l, F d, Y"); ?> | <?php comments_number(); ?></h4>

		<?php if ($count == 1) : ?>

			// if this is the first post, process any code that is specified in this region
			// process any code specified in this region before the content of the first post
			<p><strong>Here is the full content of my latest and greatest article:<strong></p>

			<?php the_content(); ?> // display the full content of the first post only

			// process any code specified in this region after the content of the first post
			<h4>Please <a href="<?php%20bloginfo('rss2_url');%20?>">subscribe</a> to my feed!</h4>

		<?php else : ?>

			// if this is not the first post, process any code specified in this region
			// process any code specified in this region before the content of each post

			<?php the_excerpt(); ?> // display only the excerpt for all other posts

			// for all posts except the first, process this code below each post

		<?php endif; ?>

		// for each post, including the first, process any code included here
		// any code output will be displayed below the content of every post
		<h4>This is post #<?php the_ID(); ?> | Author: <?php the_author(); ?></h4>
		<p>Filed under: <?php the_category(','); ?> | <?php edit_post_link(); ?></p>

	<?php endwhile; ?>

	// stop the post loop and process any code included here only once
	// any code output will be displayed below the entire set of posts
	<h4><?php posts_nav_link() ?><?php previous_post_link(); ?> &#8226; 
	    <?php posts_nav_link() ?><?php next_post_link(); ?></h4>
	
<?php else : ?>

	// if there are no posts to display, process any code that is included here
	// the output of any code included here will be displayed instead of posts
	<p>Sorry, no posts matched your criteria.</p>

<?php endif; ?>

// any code included here occurs after the wordpress loop and is always displayed
<h6>Copyright &copy; <?php%20echo%20get_settings('home');%20?>/"><?php bloginfo('name'); ?></a> <?php echo date('Y'); ?></h6>

4+ Ways to Loop with WordPress

At the heart of the WordPress theme template is the venerable WordPress loop. When you’re looking at your index.php file, for example, the loop is the part that typically begins with if(have_posts()) and contains all the tags and markup used to generate the page. The default loop works perfectly well for most single-loop themes, but for more advanced designs with stuff like multiple and custom loops, more looping power is needed. Fortunately, WordPress provides plenty of flexibility with four or five ways to loop:

Default Loop
Loop with query_posts()
Loop with WP_Query()
Loop with get_posts() (Decrapated)
Customize the Loop with pre_get_posts
30-Second Summary

Each of these looping methods is useful in a variety of situations. They share a lot of the same underlying functionality, and the query parameters are essentially the same. Collectively, these four techniques enable simple loops, multiple loops, and custom loops in your WordPress theme template.

A good place to find a default loop, for example, is in your theme’s index.php file. Its purpose is to loop through the posts stored in the database and echo their contents to the browser. Using WordPress’ template tags, it’s easy to display post titles, content, meta info, and much more. That said, let’s examine the four ways to loop with WordPress.

Update! Here is a recent tutorial on resetting the WordPress Loop that’s closely related to this article. Should be useful! 🙂

The Default Loop

The default WordPress loop looks something like this:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

	<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
		<h2><a href="<?php%20the_permalink();%20?>"><?php the_title(); ?></a></h2>
		<?php the_content(); ?>
	</div>

<?php endwhile; ?>

	<div class="navigation">
		<div class="next-posts"><?php next_posts_link(); ?></div>
		<div class="prev-posts"><?php previous_posts_link(); ?></div>
	</div>

<?php else : ?>

	<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
		<h2>Not Found</h2>
	</div>

<?php endif; ?>

So what makes it “default”? Mostly because it uses the default query to loop through post content, making it the loop used like 99% of the time for most themes. It tells WordPress to loop through posts and display the information according to context, and as called by the various template tags (the_title, the_content, et al). There are tags available for just about any type of data stored in the database.

Based on the query that is sent, the default loop will display a certain number of posts from a certain category from a certain date, and so on. For example, the number of posts displayed in the first part of the loop is specified in the WP Admin. So if someone requests the second page of your “Awesome” category, that information is sent via the query, along with the number of posts, theme template file, and so on.

So the default loop is perfect if you’re happy with the query that is sent, but it is also possible to customize the query and generate a different set of posts.

Loop with query_posts()

Update! Using query_posts() no longer is recommended for most cases. Please use one of the alternate looping techniques for best results.

The query_posts function enables us to modify the query and display our desired results. We can either override the entire query or keep it around and just change a few parameters. Here’s an example where query_posts is called before the default loop to exclude a specific category:

<?php global $query_string; // required
$posts = query_posts($query_string.'&cat=-9'); // exclude category 9 ?>

<?php // DEFAULT LOOP GOES HERE ?>

<?php wp_reset_query(); // reset the query ?>

Say you have a default loop in your index.php theme template, but you want to change the number of posts, exclude two categories, and display the results in ascending order. Easy. Just add some query_posts action before the default loop and wp_reset_query immediately after, like this:

<?php global $query_string; // required
$posts = query_posts($query_string.'&posts_per_page=3&cat=-6,-9&order=ASC'); ?>

<?php // DEFAULT LOOP GOES HERE ?>

<?php wp_reset_query(); // reset the query ?>

Here we are keeping the original query around and just overriding a few parameters. There are many parameters available, so customizing any default loop is accomplished quite easily. If we wanted to completely override the original query, we would replace the second line with something like this:

$posts = query_posts('posts_per_page=3&cat=-6,-9&order=ASC');

Notice here that we’ve removed the $query_string from the query_posts parameters. This essentially erases the default query and replaces it with one that contains only those variables included in query_posts. This means no paging information will be available, so remove the original query only if you know what you’re doing.

When to use?

Use query_posts to modify the type of posts that are returned for a single loop. It’s perfect for limiting the number of posts, excluding posts from a certain category, and so on. If more than one loop is required, multiple query_posts loops could work, but there is a much better way to do it using WP_Query.

Loop with WP_Query()

For complete control over the customization of any number of loops, WP_Query is the way to go. When used to modify a default loop, it looks similar to query_posts. For example, let’s exclude a specific category using WP_Query:

<?php $custom_query = new WP_Query('cat=-9'); // exclude category 9
while($custom_query->have_posts()) : $custom_query->the_post(); ?>

	<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
		<h2><a href="<?php%20the_permalink();%20?>"><?php the_title(); ?></a></h2>
		<?php the_content(); ?>
	</div>

<?php endwhile; ?>
<?php wp_reset_postdata(); // reset the query ?>

It also accepts the same parameters as query_posts, so modifying stuff like number of posts, included/excluded categories, and post order looks quite familiar. As seen in the following examples, WP_Query makes it easy to customize the loop by simply changing the parameter:

$custom_query = new WP_Query('cat=-7,-8,-9'); // exclude any categories
$custom_query = new WP_Query('posts_per_page=3'); // limit number of posts
$custom_query = new WP_Query('order=ASC'); // reverse the post order

As expected, we can combine parameters with WP_Query using the same syntax as both query_posts and get_posts. Here’s the equivalent of our query_posts example:

$custom_query = new WP_Query('posts_per_page=3&cat=-6,-9&order=ASC');

Notice, however, that with WP_Query, we don’t need the $query_string variable. In addition to using WP_Query to customize the default loop, we can also use it to create and customize multiple loops. Here is a basic example:

<?php // Loop 1
$first_query = new WP_Query('cat=-1'); // exclude category
while($first_query->have_posts()) : $first_query->the_post();
...
endwhile;
wp_reset_postdata();

// Loop 2
$second_query = new WP_Query('cat=-2'); // exclude category
while($second_query->have_posts()) : $second_query->the_post();
...
endwhile;
wp_reset_postdata();

// Loop 3
$third_query = new WP_Query('cat=-3'); // exclude category
while($third_query->have_posts()) : $third_query->the_post();
...
endwhile;
wp_reset_postdata();
?>

Each of these additional loops may be placed anywhere in your theme template – no need to line them up sequentially. For example, one loop may be placed in your sidebar, another in your footer, and so on. And with the output of each loop easily modified via the parameters, any loop configuration is possible.

When to use?

Use WP_Query for creating multiple, customized loops. By setting up additional instances of WP_Query in your theme, you can create any number of multiple loops, and customize the output of each.

Even so, we don’t always need to break out the big guns, sometimes we just need a few additional loops displayed around the page. So let’s put down the bazookas and gather in the garden for some get_posts tea 😉

Loop with get_posts()

The easiest, safest way to create multiple loops in your theme is to use get_posts(). Anywhere you need to display a quick, static set of posts, get_posts is the perfect choice. Think 10 recent posts in the sidebar, or 10 random posts in the footer. get_posts makes it easy. Here again is a query to exclude a specific category:

<?php global $post; // required
$args = array('category' => -9); // exclude category 9
$custom_posts = get_posts($args);
foreach($custom_posts as $post) : setup_postdata($post);
...
endforeach;
?>

This code creates a loop of all posts except those in the excluded category. Of course, excluding a category is just one way to customize your additional, static loops. By using any of the same parameters accepted by WP_Query and query_posts, it’s possible to create loops that display just about anything.

Notice, however, that get_posts requires the use of an array for the parameters. The format for multiple parameters looks like this (using our previous example):

$args = array('numberposts'=>3, 'category'=>-6,-9, 'order'=>'ASC');

Also notice that we’re using numberposts instead of posts_per_page to limit the number of posts. According to the WP Codex, posts_per_page should work with get_posts, but if it doesn’t just go with numberposts. There is also a showposts parameter that also seems to work fine with get_posts.

When to use?

Use the get_posts() function to easily create additional, static loops anywhere in your theme. get_posts accepts the same parameters as query_posts, and is perfect for adding static, custom loops to your sidebar, footer, or anywhere else.

Customize the loop with pre_get_posts

Last but not least, I want to mention the pre_get_posts filter hook. This hook enables developers to customize the $query object and customize the default WordPress Loop however is required. Here is a quick example of how it works:

function digwp_pre_get_posts($query) {
	if (!is_admin() && $query->is_main_query()) {
		$query->set('posts_per_page', 1);
	}
}
add_action('pre_get_posts', 'digwp_pre_get_posts');

Here we have a function that filters the loop via pre_get_posts. In the first line of the function, we use conditional tags and methods to check if the request is on the front-end for the main loop (via is_main_query()). If that condition is met, we set the number of posts_per_page to 1. But this is just a basic example. There are numerous methods and properties available to you via the $query object, enabling advanced loop customization.

When to use?

The pre_get_posts filter hook is useful when you want to customize the main WP Loop. Check out the methods and properties available from WP_Query to get a better idea of what’s possible.

30-Second Summary

The bottom line for customizing default loops and creating multiple loops:

To modify the default loop, use query_posts()
To modify loops and/or create multiple loops, use WP_Query()
To create static, additional loops, use get_posts()
To customize the default loop, use pre_get_posts

If you’re working with WordPress loops and want to learn more about using them to customize your theme, we cover the topic extensively in our book, Digging into WordPress, which is current with the latest version of WordPress 🙂

Tab content

Sword Email Example – BUILDING

[code]

<?php

$args = array(
‘posts_per_page’ => 5,
‘order’=> ‘DESC’,
‘orderby’ => ‘date’,
‘category_name’ => ‘swordsays’,
‘cat’ => -7
);
$email_posts = new WP_Query($args);

if($email_posts->have_posts()) :
while($email_posts->have_posts()) :
$email_posts->the_post();
?>
[/code]

[code]

[/code]

[code]
<a href="<?php%20the_permalink()%20?>" rel="bookmark" title="Check this out – <?php the_title_attribute(); ?>">

<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), ‘thumbnail’ ); ?>
<img src="<?php%20echo%20$url%20?>" style="max-width: 260px; height=auto; float: left;" />
</a>

[/code]

[code]
</TD></TR></table>
</TD>
<TD bgcolor="#ffffff">&nbsp;&nbsp;</TD>
<TD valign="top" align="left">

<table border="0" cellpadding="0" cellspacing="0">
<TR><TD style="text-decoration: none;">
<h2 style="margin: 0 0px 2px 0; padding: 0px; color: #013f6e; line-height: 16px; font-size: 16px; font-weight: bold; text-transform: uppercase; text-decoration: none;"><a href="<?php%20the_permalink()%20?>" style="color: #013f6e; line-height: 16px; font-size: 16px; font-weight: bold; text-transform: uppercase; text-decoration: none;"><?php the_title(); ?></a></h2>
</TD></TR>

</TD></TR></table>
<BR clear="all" />
</div>

[/code]

[code]

<?php
endwhile;
else:
?>

Oops, there are no posts.

<?php
endif;
?>

[/code]

Adding to loop

[code]

<!–?php &lt;/p&gt;
&lt;p&gt;if ( function_exists( ‘add_image_size’ ) ) {&lt;br ?–> add_image_size( ‘custom-thumb’, 180, 115, true ); //add a custom image size
}

echo get_the_post_thumbnail(get_the_ID(), ‘custom-thumb’, $attr); //echo the thumbnail with the new custom image size

[/code]

#2

[code]
<!–?php echo get_the_post_thumbnail( $post_id, array(260,200), array("style" =&gt; "float:left;"), $attr=” ); ?–>
[/code]

You might also try:

If you only have one size thumbnail:

$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ) );

Or…if you have multiple sizes:

$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), “size” );
Note that wp_get_attachment_image_src() returns an array: url, width, height, is_intermediate.

So if you just want only the image url:

[code]
echo $thumbnail[0];

++++++++++++++++++

if (has_post_thumbnail()) {
$thumb = wp_get_attachment_image_src(get_post_thumbnail_id(), ‘thumbnail_name’);
echo $thumb[0]; // thumbnail url
}

[/code]

Full Version Example

[code]

VERSION THREE ::::::::::::::

if ( has_post_thumbnail()) {
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), ‘medium’);
echo ‘<a href="’%20.%20$medium_image_url&#91;0&#93;%20.%20’">’;
the_post_thumbnail(‘thumbnail’);
echo ‘</a>’;
}

VERSION THREE :::::::::::::::::::::::::::::::::

function get_the_post_thumbnail( $post = null, $size = ‘post-thumbnail’, $attr = ” ) {
$post = get_post( $post );

if ( ! $post ) {
return ”;
}

$post_thumbnail_id = get_post_thumbnail_id( $post );

/**
* Filters the post thumbnail size.
*
* @since 2.9.0
* @since 4.9.0 Added the `$post_id` parameter.
*
* @param string|array $size The post thumbnail size. Image size or array of width and height
* values (in that order). Default ‘post-thumbnail’.
* @param int $post_id The post ID.
*/
$size = apply_filters( ‘post_thumbnail_size’, $size, $post->ID );

if ( $post_thumbnail_id ) {

/**
* Fires before fetching the post thumbnail HTML.
*
* Provides "just in time" filtering of all filters in wp_get_attachment_image().
*
* @since 2.9.0
*
* @param int $post_id The post ID.
* @param string $post_thumbnail_id The post thumbnail ID.
* @param string|array $size The post thumbnail size. Image size or array of width
* and height values (in that order). Default ‘post-thumbnail’.
*/
do_action( ‘begin_fetch_post_thumbnail_html’, $post->ID, $post_thumbnail_id, $size );

if ( in_the_loop() ) {
update_post_thumbnail_cache();
}

$html = wp_get_attachment_image( $post_thumbnail_id, $size, false, $attr );

/**
* Fires after fetching the post thumbnail HTML.
*
* @since 2.9.0
*
* @param int $post_id The post ID.
* @param string $post_thumbnail_id The post thumbnail ID.
* @param string|array $size The post thumbnail size. Image size or array of width
* and height values (in that order). Default ‘post-thumbnail’.
*/
do_action( ‘end_fetch_post_thumbnail_html’, $post->ID, $post_thumbnail_id, $size );

} else {
$html = ”;
}

/**
* Filters the post thumbnail HTML.
*
* @since 2.9.0
*
* @param string $html The post thumbnail HTML.
* @param int $post_id The post ID.
* @param string $post_thumbnail_id The post thumbnail ID.
* @param string|array $size The post thumbnail size. Image size or array of width and height
* values (in that order). Default ‘post-thumbnail’.
* @param string $attr Query string of attributes.
*/
return apply_filters( ‘post_thumbnail_html’, $html, $post->ID, $post_thumbnail_id, $size, $attr );
}

[/code]

SIZES:
thumbnail medium large full

Custom sizes:

To define a custom size, simply define it within an array, for example:

get_the_post_thumbnail($post_id, array(100,100), $attr );

As you can see from the above code, the image size is 100×100.

$attr: This is an optional parameter in which you may use an array to define additional attributes such as the class, alt text, title, etc. This would look something like the following:

[code]
$attr = array(
‘src’ =&gt; $src,
‘class’ =&gt; “attachment-$size”,
‘alt’ =&gt; trim(strip_tags( $attachment-&gt;post_excerpt )),
‘title’ =&gt; trim(strip_tags( $attachment-&gt;post_title )),
);
[/code]
In the above example, we are storing the array containing the image location, class, alt text, and title within a variable which is later called within the get_the_post_thumbnail() function.

Attachment Meta-Data – wp_generate_attachment_metadata( int $attachment_id, string $file )

https://developer.wordpress.org/reference/functions/wp_generate_attachment_metadata/

Extended image metadata, exif or iptc – wp_read_image_metadata( string $file )

https://developer.wordpress.org/reference/functions/wp_read_image_metadata/#Return_Values

WP – Loop | post_thumbnail – Adding elements piece by piece

Your Basic WordPress Loop

Easily Adaptable WordPress Loop Templates

Your Basic WordPress Loop

The Ever-Popular Mullet Loop

4+ Ways to Loop with WordPress

The Default Loop

Loop with query_posts()

When to use?

Loop with WP_Query()

When to use?

Loop with get_posts()

When to use?

Customize the loop with pre_get_posts

When to use?

30-Second Summary

Sword Email Example – BUILDING

Adding to loop

#2

Full Version Example

Attachment Meta-Data – wp_generate_attachment_metadata( int $attachment_id, string $file )

Extended image metadata, exif or iptc – wp_read_image_metadata( string $file )

Image Editor - Bitmap PIXIE
Palleon | Palleon Documentation

Image Editor - Vector

Your Basic WordPress Loop

Easily Adaptable WordPress Loop Templates

Your Basic WordPress Loop

The Ever-Popular Mullet Loop

4+ Ways to Loop with WordPress

The Default Loop

Loop with query_posts()

When to use?

Loop with WP_Query()

When to use?

Loop with get_posts()

When to use?

Customize the loop with pre_get_posts

When to use?

30-Second Summary

Sword Email Example – BUILDING

Adding to loop

#2

Full Version Example

Attachment Meta-Data – wp_generate_attachment_metadata( int $attachment_id, string $file )

Extended image metadata, exif or iptc – wp_read_image_metadata( string $file )

Image Editor - Bitmap PIXIE Palleon | Palleon Documentation

Image Editor - Vector

Image Editor - Bitmap PIXIE
Palleon | Palleon Documentation