Until now there was no feature in WordPress to allow you to post thumbnails, so we had to use custom fields or plugins or embed a picture inside the content to act as a thumbnail (that’s what i did when i first started with wordpress). The new version comes with that feature.

I assume you know what a post thumbnail is, you do know, right? Ohh ok, sorry, had to ask. Well let’s get to the point.

We will go through 3 simple steps in this tutorial.

  • First – Activating thumbnail feature
  • Second – Adding thumbnail to a post
  • Third – Showing the thumbnail in a theme

1. Activating The Feature

Add the code bellow to the functions.php file in your theme folder.

add_theme_support(‘post-thumbnails’);

There is another function for thumbnails, and it’s used to automatically resize the image you set to be the thumbnail, so if you want your thumbnail to be exactly the same as the image you uploaded feel free to skip to second step.

That function is set_post_thumbnail_size(), which you call after the add_theme_support() function and if called, the image you have set as the thumbnail will be automatically resized. You can declare 3 variables inside of it, width, height and cropping. Cropping is set to false by default so it’s not required. 

set_post_thumbnail_size(150, 100);

With the code above your thumbnail will be resized to approx 150px wide and 100px tall, keeping the aspect ratio. So the resized image will be closest to or exactly 150×100 which depends on the original size.

set_post_thumbnail_size(150, 100, true);

With the code above your thumbnail will be resized to exactly 150px wide and 100px tall, but you might loose a part of the image, because it’s cropped.

2. Adding Thumbnail To A Post

Go to your admin dashboard and either go to create a new post or edit existing one.

Notice: If you are creating a new post, first fill the title field so it can save the draft, otherwise you can’t add a thumbnail.

dashboard

Click on the set thumbnail link, and you will get the same modal window like when you are adding an image. Now upload an image and when done you will see this.

dashboard

Click the use as thumbnail link and in few seconds you will see the thumbnail tab gets updated with the thumbnail like on the next screenshot.

dashboard

3. Show it

The code bellow is used to echo the post thumbnail image. 

the_post_thumbnail();

But for example if you have a div wrapping the thumbnail, and you haven’t set a thumbnail for some post, then you will get an empty div. So it’s advised to run a little if statement to check if the post has a thumbnail.

if ( has_post_thumbnail() ) {
the_post_thumbnail();
}

Congrats, you have added thumbnails feature to your blog.

Some additional codes

Well, one more if statements is suggested, just to make sure the theme is running on WordPress version that can use add_theme_support() function which is introduced in 2.9. I’m not using it on my blog because i know i won’t downgrade it to an older version.

1. The activating

if ( function_exists( 'add_theme_support' ) ){
add_theme_support(‘post-thumbnails’);
//and add the resizing function here if you need it
}

2. The Showing

if ( function_exists( 'add_theme_support' ) && has_post_thumbnail()){
the_post_thumbnail();
}

You might also want to check a screencast made by Jeffrey Way on setting up and using the feature.

Final Words

That’s it, i hope you learned something from this tutorial. If i made a mistake somewhere or you think there is a better way to achieve some part feel free to say so in the comments.

Visit the best themes marketplace with over 600 premium wordpress themes.