WordPress Featured Images Function

Previously called “Post Thumbnails” prior to version 3.0, the WordPress Featured Image function lets you choose a representative image for Posts, Pages or Custom Post Types. Simply put it’s your entry’s — whatever that might be (page, post, custom post type, etc) — ambassador. Your representative.

The WordPress codex suggests that its quite the useful function for “magazine-style” themes but this feature is invaluable for all types of themes. Where and how it shows up in a theme is your prerogative as the designer and hopefully fodder for wildly creative solutions.

Enable the feature

Before you can make use of this feature, you need to explicitly declare the function in your theme. To do so, crack open the functions.php and include the following:

add_theme_support( 'post-thumbnails' );

Having done that, in the Edit screen for your posts, pages and custom post types, you should now see the interface for selecting a Featured Image.

Using the Featured Image function

To simply show the Featured Image on the front-end, e.g. in the index listing of blog posts, we’d simply include this in the relevant template.

Lets say that in the context of our theme, we display the featured image just above the post title. Having already split our loop up into several parts, we open up e.g. the content.php template and insert the following code:

if ( has_post_thumbnail() ) {
  the_post_thumbnail();
}

First we check to see if the given post has a thumbnail specified, and if it does, we go ahead and display it.

Link it up

Typically you’ll want the featured image to link through to the single post view. To that end you’ll need to wrap the_post_thumbnail() with a link element.

An easy approach is to replace the above code with the following:

<?php if ( has_post_thumbnail()) : ?>
  <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
    <?php the_post_thumbnail(); ?>
  </a>
<?php endif; ?>

We’re still checking to make sure the featured image exists and then we’re wrapping it in a link.

There’s a function for that

Given how many times the call for a featured image will be used, wouldn’t it be nice if we could DRY up the code in the template a bit? Luckily, WordPress affords us at least 2 approaches to handle this.

We’re going to be following the intuitive and prevalent approach to handling featured images. i.e. on the index page, we’ll wrap the featured image in a link while wrapping the same image in a figure element in the single post view.

Crack open the functions.php and create a function that checks whether or not we’re in a single view or not.

function butter_featured_image() {
  if ( is_singular() ) : ?>
    
    // wrap the_post_thumbnail() in a figure element
    <figure class="featured-image">
      <?php the_post_thumbnail(); ?>
    </figure>
  
  <?php else : ?>
    
    // wrap the_post_thumbnail() in a link
    <a class="featured-image" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
      <?php the_post_thumbnail(); ?>
    </a>

  <?php endif;
}

With that in place, all we have to do now in the templates is to call our butter_featured_image() function. So, for instance, we’ll crack open the content.php and where we had the following:

<?php if ( has_post_thumbnail()) : ?>
  <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
    <?php the_post_thumbnail(); ?>
  </a>
<?php endif; ?>

simply replace that code with a call to our new function like so:

<?php butter_featured_image(); ?>

This function now takes care of conditionally checking what view (index or single) we’re on and outputting the featured image in the relevant markup.