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 );

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’); ?>

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’); ?>

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.



Oliver Dale is the founder of Kooc Media, An Internet Company based in Manchester, UK. I founded WPLift and ThemeFurnace, find out more on my Personal Blog. Thanks!

Related Articles


12 thoughts on “Different Size Post Thumbnails in your WordPress Themes”

  1. This worked so well and was so much easier to follow than the many other tuts that I tried. Thanks so much for the tips, Oli :)

  2. I have had huge problems with the WordPress image editing software.  The biggest problem is placing an image where I want it.  too often, the images seem to rearrange tmselves and end up where they don’t belong.  Do you know of a way to be able to evenly space, multiple thumbnails in a container that is then placed in the post body?  (perhaps  with a grid system?)  I’d like to be able to load a panel of 750×1000 px with very small thumbnail images of 30 or 40 px.
    Is there an existing plugin for this or, software I can obtain?  Thanks

  3. Is it possible to add different thumb size in home page (index.php)? I want to add a featured content with a different size just like engadget has. 

  4. you should note that CROPPED means as WP wants (and they say from 3.0 the cropping doesn’t longer work), because cropping the image with wp tools will crop ONLY the default sizes, not yours here defined.

  5. Hi Oli,

    I need help! … I have the home in two columns and images of 312×100 the problem is that when you check on the category, you see the post list in this category but the images appear as in the home, of 312×100.

    I needed the images in home in 312×100 and in the category listing in 980×200

    This is how I have configured each column in the home:

    I don´tt found anything to solve my problem, I’ve put your code but the image is doubled.

    Many Thanks for your help.
    A greeting

Comments are closed.


Create Your Own

Building beautiful WordPress websites has never been easier. Explore the visual drag & drop Theme Builder that does it all, and works on any theme. Coding skills needed: none.