How to Use get_the_post_thumbnail to Set Your Post’s Thumbnail in WordPress

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.

<div style="float: right; padding-left: 10px; margin-left: 10px;"><script type="text/javascript">// <![CDATA[
google_ad_client = "pub-3010944685897060";
/* 300x250, created 1/28/10 */
google_ad_slot = "8575630408";
google_ad_width = 300;
google_ad_height = 250;
// ]]></script><br><script src="https://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">// <![CDATA[

// ]]></script></div>

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:

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 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.

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 Avatar
    Jim

    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…

    1. King Rosales Avatar
      King Rosales

      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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.