Mastering WordPress: A Step-by-Step Guide to Adding Featured Images and Post Thumbnails

Have you ever wondered why some WordPress blog posts grab your attention while others fade into the background? The answer often lies in the use of featured images. Posts that lack these striking thumbnails tend to be overlooked, regardless of the quality of the content.

At CanadaCreate, we prioritize using captivating featured images for our blog posts. This is not just for aesthetics; these images significantly enhance engagement and influence how readers interact with our content.

The great news is that adding featured images is quite straightforward. Simply upload an image, designate it as the post thumbnail, and watch as your content transforms into a more polished and professional presentation.

In this guide, we will provide you with a step-by-step process for adding featured images to your WordPress posts. Additionally, we will share valuable tips we’ve learned to optimize their effectiveness. 🎨

A Comprehensive Beginner’s Guide to Featured Images in WordPress

Featured images are a key feature of WordPress themes. Nearly all WordPress themes include built-in support for featured images, which are elegantly displayed in various sections of your WordPress website.

As humans, we are naturally drawn to visual elements over plain text. Featured images enhance the visual appeal of your blog pages, making them more attractive to visitors.

Featured images enhance user engagement by encouraging visitors to explore more pages on your site. Additionally, search engines and social media platforms may utilize these images, showcasing them in search results and news feeds.

While featured images are primarily associated with blog posts, you can also assign them to pages and custom post types.

In this guide, we will demonstrate how to easily add featured images in WordPress. Here’s a brief overview of the topics we’ll cover:

Let’s get started!

How to Add a Post Thumbnail or Featured Image in WordPress

To add a featured image to a WordPress post, simply edit an existing post or create a new one.

In the content editor, locate the featured image tab on the right side. Click on the ‘Set Featured Image’ section.

This action will open the WordPress media uploader popup.

Here, you can either upload an image from your computer or select an existing image from your media library.

If you are uploading a new image, remember to include the alt text and title for the image.

These two can be identical, as shown in the example below:

Once you have finished, click on the ‘Set Featured Image’ button.

WordPress will display a preview of the featured image in the right column, but the actual appearance may vary based on your WordPress theme.

You can now save or publish your post, or preview it to see how the featured image will look on your live website.

Depending on your theme developer’s settings, your featured image will automatically display with your posts.

Here’s how it appears on our ‘Blog’ page:

How to Find and Effectively Use Featured Images

A common question for beginners is where to source images for use as featured images.

Using images found through Google image search without permission is not allowed, as these images are protected by copyright laws. Unauthorized use can lead to legal issues.

Fortunately, there are many resources available where you can find free images for your blog posts.

Here are our top recommendations:

• Shutterstock – While they offer a limited selection of free images, their paid plans provide access to a vast library of high-quality photos, illustrations, videos, and more.
• Unsplash – A widely used platform that offers high-resolution images for your website and various projects.
• Negative Space – A well-curated collection of royalty-free images.
• New Old Stock – A unique collection of vintage photographs sourced from public archives.

Keep in mind that the display of featured images is determined by your WordPress theme. To customize how your theme presents featured images, you will need some basic CSS or WordPress coding knowledge.

If you are familiar with coding, continue reading for additional tips.

Comprehensive Guide for Theme Developers on Featured Images and Post Thumbnails in WordPress

Featured images are a widely used feature that is compatible with nearly all WordPress themes. However, there may be some rare cases where a theme does not support featured images or does not display them in a desirable manner.

In such instances, you can enable featured image support for your theme or modify how it is displayed.

If you are familiar with editing WordPress theme files and have basic knowledge of custom CSS, you can accomplish this yourself.

If your theme lacks support for featured images, you will not find the option to add a featured image in the content editor.

To enable featured image support in a WordPress theme, simply add the following line of code to your theme’s functions.php file:

add_theme_support( 'post-thumbnails' );

We advise against directly editing the functions.php file on your site if you are not a developer. A minor error can disrupt your website and lead to various issues.

Using WPCode, the top code snippet plugin for WordPress, simplifies the process of adding custom code. This plugin allows you to manage all your code snippets effortlessly, eliminating the risk of disrupting your website.

Many of our partner brands rely on WPCode to add and manage their custom code snippets. We have tested this tool thoroughly, and you can read our comprehensive review of WPCode for more insights.

To get started, you’ll need to install and activate the WPCode plugin. If you require assistance, please refer to our guide on installing a WordPress plugin.

After activation, navigate toCode Snippets » + Add Snippetin your WordPress dashboard. Here, select the ‘Add Your Custom Code (New Snippet)’ option.

Next, input your custom code in the ‘Code Preview’ section.

Be sure to click the ‘Code Type’ dropdown menu and choose ‘PHP Snippet’ as the code type.

Once you’ve completed this, scroll down to select the Insertion method for your code.

By default, WPCode will use the ‘Auto Insert’ option, which runs the code site-wide. However, you can customize the location to execute the code at specific points, such as the header, footer, or before a paragraph.

You can also use a shortcode method, which allows you to manually enter a shortcode to execute the code.

For this tutorial, it’s best to use the default method, which automatically inserts the code throughout your site.

After completing the setup, simply toggle the switch at the top to activate the snippet, then click the ‘Save Snippet’ button.

This code will enable support for featured images in your posts and pages. You can now access the post or page block editor, where the featured image option will be available.

However, setting a featured image won’t automatically display it in your WordPress theme. To show featured images in your theme, you’ll need to modify your templates and insert this line of code where you want the featured image to appear:

The files where you insert the above code will depend on your theme. Make sure to place the code within your post loop.

Adjust the dimensions of your featured images.

The code provided is essential for enabling featured image support and displaying featured images within your theme.

To define the dimensions for the featured images you upload, you should include this line of code in your functions.php file or in a WPCode snippet.

set_post_thumbnail_size( 50, 50);

The parameters for set_post_thumbnail_size are specified in this order: width, height.

You can also define additional image sizes for use with the_post_thumbnail() function. For example:

// Image size for individual posts
add_image_size( 'single-post-thumbnail', 590, 180 );

In this example, we have created a new image size called single-post-thumbnail with a width of 590px and a height of 180px.

To utilize this image size in our theme, we must also add it to the relevant theme file.

For more information, please refer to our guide on adding additional image sizes in WordPress.

If you have previously uploaded featured images that are still displaying in a different size, you will need to regenerate thumbnails and image sizes for older posts.

Here is an example demonstrating how to use the featured image function with a specified image size.

This is a simplified explanation of the full functionality. There are numerous additional features you can explore with featured images.

Common Questions About Featured Images in WordPress

As a newcomer, you may encounter various questions or challenges when utilizing featured images on your blog. Here are some of the most commonly asked questions regarding featured images.

1. Why does the featured image show up twice in my posts?

Often, beginners will set a featured image and then insert the same image within the content area of the post editor.

To resolve this, simply remove the image from the content area and use only the featured image meta box for adding the featured image. For more details, refer to our article on fixing the issue of the featured image appearing twice in WordPress.

2. What distinguishes a cover image from a featured image?

Cover images are utilized within the content area of your posts or pages, typically serving to separate different sections of a lengthy post or page.

The featured image serves as the main visual representation of an article. It is displayed before or alongside the content, but not within the body of the article itself.

To learn more about this subject, check out our guide explaining the differences between cover images and featured images in WordPress.

3. How can you show featured images alongside recent blog posts?

The WordPress block editor includes a ‘Latest Posts’ block that enables you to showcase recent posts along with their thumbnails.

You can also feature recent posts with thumbnails in sidebar widgets by using a plugin. For further information, refer to our article on displaying recent posts in WordPress.

4. How can you remind authors to include featured images in WordPress?

Featured images are prominently visible on your homepage, blog page, and various archive pages.

If you or another author forgets to set a featured image before publishing a post, it will appear without one, resulting in a disjointed look that negatively impacts user experience.

You can install and activate the PublishPress Checklist plugin, which will alert users attempting to publish a post without a featured image.

For additional information, see our article on how to make featured images mandatory in WordPress.

5. Why isn’t my featured image appearing on WordPress?

There are several reasons your featured image may not be visible on your WordPress site. For instance, you might be trying to upload an image that exceeds the size limit, or a plugin or theme could be preventing the image from displaying.

To fix this issue, refer to our guide on resolving the problem of featured images not showing in WordPress.

Additional Resources for Enhancing Featured Images

Explore our other guides and tutorials to maximize the use of featured images on your website:

• How to Bulk Edit Featured Images in WordPress
• How to Add Multiple Post Thumbnails or Featured Images in WordPress
• How to Set a Default Featured Image in WordPress (Simple Method)
• Cover Image vs. Featured Image in the WordPress Block Editor (Beginner’s Guide)
• How to Hide Featured Images on Specific Posts in WordPress

We trust that this article has provided you with valuable insights on adding featured images and post thumbnails in WordPress. Additionally, you might find our useful guide on implementing lazy loading for images to enhance your site’s speed, as well as our beginner’s guide to image SEO, beneficial.

If you enjoyed this article, consider subscribing to our YouTube Channel for informative WordPress video tutorials. You can also connect with us on Twitter and Facebook.