WordPress offers a bunch of neat features and enhancements over eariler versions, one of my favorites will be the topic of this tutorial. WordPress now supports a very handy feature called Post Thumbnails, which you can see in use on my site here. All the post images that show on the home page are generated automatically by uploading one image and setting the post thumbnail to use that image.

Some themes that are coming out now have support for this feature in them now but most do not, and if you are like me and use a heavily modified version of a theme or have a custom one of your own then simply upgrading to a new release isn’t an option. So I will show you in a few easy steps how you can add in this awesome functionality to your existing WordPress theme in a few simple steps.

The first step that is needed is to enable the core functionality by editing your themes functions.php file (if you dont have one, make it now) and within this finctions.php file you will need to add in the following code to “turn on” this WordPress feature.

[php]add_theme_support( ‘post-thumbnails’ );[/php]

This will enable the built in functionality in WordPress (don’t do this unless you are running version 2.9 or newer)

You can also add additional functionality to this process like I have on this site, if you know the various sizes you want the thumbnails to be created at you can simply add additional lines like the following to enable specific size thumbnails that you can use in your theme.

[php]
set_post_thumbnail_size( 150, 150, true ); // Normal post thumbnails
add_image_size( ‘feat-thumbnail’, 85, 85, true ); // featured scroller thumbnail size[/php]

making the complete addition to the functions.php file look like so:

[php]
add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size( 150, 150, true ); // Normal post thumbnails
add_image_size( ‘feat-thumbnail’, 85, 85, true ); // featured scroller thumbnail size[/php]

What the above code does is create a post thumbnail that is 150px by 150px in size and another that is 85px by 85px that I use in my featured post scroller at the top of my home page, the true after sets it to “hard crop” mode which will crop the image to those exact sizes, if you leave the true out it will do the normal compress to size bit that will likely distort the image you are working with but it’s up to you which way you want to do it.

Once you have this added to your functions.php file you will see a new option on the bottom right of your post/page editor named “Post Thumbnail” with a link to “set post thumbnail” under it, click it and the rest is history :) This is all fine and dandy, but guess what… you won’t see the post thumbnails anywhere in your content unless you add them where you want them to go, this is also a simple process that you can complete easily as well. First off you need to decide where you want to include your newly created thumbnails. Once you know where you want them, you can have them included automatically by using the following code in your template files:

[php]<?php the_post_thumbnail(); ?>[/php]

Which will output the post thumbnail if you have set one for the post, this can also be elaborated on to show your other available thumbnails that you setup in your functions.php, like in my example here you could put the following bit to show the featured post thumbnail:

[php]<?php the_post_thumbnail( ‘feat-thumbnail’ ); ?>[/php]

Of course, if there is nothing to show you may want to us a little if statement and include a default image to maintain your layout integrity, here is a sample that I use in my featured posts slider here on this site:

[php]
<?php
if ( has_post_thumbnail() )
the_post_thumbnail( ‘feat-thumbnail’ );
else
echo ‘<img src="path/to/alternate/image.jpg" height="85px" width="85px" alt="alt text" title="your title" />’;
?>[/php]

Thats it, if you have any questions comments or additions please feel free to add your comment.