Different Size Post Thumbnails in your WordPress Themes

The post thumbnail or featured image was a great addition to WordPress and may have helped spur the “Magazine Theme” boom we have seen over the last couple of years. Basically, adding featured image support to a theme allows you to upload an image which gets associated with that post and can then be displayed alongside it in your theme.

WPlift uses (a cropped) featured image on our homepage next to each post :

We also use a larger full version of the image at the top of every blog post, single page.

This is how you can do the same and let WordPress auto-generate the smaller cropped version of the post thumbnail automatically.

1. Theme Functions

Open your theme functions.php file and add the following code :

[sourcecode language=”php”]
// post thumbnail support
if ( function_exists( ‘add_image_size’ ) ) add_theme_support( ‘post-thumbnails’ );

if ( function_exists( ‘add_image_size’ ) ) {
add_image_size( ‘post-thumb’, 700, 270 );
add_image_size( ‘home-thumb’, 203, 203, true );
}
[/sourcecode]

What this does is initially adds in post thumbnail support and then additionally tells WordPress to create 2 different sized post thumbnails.
“post-thumb” is 700px wide by 270px high and “home-thumb” is 203px by 203px – you change the names of these and the sizes to fit your theme.

You can also add in more sizes if required, for instance if you wanted to show another size on your post archives or for listing posts in your sidebar.

The final variable in the “home-thumb” image is “true” – this tells WordPress to crop the image and save it as a separate image.

2. Placing the images in your theme

To place the featured image on your homepage, open index.php and between the loop, paste :

[sourcecode language=”php”]
<?php if ( has_post_thumbnail()) the_post_thumbnail(‘home-thumb’); ?>
[/sourcecode]

And to place the image on post page, open single.php and between the loop, paste :

[sourcecode language=”php”]
<?php if ( has_post_thumbnail()) the_post_thumbnail(‘post-thumb’); ?>
[/sourcecode]

3. Uploading your Post Thumbnails

After adding the code to your theme functions.php file you will see a new option on your “Add New” post page called “Featured Image”, click the “Set Featured Image” link and the WordPress image upload box appears

Once you have uploaded the image, click “Set as featured image” and you will then see it added as follows :

And there you have it, a simple but effective way to add some more interest to your WordPress themes.

Leave a Reply