How to use featured images

In this beginner-level tutorial, learn how to use featured images on block themes, how classic themes use featured images, and how to use featured images to control how social media displays your website’s images.

Learning outcomes

1. Set a featured image on a post or a page.
2. Briefly explain the differences in how block and classic themes use featured images.
3. Use featured images to control which images appear on social media.

Comprehension questions

1. When setting a featured image, why should you include alternative text?
2. If you want to make changes to the way a block theme displays a featured image, what are some of your options?
3. What code do you need to use in order to make changes to the way a classic theme displays a featured image?
4. For a post or page that uses a lot of images, such as an image gallery, how do you make sure social media picks the picture you’d like if people share your work/

Transcript

Welcome to Learn WordPress. There is one setting in each post or page that can do quite a bit for you both in WordPress itself, but also in social media shares. That setting is the WordPress Featured Image setting, which can be used in both posts and pages. In this tutorial, you’ll learn all about how to use WordPress featured images. Let’s learn.

Featured images are used both in classic themes, which primarily use the customizer and block themes, which use templates in the site editor. They can be especially fun to work with in a block theme, where you have lots of additional control over how and where your featured images appear. If you’re new to WordPress and experimenting with a block theme, you might notice that your theme’s homepage template might include a space on the homepage or blog page for an image related to a post or page. Or, if you click around to a post or page template, you may notice an empty image space. You might be wondering, “Wow do I select an image to fill that space? How does WordPress know which image to show on my homepage, anyway?” And as a bonus, imagine one of your readers wants to share a post or page of yours on social media, and a post or page that has lots of images–which image will show on social media websites such as Facebook, Twitter, LinkedIn, or another social media website? The answer to all of these questions is this: by using WordPress featured images. By the end of this lesson, you will be able to set a featured image on a post or a page, briefly explain how some themes use featured images, and control images that appear on social media using WordPress alone. Let’s get started.

To begin, let’s find our featured images setting. First, open up the post or page editor. You can do this through your WordPress dashboard. Or, when viewing your website on the front end, you can click on a post or page and select “edit post” or “edit page.”

Once you’re in the poster Page Editor, select the Settings icon in the top right hand corner. If it’s not open already, the setting may look like a gear if you’re using WordPress 6.1 or earlier, or like a page with the sidebar if you were using 6.2 or later.

Make sure that “Post” is selected in the settings (and not “block”) to ensure that you’re in the right place.

Next, scroll down to the section that says “Featured Image”.

Press the button that says “Set Featured Image”, where you can then select whatever image you would like to use for this post or page–or upload a new one.

If you haven’t already, make sure to describe the image in the “Alt Text” setting so that people who use screen readers and search engines can understand what your image is showing.

Next, click the “Set Featured Image” button.

Finally, click the “Update” button or “Publish” button if this is a new post or page. You can now see that this image is featured at the top of this individual post and it also appears on the homepage.

By default, most themes classic and block will use your featured images in a preset way. However, there are some differences between how classic and block themes use featured images that you should know about. Let’s start with using featured images and block themes.

When you’re using a block theme, you have a lot more control over how your featured images are used and where they show up. Using a block theme site editor, I can often add duotone overlays

I select the featured image block, select the duotone filter

and with a few clicks of a button, all of my featured images on the homepage have changed

I can make my featured images smaller or larger I

can choose how WordPress scales my images

or I can choose to only show a featured image on my homepage, but remove them entirely from the top of a post.

Let’s say I want to change the way my featured images appear on every post I write. I head to my site editor then select template “Single” because this template is the one that WordPress uses to know how I would like my blog post to display. Any changes I make to a post or page featured image will be applied across all future and current posts or pages whatever use these templates.

Watch as I add this red overlay and save

if I navigate back to the front end of my website

I can click on a post.

The featured image I previously selected now has a red overlay.

This is true for any post that uses this template

and will be true for any future posts I write.

To learn more about how to edit single post templates, visit this tutorial customizing your post content layout on learn.wordpress.org.

Next, let’s talk about featured images in classic themes.

This example uses the Twenty Nineteen theme which has been coded to show featured images and a predetermined height and width with a blue overlay. Now, classic themes do not feature the point and click ability to make large changes the same way that you saw in block themes. However, it is possible to make some changes to the way your classic theme displays a featured image. But you will have to know some code, usually CSS, to make a change to the way your classic theme displays featured images.

Finally, let’s talk about how featured images can help you control what gets shared on social media. In both classic and block themes, featured images allow you to pick which image will appear if someone shares a post or a page of yours on social media. If I don’t select a featured image, social media will select a random image from my gallery.

With a featured image selected, however, I know exactly which one will show if someone shares my content.

Do know that there are many plugins available to help you hone your website social media appearance as well.

Using a featured image is just the simplest way to do so without utilizing an outside plugin. Now you know the basics of using featured images. For more tutorials live online workshops and courses, please visit learn.wordpress.org