The Post Thumbnail Feature in WP

Post Thumbnails in WordPress are a huge time-saving & flexible feature that have been around since version 2.9 that can save you a ton of headache and editing time when you’d like to display photos in articles. Its most commonly used to add a “featured image” to each post like you see in many blogs. Its quite flexible and you can create each image in multiple sizes and ratio constrictions.

If you’re looking to add post-thumbnail support to your WP Theme, its not hard. You simply need to edit a few theme files to enable it. If you’re using a newer or recently updated theme you may already have Thumbnails enabled and don’t even know it. The easiest way to check and see is to go to the “Add an Image” in edit post or add new post. Once you have uploaded an image, you’ll see this little link at the bottom of the options of the image. Notice the “Use as Featured Image” link in the screenshot. That will make this image the featured image of your post, and the image that will serve as your thumbnail image.

use as featured image screenshot

Now, to add support if you don’t have it:

First, You’ll want to add this to your themes functions.php file

1
2
3
if ( function_exists( 'add_theme_support' ) ) { 
  add_theme_support( 'post-thumbnails' ); 
}

That adds support for post thumbnails to your theme.

Now you’ll likely want to add some size restrictions/rules. This will have WordPress create different sized images for each additional size you add.
All you’ll need to do is add lines to your functions.php file

1
2
3
4
5
if ( function_exists( 'add_theme_support' ) ) { 
  add_theme_support( 'post-thumbnails' ); 
  add_image_size( 'normal-post-thumbnail',  280, 200, true ); // We'll use this size for the Loop, for multiple posts on a page
  add_image_size( 'single-post-thumbnail',  600, 9999 ); // We'll use this size for each articles page, as its much larger
}

What I’ve added here is a couple lines that tell WordPress to create each of these sizes. The text in the ‘__ ‘ is the name of the size (which I’ll explain a bit further down the page). The numbers (ex: 280, 200) is the width,height in pixels of your image size. The ‘true’ that is optional after that crops the image to make sure to keep the ratio. For example each image will be 280×200 pixels. The system will crop it as best it can which usually is never a problem.

Once you’ve got your sizes all set, all you need to do is add a couple lines to your Themes Loop files (or index if your theme uses the loop in the index file, and not in its own file. (This is done the same on any additional pages such as the single.php)

1
<?php the_post_thumbnail( 'normal-post-thumbnail' ); ?>

I’ve taken the ‘normal-post-thumbnail’ from the image sizes from functions.php we created above. That says to embed the thumbnail of that size within your theme file where you paste it.
So for this example we’ll paste it in our loop-index.php file.

Additional Info/Sources: