2014-01-08

Featured images in WordPress are a great way to use images in a slightly different way than just inserting them into your posts and pages. However, they can be quite tricky to get to grips with as they can work in different ways, depending on what theme you are using and how it is setup.

Some themes might display your chosen featured image as a header image for your post or page, while another theme might use it as a thumbnail that is displayed when viewing a list of posts on your website. There is no hard and fast rule as to how featured images are used, and it will depend on which theme you have activated for your WordPress site.

Today we are going to have a look at how featured images are used in WordPress, and how you can use them for maximum effect.  We will also look at some plugins which can give you more control over how they are used on your site.

Featured Images Explained

If you are unsure of the purpose of featured images in WordPress, then it’s worth pointing out that they were originally called post thumbnails. The image can be set at post level, and each individual post or page can have their own featured image.

Setting a featured image is easy enough, simply click on the ‘Set featured image’ link on the Featured Images meta box and either upload a new image or select one from the images that have already been uploaded into the media library.

You will notice that when choosing a featured image, there is no option for setting the size of the image, as is the case when inserting an image into a post. This is because the theme in use will determine how and where the image will be displayed, and at what size.

Once a featured image has been set for a post, it will be displayed alongside that post content. However, where and how it is displayed is dependent on how the WordPress theme you are using has been configured. As the default theme for WordPress changes each year, it’s not easy to give a definitive answer on where your featured image will end up, and how it will be used by default.

Twenty Fourteen and Featured Images

Currently the default theme for a new WordPress installation is the Twenty Fourteen theme. So let’s take a look at how this theme uses featured images. This theme is a bold departure from the previous WordPress default themes, thanks to its magazine style homepage layout. However, it uses featured images in a similar way to Twenty Thirteen and Twenty Twelve, the preceding default WordPress themes.

Once you’ve set a featured image for a post or page, it will be displayed above the post title when viewing the post in single post view.



The image isn’t used as part of the actual post content, but is instead inserted above the post title, where you would normally not be able to add any content. The featured image is also used in the same way when viewing the list of most recent posts on the site.

The downside with the use of featured images in this way is that should an image be below a certain size, it’s going to look a bit out of place sitting up there on its own.



Therefore, depending on your chosen theme, and how it uses featured images, it’s important to ensure that the images you want to use are of the right size to compliment the design.

Featured Images as Post Thumbnails

Another popular use of featured images, and perhaps how they were intended to be used, is as a post thumbnail.

This use of featured images is how they are deployed here at WP Squared. If you view the homepage, you will see each post has a small thumbnail image beside it. This is a featured image and is only displayed when viewing a list of posts, and not when viewing a single post in its entirety.

This is a great way to use this feature as it allows you to draw readers into the individual posts with a relevant image.

Featured Images into Posts

Another method of using these images that you might come across is when they are displayed in the post content itself. In this situation, they are often inserted at the start of the post, with the text wrapping around the image.

Depending on the theme, they may also be used as a post thumbnail, and perhaps even displayed above the post title too. If a theme is being used that inserts the image into the post content, then it’s a good idea not to insert your own images near the top of the post as this could cause problems with the layout.

How to Find Out the Size of Featured Images

If you are unsure how the theme in use will display a featured image and at what size, you can of course use trial and error to see how the image you select is used. Another way is to visit the Media Settings page (Settings > Media) if your user role gives you access.

A further option is to check the source code for the theme. If you are a contributor to a blog, rather than a site admin, then this might not be an option that is available to you, as you won’t be able to access the code for the theme. But if you can access the Appearance > Editor menu item on the WordPress dashboard then you can try this approach:

Click on Appearance > Editor on the left side menu

Select functions.php from the right side list of files

Search for set_post_thumbnail_size

The line will look something like this set_post_thumbnail_size( 604, 270, true ); and will let you know what width and height the image will be displayed at.

Problems with Featured Images

While featured images can be very useful, they can also pose some problems. When writing for an unfamiliar website, or using a new theme, it can be unclear what image dimension should be used for creating the featured image and where it will be displayed.

Another problem is that when changing themes, featured images that once worked perfectly as small 150×150 pixel post thumbnails don’t look so great when displayed above a post title. This can mean going back and changing the featured images for all the pre-existing posts and pages. Thankfully, there is a free plugin to help solve this problem: Regenerate Thumbnails.

Featured Image Plugins

If you want to customise the way your chosen theme uses featured images then some of these plugins might be of interest:

Regenerate Thumbnails – if you change theme or change thumbnail sizes, this free plugin can save you a lot of work

Simple Image Sizes – easily change the default size for featured images and then regenerate pre-existing images

Category Featured Image – allow the post category to determine the featured image

Auto Post Thumbnail – advanced featured image creation including grabbing stills from videos

Dynamic Featured Image – have multiple featured images per post

Drag and Drop Featured Image – make it even easier to setup a featured image by dragging it on to the meta box

Require Featured Image – posts cannot be published until a featured image is set

Post List Featured Image – displays the featured image for each post on the posts list admin page

Default Featured Image – create a default fallback image for use when one isn’t set at post level

Checklist for Using Featured Images Effectively

Find out where the theme will display the image: above the post content, in the post content, or as a thumbnail on the list of posts page.

Determine the optimum size of the featured image: can images of any dimension be used, or must they be a fixed size, or does the theme resize and scale images to suit the layout?

Does the theme auto-select an image if the user doesn’t: is the option there to not use a featured image, or will the theme use one of the post images as a fallback?

Conclusion

Hopefully this post has given you a better understanding of how featured images work in WordPress and also some tools for getting the most out of this feature.

By using featured images, you can make your posts more enticing to readers when viewing the homepage or category post lists on your site. Depending on your theme, they can also be used to display an image above the post title or even be inserted into your posts. By using a free plugin like Regenerate Thumbnails, you’ve also seen how you can change the default size relating to how featured images are displayed on your site, without having to them go back through existing posts and making the necessary changes.

How do you use featured images on your site?

Last Updated: Wednesday, January 8, 2014

Show more