• Blog

    Latest from our Blog

  • Tools

    Our Favourite WP Tools

  • Hosting

    Recommended Web Hosts

  • Coupons

    Get great money off deals

  • Themes

    WordPress Theme Directory

  • Plugins

    WordPress Plugins Directory

  • Promote

    Your WordPress Product

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 :

// 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 :

<?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 :

<?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.


Author:

Oliver Dale is the founder of Kooc Media, a small internet company based in the UK. Kooc Media runs several high-profile websites including WPLift, ThemeFurnace and DesignersTalk.

Leave Yours +

12 Comments

  1. Wil

    Thanks for this tips,
    but it’s possible to add a specific thumbnail size for custom post type ?

  2. Debsnelson

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

  3. 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
    Wil

  4. Is there a way to set featured image in a batch, what is someone have 200 posts already and setting one featured image per posts will be a pain.

  5. Is there a way to set featured image in a batch, what is someone have 200 posts already and setting one featured image per posts will be a pain.

  6. agep Rumanto

    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. 

  7. Is there any wp plugin which do this thing fine, my wp version is 3.1

  8. Social Blogsite

    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.

  9. 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

Search

Our Sponsors