post_thumbnail


Since WordPress version 2.9, featured images (formerly known as “post thumbnails”) are integrated in the Write Post and Write Page panel. Not all WordPress themes make use of these fields, and a change to your template files is required.

In this post I will explain how you can add Featured Images to your posts and pages with only a modification to your functions.php file, and some basic styling using css. This is in particular useful when you have multiple Page templates, and therefore need to update several files to incorporate the featured images in each page.

More after the break.

This article will outline how to:

Enable support for featured images in your WordPress theme

Before you can add and use featured images, your theme needs to be updated to enable the feature. First of all, you need WordPress 2.9 or higher. Download the latest version of WordPress and upgrade if you haven’t done so already. If you do not see the “Featured Image” section on the right bottom side of your Write Post or Write Page panel (see image here), chances are that you need to enable this.

To do so, you need to add the following code to your functions.php template file:

// Add support for Featured Images
if (function_exists('add_theme_support')) {
	add_theme_support('post-thumbnails');
	add_image_size('index-categories', 150, 150, true);
	add_image_size('page-single', 350, 350, true);
}

As you can see, in the WordPress backend, these are still referred to as Post Thumbnails. The key code here is to add_theme_support for post-thumbnails. The add_image_size lines define what dimensions the featured images will have when displayed.

The code is wrapped in a condition to only do this when the add_theme_support function exists, which should prevent any issues should someone try to implement this on a WordPress version pre WordPress 2.9.

Add a featured image to your post or page

Featured images can be attached to your post or page using the Write Post or Write Page panel. There is a section on the right bottom side where you can set a featured image. Walk through the following steps to attach the image to the post or page.

  • Click the set featured image link
  • Upload a file from your computer, or use an image from the media library
  • Wait for the image to upload, and the following screen to appear. Click the “Use as Featured Image” link
  • The featured image will now show on the Write Post or Page panel

    • Insert featured images as thumbnails in your post or page content

    Now we want to insert that featured image in our post or page. To complicate this slightly, we want to use two different dimensions. On our blog index page we want to show a small thumbnail (150px by 150px), but in the full blog post, or on a page, we like to show a larger version of that same image (say, 350px by 350px). We’ve already added code for this in the first step of this tutorial.

    WordPress uses hooks to enable developers to add actions, or add filters to any content that is to be displayed on your site. Without going into too much details, we will use the hook for the post or page content and add our featured images thumbnails to that content, without having to modify any theme template files.

    To do so, we will create a new function that will “hook into that hook, and add to the content”. Add the following code to your functions.php template file: 

    function InsertFeaturedImage($content) {

global $post;

$original_content = $content;

    if ( current_theme_supports( 'post-thumbnails' ) ) {

        if ((is_page()) || (is_single())) {
            $content = the_post_thumbnail('page-single');
            $content .= $original_content;
            } else {
            $content = the_post_thumbnail('index-categories');
            $content .= $original_content;
        }

    }
    return $content;
}

add_filter( 'the_content', 'InsertFeaturedImage' );

    For those interested, a quick rundown on this code:

    • line 01 defines and names the function (InsertFeaturedImage)
    • line 03 makes sure we have the relevant post or page data available for this function
    • line 05 saves the content of our post or page
    • line 07 ensures that the following code is only executed if there is support for the post-thumbnail function.
    • line 09 checks to see if the content is from a single blog post or page, and if so,
      • line 10 replaces the content with the featured image (the_post_thumbnail), using the ‘page-single’ format (350px by 350px)
      • line 11 appends the saved original content of the post or page to the content with the thumbnail now inserted first
    • Line 13 and 14 do similar for blog index pages, or archive and category pages, making sure the smaller format (150px by 150px) is used
    • Line 18 will send the modified content back, just before it is displayed on your site
    • Line 21 finally will make sure that this function (InsertFeaturedImage) is executed each time before any post or page content is to be displayed

    Style the images in your post or page content

    Finally, we will style the images so that they float nicely to the left of our content, while leaving a bit of room around the image. The image classes (.attachment-page-single and .attachment-index-categories) are created automatically by WordPress, and are based on the image-sizes we defined earlier in step 1.

    Add the following code to your stylesheet style.css.

    .attachment-page-single {
    float: left;
    margin: 12px 8px 8px 0px;
}

.attachment-index-categories {
    float: left;
    margin: 12px 8px 8px 0px;
}

    And that should do the trick. Feel free to leave your comments below.

    added 2011-05-23: To add theme support for post thumbnails on posts AND pages, use the following code:

    // Add support for Featured Images
if (function_exists('add_theme_support')) {
	add_theme_support('post-thumbnails', array( 'post', 'page' ) );
	add_image_size('index-categories', 150, 150, true);
	add_image_size('page-single', 350, 350, true);
}

    Enjoyed this article?

    Stay up to date, and subscribe to my RSS feeds to receive tips, tricks and news by e-mail!