By now any WordPress user is familiar with the featured image. Simply, because it’s the picture that usually appears at the top of a post and also inside archives and search results. Knowing how to use it correctly is an important skill for any website owner. For that reason, below, we’ll talk about this feature in detail.
Whereby, you’ll learn more about what a featured image is, and why it matters. As well as, how to use it correctly, customize it and troubleshoot issues. You might be thinking why is the featured image and post thumbnail used interchangeably? Well, when this feature was first introduced in WordPress 2.9, it was called post thumbnails.
However, in the next version, it was renamed to the featured image. You can learn more details about that in this article. Though you may not think about it all that much, the WordPress featured image is a central part of any blog. It’s the figurehead of both individual blog posts as well as the overall site design. Therefore, it should not be taken lightly.
What Is A Featured Image?
A featured image (also known as a post thumbnail) is a WordPress feature that allows theme developers to add support for using a representative image for posts, pages, or custom post types. And even though the featured image is the official term of this WordPress feature, some functions and template tags still use the term post thumbnail.
After all, even the WordPress Codex page about featured images is still titled Post Thumbnails. And as such, theme editors can easily add featured image support to their themes. By adding a simple snippet into their theme’s functions.php file. They can also configure how to handle image uploads by WordPress.
Related Topic: A/B Testing | 10 Ways To Improve On Site Ads Conversion
In addition, theme editors can choose thumbnail sizes, style them, and selectively turn the display of featured images ON and OFF. For example, many WordPress photography themes use featured images in their layout. Another usage example of this feature is WordPress-powered news and entertainment websites.
Such sites use thumbnail images with each article on their front page. Where and how the image displays will differ from website to website. Part of the motivation behind changing the name from “post thumbnail” to “featured image” was the fact that “post thumbnail” didn’t fully describe the customizability of this representational image.
On a clear note, users can upload these images directly by clicking on the “set featured image” link in the Post Edit screen. Theme authors can also set a default image to be displayed when no image is found. However, if you cannot find the “set featured image” link make sure that it is enabled under screen options in the top right of the admin panel.
You can read more about how to:
- add a featured image column to your WordPress admin panel,
- or how to add post thumbnails in WordPress,
- how to regenerate thumbnails or new image sizes in WordPress,
- or even add a post thumbnail to your WordPress RSS Feeds,
- how to set a default featured image in WordPress using a plugin,
- and other thumbnail sizes and features updated.
As a thumb rule, using images in your WordPress pages and posting content is highly encouraged. Since it has been shown to increase things like page views and time on site.
How To Use Featured Images And Optimize Them Correctly
As you already know, you can add images to the body of an article via Add Media or the Image block. The options for the WordPress-featured image, however, are located in the sidebar. When you click on the respective button, you are able to upload an image directly.
You can even pick one from the media library, add a title, description, and ALT text and then select the preferred post-featured visual. And when you do so, the picture will usually appear at the top of the post.
Related Topic: How Google Discover Works | A Step-By-Step User Guide
The exact position (above or below the title, for example) depends on your theme. Some even place it in the header section. Besides that, however, it will also appear wherever else the post appears on your site. This can be a blog page, author archive, list of related posts — you name it.
And as a consequence, the WordPress featured image makes a huge difference in how large parts of your site look. Plus, they set the tone for what visitors will think of your posts. Therefore, featured images are a crucial part of your content strategy. Since featured images play such an important role, it’s a good idea to be mindful of their usage.
1. Use a Consistent Style
As mentioned, the WordPress-featured image appears in many places on your site. For that reason, it’s not just important for the style of a single post but your web presence as a whole. Therefore, you should consider that what you use enhances the overall impression and branding.
One of my favorite examples in this area is NerdFitness. The site uses a lot of images containing Lego figurines. Still, another showcase is Art of Manliness which ornament their posts with old-timey imagery. Each approach fits their content, and audience and gives the sites a consistent look.
To achieve similar results, ask yourself what type of images would fit your branding, tone, and overall design. Then, make sure that you use the same style in all of your published posts.
2. Source and Attribute Correctly
Besides using images to create consistent blog design, a big question is also where to get them from. One way is to create the images yourself through Canva.
Not to mention, there are some bloggers out there who are good at doodling (using platforms like Doodly) or illustrating and are able to create their own visuals. Others have photographers or graphic designers on their staff team who take care of this sort of thing.
However, your average blogger often has neither the time nor resources for this sort of thing. For that reason, most will opt for using stock imagery (from platforms like Pixabay), most notably those licensed as Creative Commons.
3. Optimize your Images before Publishing
Just like any other image on your site, featured images contribute to page loading time. This is especially true in this case because visitors don’t have to click on a post title to see them. They are right there in the feed.
In addition, images have SEO value both through their presence (Google considers their presence on site a sign of quality) as well as the information they contain about the topic of sites and pages. Therefore, it’s important that you optimize your featured images like any other visuals on your site.
- Make images as small as possible — Compress them via an online service or plugin to make them smaller. Use only as large an image as needed in a particular place.
- Include keywords — To help search engines understand what an image is about and get an SEO boost, be sure to include your main key phrase in the file name and ALT tag.
Because it is such a central part of your content, WordPress offers many ways to customize the featured image.
4. Change its Position in Page Templates
If you are looking for where the featured image is included in your page templates, you can identify it from this code snippet:
- the_post_thumbnail();
Post thumbnail is the old term for the featured image, that’s why it’s called that way. The entry in the WordPress Codex also still refers to it by that name. The call for the WordPress featured image is most often wrapped into a conditional statement that checks whether it exists and, if so, displays it.
- if ( has_post_thumbnail() ) {the_post_thumbnail();}
So, if you want to change the position of your featured image, you can do so by moving this or a similar code snippet to the respective position.
When you make changes like that, be sure to do it in a child theme, otherwise, you will lose them to a theme update. In some themes, like the Genesis framework, you can also move position via theme hooks inside functions.php.
5. Create Custom Sizes or Modify Styling
Speaking of the functions file, it offers many ways to customize the WordPress featured image. Most notably, it allows you to set and insert custom sizes for them.
You are probably aware that WordPress creates several sizes of every image you upload to your site. This is to make sure you don’t have to input a 2,000px image in a place that is only 300px wide. Doing so would be a waste of bandwidth.
You can do the same with the featured image. If you know that there is a maximum width of 800px on the page, you can tell WordPress to create a post thumbnail of that size in functions.php.
- add_image_size( ‘my-custom-featured-image’, 800, 9999 );
You can see more information on how to add image size for this function. However, when you set it up like that, you also need to make sure that the theme will use the correct size in your page templates.
- the_post_thumbnail( ‘my-custom-featured-image’ );
This way, you can also set several different sizes of the same featured image in different places and only use as large a visual as necessary. Please note, that quality themes should already take care of this. However, if you change the layout of your design, the above might come in handy.
Related Topic: The plugin to use and regenerate thumbnails in WordPress
In addition, if you change things related to image size, you might have to regenerate the thumbnails of existing pictures on your site.
By the same token, you can also modify your featured image styling. And in case you want to change the way your featured image looks on the page, you can do so easily via CSS. WordPress automatically attaches CSS classes to them depending on their default size.
- <img src=… class=”attachment-post-thumbnail wp-post-image” …>
- <img src=… class=”attachment-thumbnail wp-post-image” …>
- <img src=… class=”attachment-medium wp-post-image” …>
- <img src=… class=”attachment-large wp-post-image” …>
- <img src=… class=”attachment-full wp-post-image” …>
Therefore, you can easily customize them with the following CSS selectors.
- img.attachment-post-thumbnail
- img.attachment-thumbnail
- img.attachment-medium
- img.attachment-large
- img.attachment-full
This also applies to any custom image sizes that you might have added. So, if you set a new image size with the code below.
- add_image_size( ‘my-custom-featured-image’, 800, 9999 );
You are able to change its styling with this CSS:
- img.attachment-my-custom-featured-image
What About Featured Image, Not Showing?
As the final part of this post on the WordPress featured image, we want to go over a bit of troubleshooting.
A common problem that users run into is that the featured image is not showing up on their page (seriously, it’s like the second-most googled term). If that is the case for you, below is a checklist of what you can look for to solve this problem.
What you should consider;
- Have you set one? — The easiest reason for a featured image not showing is that you forgot to set one. So, the first step is to go to the editor. And then look at its sidebar to see if you included a post thumbnail. If you are working with the classic editor, you might have to use the screen options. It’s found on the upper right corner of the screen to enable the option.
- Check the theme support — In order to use featured images, they must be enabled in the theme. You can do that with add_theme_support( ‘post-thumbnails’); inside functions.php. You can also use this code to add support after the fact.
- Examine file permissions — For any problem that involves images not showing in WordPress. A common issue is incorrect file permission settings. Check this post to find out what the permission levels should be and how to change them.
- Disable lazy loading — Lazy loading is a technique to keep images from loading before they become visible on screen to save bandwidth. It can sometimes cause this problem, especially when using Jetpack. Disable yours and see if that brings back your featured images.
Should none of the above work for you, it’s always a good idea to disable all your WordPress plugins. Especially, to see if one of them is causing the issue.
Takeaway,
From the illustration guide above, we’ve learned what the WordPress featured image is, why it matters, and how to use it correctly. We have also gone over how to customize featured images and troubleshoot common issues. By now, you should feel well-informed about this part of your WordPress site. At times also, your theme might have special settings for images.
So, be sure to explore all of its options. If that doesn’t help, changing themes can help pinpoint the reason. And in that case, it’s best to do all of the above in a local environment. There you’re. That’s all for now. In addition to that, you can read and learn more about How to Modify Featured Images in WordPress in this article.
But, if they’re still unanswered questions that demand our attention, please feel free to ask them in the comments section below. You can also Contact Us for more personalized help. And also, don’t forget to Donate in order to support our blog articles, online research work, and other projects as well as to motivate our team.
