Hello, I'm mitch canter.
I’m a director of engineering
Living In nashville, tn.

mitch canter

Featured Images in WordPress: An In-Depth Guide

Tutorial

Adding a featured image (or a post thumbnail) to WordPress is one of the easiest ways to add some spark to your blog post.  Most modern themes support at least some form of the featured image, and any custom-made themes can implement a featured image fairly easily, and with just a small bit of code.  But some themes only scratch the surface when it comes to utilizing a featured image to its full potential.  Let’s dive in and look at featured images to see if there’s any way to get the most out of one of WordPress’ best features.

What is a Featured Image?

A “Featured Image” is an image that is set up (at the individual post or page level) to serve as the “main image” for a post or page.  By setting a featured image in the blog post, you give WordPress easy access to call it via a template tag, which means that (with the right setup) the post image will have the same dimensions and styling – perfect for an attention-grabbing headline image or to keep uniformity throughout a site’s design.

Setting a Featured Image

Setting a featured image is extremely easy – simply create (or edit) a blog post, and look in the right-most column.  By default, it’s near the bottom, but you should see a module called (surprisingly) “Featured Image”.

By clicking on the link called “Set Featured Image”, you are taken to the Media Uploader.  Simply choose an image already in your library (or upload a brand new image) and select the “Set Featured Image” button.  If you’ve done it successfully, it’ll show a thumbnail of the image in that module.

If your theme already supports Featured Images, you’re done – you can sit back and enjoy the benefits of seeing your image throughout various places on your theme.

Here are a few typical places you may see a featured image in WordPress:

  • Blog Archive page – as an image next to your headline and excerpt
  • Photoblog – Featured Images are great for photoblogs because it allows you to set the image exactly how you wish it to show up.
  • Jetpack’s “Popular Posts” Widget – this widget will show a copy of the “thumbnail” version of a featured image

If your site doesn’t support a featured image, then we have a small amount of work to do in order to get it to show up correctly.

Allowing WordPress to Use Featured Images

Some people reported not seeing a box at all for a featured image.  That means that your theme doesn’t support it right out of the box. Luckily, there’s a small snippet of code we can drop in to fix that:

add_theme_support( 'post-thumbnails' );

This, very simply, tells your theme to start supporting featured images. Now, we have to start telling our template to utilize the images.  But first:

Setting a Featured Image Size

Did you know that you could define custom sizes for featured images in WordPress?  While the WordPres Codex has extensive information on it, the main thing to know is that the “add_image_size” function will allow you to specify absolute sizes for your featured images.

add_image_size( 'custom-size', 220, 270, array( 'left', 'top' ) );

Adding this snippet to your “functions.php” file will:

  • Create a custom image size, named “custom-size”
  • Set the size of the image to 220×270 (width first, then height)
  • Cause the image to “crop”, specifically from the top left corner.

By changing these options, you can set exact sizes and crop points for any/all of your images.

One thing to note: If you’re setting a new featured image size on an existing blog – one that already has featured images set – you’ll need to regenerate the thumbnails to take advantage of the new size.  The Regenerate Thumbnails plugin by Viper007Bond will do this either en masse or post-by post.

Calling a Featured Image in your Template

Once you’ve set your custom featured image size, it’s time to access it in your theme.  Obviously there will be certain styling and location restrictions to take into effect, but let’s start with something simple: just dropping the featured image into your post template.  Find your “post loop” – usually in index.php or loop.php, and add this code:

<?php if ( has_post_thumbnail()) { the_post_thumbnail('custom-size'); } ?>

This takes the featured image – the new, custom size we defined above – and drops it into your content.  All images will have a few styles applied to it automatically, which allows for both bulk styling and image-by-image styling.

  • attachment-custom-size
  • wp-post-image

The first style is specific to that custom size of featured image.  The second one is applied to ALL “inserted media” in WordPress – if you upload it to the media gallery, that style will be attached in some way.  For a smaller image like that, I would insert it automatically to the right of the content:

img.attachment-custom-size{
float: right;
margin-left: 15px;
}

That will give us an image that automatically sets itself to the right of the content and “wraps” the content around it.

Using a Featured Image “Caption” as a Byline in a Post

You can add captions to featured images to display the text along with the image any time you insert it into the content.  But, what a lot of people don’t realize is when you set a featured image, you’re actually anchoring that image and the corresponding caption to be used anywhere.  I like to use the caption of the featured image as a byline of sorts for the site – the image and post are usually related somehow, so it makes sense to leverage the fact you’re setting a caption and displaying it somewhere.

Here’s a handy code snippet you can throw in either right after the headline or elsewhere in your post loop:

<?php $thumb_caption = get_post(get_post_thumbnail_id())->post_excerpt;
if( !empty($thumb_caption) ) { ?>
<div class="single-post-caption"><?php echo $thumb_caption ?></div>
<?php } ?>

Let’s walk through it:

  • Line 1: We’re setting up a variable ($thumb_caption) to set up the “excerpt” of the post thumbnail.  The excerpt is our caption.  Since all media is treated as a content type, we can extract this data for use elsewhere.
  • Line 2: If there’s NO caption, nothing happens.  If there IS a caption, then:
  • Line 3: We display a div container with the caption.
  • Line 4: This closes our conditional and resumes our normal loop

Displaying a Featured Image in an RSS Feed

One of the largest requests I get is asking how to utilize the featured image in an RSS feed.  By default, this doesn’t happen. But, if you’re using the featured image as a graphical element in the post, it only makes sense to pass it through to the RSS feed.

Simply drop this code into your RSS feed:

function featuredtoRSS($content) {
global $post;
if ( has_post_thumbnail( $post->ID ) ){
$content = '' . get_the_post_thumbnail( $post->ID, 'custom-size', array( 'style' => 'float:right; margin-left: 15px' ) ) . '' . $content;
}
return $content;
}
add_filter('the_excerpt_rss', 'featuredtoRSS');
add_filter('the_content_feed', 'featuredtoRSS');

You’ll notice that I had to add the styles in manually – the RSS feed doesn’t pull the stylesheet in, so we have to improvise and add in what styles we want it to container.  This function add the featured image to both the excerpt feed and the full content feed, and the bottom two lines can be removed or omitted depending on where you want your images to appear.

That’s a wrap for our in-depth look at featured images in WordPress.  If you’ve seen featured images uses in unique or amazing ways, let me know in the comments below!