Post Thumbnails were first introuduced in the release of WordPress 2.9, but seeing how the theme structure has slightly changed in 3.0 we have put together a short tutorial showing you how to add Post Thumbnails to your articles and posts.

You will require basic understanding of WordPress Theme development and PHP. This tutorial will be split into two parts, one for WordPress Admin amendments and one for PHP updates to the core theme files.

WordPress Modifications

We will be using the new default theme to showcase this tutorial, but it can be easily adapted into any theme upon release. First you should have already have the WordPress beta installed already and none of the code has been modified.

If you are logged in as an Administrator, press Edit under the post and you will see the Featured Image widget.

Set a featured image for your post. In this example it is best to use one that is rectangular, so we have gone for the WordPress logo.

Now the Featured Image widget should display the WordPress Logo as shown below.

Now it’s time to update your post, but you will notice that the Featured Image will not show in your posts or articles. But to fix this some amendments to the themes code need to be updated.

Updating Your Themes Structure To Support Post Thumbnails

If you hadn’t noticed already once you go into the twentyten theme folder, there are a few new files. One being loop.php which has a majority of the code that the index.php had in WordPress 2.9.

Open loop.php in your favourite text editor and find the following code which starts on line 138:

<div class="entry-content">
 <?php the_content( __( 'Continue&nbsp;reading&nbsp;<span>&rarr;</span>', 'twentyten' ) ); ?>
 <?php wp_link_pages( array( 'before' => '<div>' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
 </div>

One small snippet of code needs adding to the above, which will display a Featured Image if one is selected. If there isn’t one then nothing will be displayed, simple as that!

<div class="entry-content">
// The Post Thumbnail function is active by default, but this line of php will make it display.

<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(200,160), array("class" => "alignleft post_thumbnail")); } ?>

//Post Thumbnail Ends

 <?php the_content( __( 'Continue&nbsp;reading&nbsp;<span>&rarr;</span>', 'twentyten' ) ); ?>
 <?php wp_link_pages( array( 'before' => '<div>' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
 </div>

You amend the numbers to change the Height and Width of the thumbnail

<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(200,160), array("class" => "alignleft post_thumbnail")); } ?>

Now after you have saved loop.php, refresh your blog and you will now see a Post Thumbnail assigned to each of your posts.

If you are having any issues with following this tutorial, please leave me a comment and I will assist promptly!

Sign up for 640-816 web designing training and become expert using self paced 70-647 study guides and 640-553 design tutorials prepared by top experts.