Day 13: Using the Featured Image (Post Thumbnail) function in WordPress

WordPress comes with a lot of hidden or lesser known features that when used correctly can produce some pretty interesting results. One of these features is the Featured Image, or Post Thumbnail, funciton. On this 13th Day of WordPress we’re going to take a look at the Featured Image function and see how to activate, incorporate and use it in different ways in a custom theme.

Just to clarify before I begin: The naming convention here is really confusing: In the past this function was called “Post Thumbnail” because it dealt with the thumbnail. With the introduction of newer versions of WordPress, most notably version 3.0, the name of the feature has been changed to “Featured Image” while the function is still called “Post Thumbnail”. This is further confused by the fact that you can call the thumbnail size of a featured image as well as medium, large and original sizes. In short, the “Post Thumbnail” name is somewhat out of date and misleading. I’ll be using “Featured Image” throughout this tutorial because it is far more accurately descriptive.

Useage examples – thinking out of the box

The Featured Image and Post Thumbnail function is an often overlooked feature that can add a lot of functionality to a theme if used correctly. With the release of the twentyten theme it has come more to the forefront because it is used in the huge image in the header, but that’s just the tip of the iceberg of what is possible. Let me give you an example:

When working on the PhilipLanyon.com project we were faced with a tricky spec: Philip wanted the front page of his site to feature an assymetric grid showcasing screen grabs of his latest uploaded videos. To make it more complicated he wanted these grabs to shift to the right and down as he added new videos and he also wanted them to appear as thumbnails under the playing video when on a single video page.

To accomplish this we created a series of custom featured image types that were called by the different areas on the site. That way when Philip added a new video all he had to do was upload one featured image along with the video embed code and the correct image size would be displayed in the correct area of the site when that page or post was opened. The result was a site that looks cool and is easy to manage at the same time.

Activating the Featured Image function

Before we can do anything else we need to activate the Featured Image function. If you’re not sure whether the function is active or not, take a look in the right sidebar of your edit page. If you don’t see a tab named Featured Image there, the featured image funciton is not active in your theme.

The base function to activate the featured image function, to be placed in functions.php of your theme file, is:

add_theme_support( 'post-thumbnails' );

This allows you to attach a custom featured image to each of your posts and pages through the Featured Image tab.

In-app configuration of the Featured Image function

If you are using the featured image function as above you can control its output from within WordPress, more specifically you can control the sizes of the various outputs from the WordPress Admin panel:

Under Settings -> Media you’ll find three fields you can fill in: Thumbnail size, Medium Size and Large Size. These can be set to any width and height value you choose and when the various sizes are called they are displayed.

Here’s something you may not know: When you upload a photo to WordPress, the application creates three or more new versions of that photo for you in addition to the original: a thumbnail (normally cropped to a square), a medium size and – if the original is larger than the defined large size – a large size. And when you embed an image into your post or set a featured image, you can pick which one of these image versions you want to use.

Calling Featured Images from a template file

To get the featured image to display in your pages, posts, sidebar or whereever you want it you need to call it. This is done using the the_post_thumbnail() function of which the below is the base:

<?php the_post_thumbnail(); ?>

The above call will insert the thumbnail as defined when you set the featured image (so if you set it to thumbnail, medium, large or original it’ll be displayed in the selected size). To avoid any major disasters you can specify what size you want, either from the predefined sizes or even by calling a custom size like below:

<?php the_post_thumbnail('thumbnail'); ?> // calls the thumbnail size
<?php the_post_thumbnail('medium'); ?> // calls the medium size
<?php the_post_thumbnail('large'); ?> // calls the large size
<?php the_post_thumbnail(array(xxx,yyy)); ?> // calls the defined size (xxx and yyy replaced with numbers)
</php>

Advanced configurations

The base function is, as indicated by the name, just the basis of a more advanced function. You can control all aspects of the featured image function from within the functions.php file with more advanced instructions:

To restrict the featured image function to only posts or pages use one of the two function calls below:

add_theme_support( 'post-thumbnails', array( 'post' ) ); // Add it for posts
add_theme_support( 'post-thumbnails', array( 'page' ) ); // Add it for pages

You can also force default thumbnail size. This is done with a different function as set out below:

set_post_thumbnail_size( 50, 50, true );

where you can change the values – width, height, cropped – to whatever you want (for cropped, true means it’ll crop the image from the middle, false means it’ll squeeze or stretch the image to fid in the defined size).

If you want to get even more advanced you can even define your own custom image sizes for specific template files:

add_image_size( 'custom-post-thumbnail', xxx, yyy );

To call this custom size you use the standard template tag with the name defined in the function:

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

This tutorial is part of the 24 Days of WordPress series. If you want to learn more about WordPress and Expression Web check out the Sams Teach Yourself Microsoft Expression Web in 24 Hours series (version 2, 3 and 4), Lynda.com’s WordPress 3.0 Essential Training course and Microsoft Expression Web 4 LiveLessons.