Using WordPress Post Thumbnail or Featured Image in Custom Pages

WordPress introduced Post Thumbnail theme feature in version 2.9. You can use featured image that represents your page or post virtually anywhere using the functions provided by WordPress. This allows you to create custom pages that show post thumbnails or sideshows of posts using featured images.
If you are a theme developer you can make use of this feature to create magazine style themes because each post or page can have an image to represent it.
But how do you actually get that featured image to display in posts and in the loop? Here in this article we will see how we use the WordPress post thumbnail or featured image, for example, in custom pages that can be used to display post archives in an impressive way.
Related posts:

• 60+ Most Useful WordPress Tips, Tricks, Tutorial and Hacks

First of all you need to check whether your WordPress theme supports post thumbnails or not. For example if your theme supports post thumbnails then “Featured Image” metabox will be visible on the on the Edit Post and Edit Page screens. Or while adding images to post or pages you can click on the “Use as featured Image” link in the file upload window.

Using WordPress Post Thumbnail or Featured Image in Custom Pages

Here we are going to create page which displays lists of posts from a particular category. This is in fact a custom archive page. Instead of using just the post title and link we will show a thumbnail of the featured image along with the post title.
WordPress provides three important functions to access the featured thumbnail images.

• has_post_thumbnail()
• the_post_thumbnail()
• get_the_post_thumbnail()

The “has_post_thumbnail()” function is to check if the post has a Post Thumbnail assigned to it. You can utilize this method to decide alternate ways of showing images if there is no post thumbnail assigned to the post. This method returns Boolean value. So it can be used inside “if” condition.
The “ the_post_thumbnail()” method actually returns the complete image html tag along. This method is used to display the featured image of the current post. This function must be used inside a loop.
The “get_the_post_thumbnail() ” is to get the featured image for any post. This function usually used to return the post thumbnail for use in PHP code instead of displaying the image.

Sample code

In our scenario we are going to iterate through the list of posts under a particular category to display the posts along with thumbnails. So we will be using the “get_the_post_thumbnail()” along with parameters.

1
2
3
4
5
6

<?php
		$category = 10 ;
		$categoryname = get_cat_name($category);
		$args = array( 'numberposts' => 5, 'offset'=> 1, 'category' => $category );
		$myposts = get_posts( $args );
		 ?>

The above code will return the posts under the category 10. The variable “numberposts” decides the number of posts to return. If you want pagination you must use “query_posts()” method to get paged results.
Now you need to loop through the posts to display the title and the thumbnail images.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<ul>
<?php
foreach($my_posts as $post) {
	if(has_post_thumbnail($post->ID)){
	?>
		<li>
		<?php echo get_the_post_thumbnail( $post->ID ,array(50,50)) ?>
		<?php
	}else{
	?>
		<li>
		<?php echo ''; ?>
		<?php
		}
	?>
	<a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a>
	</li>
<?php
}
?>
</ul>

get_the_post_thumbnail Method Parameters

The method “get_the_post_thumbnail” accepts three parameters namely “post_id”, “size” and “attr”. All three are optional. The default image sizes of WordPress are “thumbnail”, “medium”, “large” and “full”. But in the above example we have specified a custom size of “50,50”.

Before you Go,

Before you go, subscribe to get latest technology articles right in your mailbox!.

EmailEnter your email address

Subscribe