Using Post Thumbnails In Your WordPress Theme

Back in WordPress 2.9 the post thumbnails function was integrated right into the the post and write page panel so users could easily add featured images to their posts using the image up-loader. This meant no more dealing with custom fields! But, for all this to work you need to enable the post-thumbnails support in your theme’s function.php file.

The following post will show you how to enable post thumbnails for your WordPress theme, how to include the feature image in your posts, homepage or anywhere else in your theme and how to declare different thumbnail sizes

Step 1: Enable Support For Post (featured) Thumbnails

In order for the “Featured Image” box to appear in your post/page editor page you need to add the following piece of code to your functions.php file.

if ( function_exists( 'add_theme_support' ) ) {
  add_theme_support( 'post-thumbnails' );
}

Step 2: Declare Post Thumbnail Image Sizes

Once you have enabled the post-thumbnails in your theme you will want to declare various sizes for use in your theme. By declaring various sizes in your functions.php file WordPress will automatically crop images as they are uploaded to match the sizes you’ve defined. This way you can call the different images within your theme files without having to use any external script, such as “TimThumb”.

Paste Into Your Functions.php & Edit

Below is a sample of how to declare your sizes, which should be easy to understand and edit to fit your needs.

// featured image sizes
if ( function_exists( 'add_image_size' ) ) {
    add_image_size( 'full-size',  9999, 9999, false ); // full size image
    add_image_size( 'slider',  920, 320, true ); // slider image
    add_image_size( 'post',  150, 150, true ); // post image
}

Step 3: Using Featured Images In Your Theme

Now that you have enabled post thumbnails a new meta box will show up in the post/page editor for those using your theme. This will allow them to set a specific image as the featured image for that post. But what good is it if these images aren’t showing up anywhere in your theme?

There are two methods for inserting your images into your theme. The first one will call the image and automatically create the HTML, the second method will allow you to call the featured image in the loop and then make your own IMG SRC tag for greater control over the alt tags, title tags and rel attributes.

Method 1:

Insert the following code where you want  your featured image to appear (anywhere within the WordPress loop – make sure to change the name to match the image size declared in step 2)

<?php the_post_thumbnail('post'); ?>

Method 2:

* Insert the following code right at the top of your Loop:

// get featured image
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'post');

* Show your image (with conditional):

<?php if(has_post_thumbnail()) { ?>
<img src="<?php echo $thumbnail[0]; ?>" alt="<?php the_permalink();" />
<?php } ?>