• Tweet
• Share
• Email
• Sharebar

• Tweet
• Share
• Email

In WordPress 2.9+, the get_the_post_thumbnail is a new function that was added to allow you to select and display a post’s thumbnail image. If you have a version of 2.9+ installed, in your wp-includes folder, you will find a file called, post-thumbnail-template.php. Inside, the get_the_post_thumbnail() function is what will allow you to display your post’s thumbnail or thumbnails for a list of posts such as on your homepage or category (archive) pages. The get_the_post_thumbnail WordPress function will return your thumbnail in an html img tag so all you have to do is call the function where you want your thumbnail to be displayed, then style it using css.

How to use get_the_post_thumbnail

To use the get_the_post_thumbnail(), the first thing you MUST do is edit your Theme Functions file (functions.php) in your Appearance > Editor section in your wordpress control panel and add the following line within the php opening and close tags:


add_theme_support( 'post-thumbnails' )


This activates the “Post Thumbnail” widget in your post editor which will appear just below the category selection widget. There, you will find a “Set thumbnail” link that will pop up your standard wordpress image browser where you just select the image you want to use for the thumbnail.

In addition, this code will also activate an option in your image browser, “Use as Thumbnail”, which allows you to set your post’s thumbnail at the same time right after you upload an image.

The last thing you need to do is insert the following code to display the thumbnail in your post or post list:


<?php echo get_the_post_thumbnail($post->ID, 'thumbnail'); ?>


Then for each of your posts, set the post thumbnail and it will be displayed wherever you called the function.

Here are the options:

Usage Syntax:
<?php echo get_the_post_thumbnail( $id, $size, $attr ); ?>

Usage Parameters:
$id

• (int) (Required) Post ID.
• Default: None

$size

• (int) (Optional) Image size.
• Default: ‘thumbnail’

$attr

• (int) (Optional)
• Default: None

Usage Examples:
get_the_post_thumbnail($id); // without parameter -> Thumbnail

get_the_post_thumbnail($id, ‘thumbnail’); // Thumbnail
get_the_post_thumbnail($id, ‘medium’); // Medium resolution
get_the_post_thumbnail($id, ‘large’); // Large resolution

get_the_post_thumbnail($id, array(100,100) ); // Other resolutions

What it outputs:
The get_the_post_thumbnail WordPress function will return your thumbnail in an html img tag so all you have to do is call the function where you want your thumbnail to be displayed, then style it using css.


<?img src="your_selected_thumbnail.jpg" />


If you’re looking for a tutorial on how to have WordPress automatically get and display your post’s first image thumbnail read my tutorial.

Let me know how this works out for you. Here’s the official wordpress codex for this function http://codex.wordpress.org/Template_Tags/get_the_post_thumbnail and alternatively, here’s another post that discusses further customization and theme integration options http://wpengineer.com/the-ultimative-guide-for-the_post_thumbnail-in-wordpress-2-9/

Related Posts

2 Responses to “How to Use get_the_post_thumbnail to Set Your Post’s Thumbnail in WordPress”

1. Jim says:

   May 18, 2010 at 4:06 pm

   Hmm, I tried using the code tag but didn’t seem to work–only part of my functions.php code is showing. I’ll try without the code tags…

   Reply
   • King Rosales says:

     May 18, 2010 at 4:11 pm

     Hi Jim,

     I removed what you pasted in the comment because that was an about snippet and something from a search form and not something anyone would have in their functions.php file

     If you open your functions.php file by clicking Appearance > Editor then selecting “Theme Functions” (functions.php) and add the code above, it should work.

     Reply