How to Add Post Thumbnails to Any WordPress Theme

By 18-06-2012   BloggingTutorialsWordPress

How can you add post thumbnails to any WordPress Theme and highlight post featured images in blog archives and index templates easily. Post thumbnails are a great design feature of WordPress themes which allow WordPress bloggers to label one image in each article as a Featured Image.

The Post thumbnail which features the Featured Image can be made to display on the theme pages easily alongside the article links and post excerpt. All modern WordPress themes will have post thumbnail support and if you have enabled the feature, your post thumbnails should be displaying by default.

post thumbnails

If you have an older custom theme, you can add it to your theme code in just a few steps.

Label Featured Images

The first part is to label one image of your post as Featured image. Follow the path to the image: Post edit page > Add media > Gallery > Image. Now make one of the images the featured image.

featured image

You will need to enable featured images for all article for which you need to display a post thumbnail. Here is the fastest way to add Featured Images to multiple posts quickly.

Add Post Thumbnails Theme Support

Add the following code to your themes functions.php file. This assumes that you have other content in the PHP file and this code goes within the PHP open and close tags.

add_theme_support('post-thumbnails');

If you theme does not have a functions.php file, then you can create a new text file in any text editor and name it functions.php and upload it to your WordPress theme directory.

<?php
add_theme_support('post-thumbnails');
?>

NOTE: Remember there should be no blank lines after the closing PHP tag in this file or it will give errors. Note that this is a very important file, and if you use the wrong code anywhere then your theme, WP admin and site – all become unavailable. So keep a backup always. If the error occurs, then you need to FTP inside your server and restore the back up file or reverse the changes.

Display Post Thumbnails

Now you need to add the code in the index.php and archive.php files of your template. You can add it just above the title of posts or above the content.

<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'thumbnail' );
}
?>

Now what this code does is check if the post thumbnail is there (which means if you have labelled a featured image for the article), and will display it. The thumbnail will be 150px wide and 150px high, which is the default size.

If that thumbnail size is too large for your theme, you can specify the image size.

<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( array(80,80) );
}
?>

This code specifies that the theme should display thumbnails which are 80px wide and 80px high. You can of course choose whatever size you like.

Styling Post Thumbnails

I use the CSS class img.wp-post-image to style the thumbnails. In the most basic styling, you want to left align (or right align) the image and add some padding to its sides. So you can add a simple code like this to your style.css file

img.wp-post-image {float:left; padding: 5px;}

We used this technique to get post thumbnails support on our WordPress theme and you can too. Obviously you need to specify featured images for your articles, or the post thumbnails will not show. Check out the new post thumbnails live on our homepage and archives now.

4 comments on “How to Add Post Thumbnails to Any WordPress Theme

  1. Radha Krishna says:

    That’s a very useful article. I’ve been using WordPress plugin to add thumbnails. Will use this manual method so that I can reduce some burden on the server. Thanks.

  2. Gadgets says:

    Do you have something like this for blogger? I need something like this. Please share if you have. Thank you.

  3. Shilpa Verma says:

    Whats wrong if i use some Plugin for the same, will it affect my Rankings in Search Engines ?

    • P. Chandra says:

      Its best to use simple code than continue to use plugins for every small feature. Images increase visitor experience and helps improve your site engagement parameters.

Leave a Reply

Your email address will not be published. Required fields are marked *

*