How to Add Featured Images to Your Theme

WordPress first introduced the "Post Thumbnail" feature in version 2.9. This feature allows the user to set an image as the featured image for the particular post. In version 3.0, the "Post Thumbnail" feature was renamed as "Featured Image".

By default, this featured image option is not turned on. You will need to place a simple code snippet in your theme file to activate the function. Here's how you can get it to work in your current theme.

In your theme folder, open the functions.php file. Add the following code to the end of the file:

[php]add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150, true ); [/php]

Explanation of the code

The line add_theme_support( 'post-thumbnails' ); activates the "featured image" function. You should be able to see the "Set featured image" link on the right sidebar of the post editing page or when uploading any image.



The second code set_post_thumbnail_size( 150, 150, true ); determines the size of the thumbnail image. In this case, we have set it to be 150px wide by 150px tall. You can change it to suit your theme.

Displaying thumbnail images in your theme

Now that we have activated the feature, it is time to get it to display in the front end.

Open your index.php (or whatever place that you want the thumbnail image to appear). Within the loop, insert the following code:

[php]<?php
if ( has_post_thumbnail() ):
the_post_thumbnail();
endif;
?>[/php]

Note: The above code must be within the loop.

This will first check if there is any post thumbnail for the particular post. If yes, it will display the post thumbnail. If not, it will do nothing.

For more advanced uses, you can get it to display a default image when the post thumbnail is not available:

[php]<?php
if ( has_post_thumbnail() ) :
the_post_thumbnail();
else:
//url to the default image, or write your own code here
endif;
?>[/php]

That's it.