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:
<?php echo get_the_post_thumbnail( $id, $size, $attr ); ?>
- (int) (Required) Post ID.
- Default: None
- (int) (Optional) Image size.
- Default: ‘thumbnail’
- (int) (Optional)
- Default: None
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/
Share and Enjoy