Post Thumbnails in WordPress 2.9

WordPress 2.9 introduces a built-in feature for post thumbnails, something that has previously been archived using custom fields. Now, you can select and upload thumbnails from the post screen and the media manager.

Enabling your theme

For the feature to work, you need to enable it in your theme. This is no hard process. All you need to do is paste this one line of code into your functions.php file:

add_theme_support('post-thumbnails');

Adding a thumbnail to your post

When you have added the above line of code into your functions file, visit your new posts screen to on the right, below your post tags, find a brand new, “Post Thumbnail” box. In there, you can click the set thumbnail to bring up the image uploader and upload (or browse your library of images) a thumbnail for the post.

Post Thumbnail Box

When you have uploaded an image, or found one you want to use, just click the “Use as thumbnail” link at the bottom of the image inspector.

Displaying the thumbnail

All that is now left is to display the thumbnail in our theme. Fortunately, this too is really easy to do. The basic include is as following:

the_post_thumbnail();

If you include that in your theme, you will have the thumbnail that you selected before show up.

There are several options available for the_post_thumbnail function.

Changing the size

You can pass the function the different resolutions that WordPress use for images, defined in your media settings.

// Original
the_post_thumbnail();
 
// Thumbnail Size
the_post_thumbnail('thumbnail');
 
// Medium Size
the_post_thumbnail('medium');
 
// Large Size
the_post_thumbnail('large');

You can also set the size to any specific value you want by setting an array that passes the size parameter to the image tag. In this demo. I am using three sizes, 50×50, 150×150 and 300×300.

// Size 50x50 pixels
the_post_thumbnail(array(50,50)); 
 
// Size 150x150 pixels
the_post_thumbnail(array(150,150)); 
 
// Size 300x300 pixels
the_post_thumbnail(array(300,300));

Adding classes, aligning and more…

As you might have gotten from the last example, we are just passing the image tag that the function outputs, some values about the width and height. We can also pass it other HTML variables, such as adding a class, which can be used to align it, or add a border:

// Align left
the_post_thumbnail(array('class' => 'alignleft')); 
 
// Align center
the_post_thumbnail(array('class' => 'aligncenter')); 
 
// Align right
the_post_thumbnail(array('class' => 'alignright')); 
 
// Add a border (providing you have a css class of .border set up)
the_post_thumbnail(array('class' => 'border'));

You can put all of this together and get an output which renders the image at say 150×150 and aligns it to the left:

the_post_thumbnail(array(150,150), array('class' => 'alignleft'));

Backwards Compatibility Warning!

Don’t forget that this is a new feature and if you are installing this on a blog with hundreds or thousands of posts already, that perhaps already has an older post icon system set in place (using custom fields) or hasn’t got anything at all, you might run into display issues. A quick way to solve this is by some easy if else statements:

if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) { //Checks if the post as the new thumbnail
	the_post_thumbnail(array( '180,180' )); //If it does, it outputs a thumbnail with the size 180,180 pixels
} else {
	$thumbnail = get_post_meta($post->ID, 'thumbnail', true); //If it does not, it gets the value from the custom field, "thumbnail"
	if ($thumbnail) { //If that custom field exists
		echo '<img src="'.$thumbnail.'" alt="" width="180" height="180" />'; //It prints out that thumbnail
	}
}

The new post thumbnails are powerful yet easy to add to your theme, now in WordPress 2.9.