Featured Image - Lesson Plan

[courtneyr-dev]

Topic Description

What is a featured image in WordPress? How is it the same as what displays on social shares vs what displays on your own site?
Set a featured image, view where it displays in a query loop. Demonstrate using a featured image block and featured image within a cover block. Demonstrate how to create a different social share image preview using an SEO plugin.

Related Resources

Links to related content on Learn, HelpHub, DevHub, GitHub Gutenberg Issues, DevNotes, etc.

• Post Featured Image block: Enable gradient overlay gutenberg#43838
• https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
• https://wordpress.org/documentation/article/post-featured-image-block/
• https://learn.wordpress.org/?s=query+loop#:~:text=Taking%20Advantage%20of%20Query%20Loops

Guidelines

Review the [team guidelines] (https://make.wordpress.org/training/handbook/guidelines/)

Development Checklist:

• Gather links to Support and Developer Docs
• Consider any MarComms (marketing communications) resources and link to those
• Review any related material on Learn
• Define several SEO keywords to use in the article and where they should be prominently used
• Description and Objectives finalized
• Create an outline of the example lesson walk-through
• Draft lesson plan
• Copy edit
• Style guide review
• Instructional Review
• Final review
• Publish
• Announce to the Training team
• Announce to lesson plan creator
• Announce to marketing
• Gather feedback from lesson plan users about the quality

Repo Structure and Lesson Plan Template

Please remove all blockquote comments such as this before publishing.

Description

A short paragraph explaining what is covered in the lesson plan. This should be text that can be copied and used in a meetup or workshop description.

Objectives

After completing this lesson, participants will be able to:

• Distinguish between a standard WordPress image and featured images
• Use Featured images in posts and pages
• Use Featured images and query loops together
• Style social media share images and content using featured images and/or excerpts
• Use plugins to control the appearance of featured images in social media posts

It’s required that you include a bulleted list of objective(s) for each lesson plan. Objectives should be worded as actions that the participant can do once they’ve finished. See Bloom's Taxonomy of Action Verbs (PDF) as a reference. Avoid using words like "know," "understand," "be introduced to," etc. There should be one assement item for each objective (see below).

Target Audience

Who is this lesson intended for? What interests/skills would they bring? Put an "x" in the brackets for all that apply.

• Users / Content Writers
• Designers
• Developers
• Speakers
• Organizers
• Kids

Experience Level

How much experience would a participant need to get the most from this lesson? Put an "x" in the brackets for all that apply.

• Beginner
• Intermediate
• Advanced

Type of Instruction

Which strategies will be used for this lesson plan? Put an "x" in the brackets for all that apply.

• Demonstration
• Discussion
• Exercises
• Feedback
• Lecture (Presentation)
• Slides
• Show & Tell
• Tutorial

Time Estimate (Duration)

How long will it take to present this lesson? Put an "x" in the brackets for the one that applies.

• 1 hour or less
• 2-4 hours (half-day)
• 5-8 hours (full-day)
• 2 days
• 3 days or more

Prerequisite Skills

Participants will get the most from this lesson if they have familiarity with:

• Skill 1
• Skill 2

For example:

• Experience with HTML and CSS
• Completed the Basic WordPress Concepts lesson

Readiness Questions

• Question 1
• Question 2

A list of questions for participants to see if they have the background and skills necessary to learn and understand the lesson.

For example:

• Do you want to makes changes to your theme yourself?
• Do you know how to write CSS?

Slides

Change the /repo-name/ in the link to match the URL name of this repo.

• Slides (files included in this repo)

Materials Needed

• Item 1
• Item 2

A list of files, resources, equipment, or other materials the presenter will need for the lesson.

For example:

• A local install of WordPress
• The files for the TwentySixteen theme

Notes for the Presenter

• Note 1
• Note 2

A list of any handy tips or other information for the presenter.

For example:

• Participants may need to download the TwentySixteen theme before beginning
• What to do if there’s no projector or internet available
• What to do if a participant doesn’t have the necessary set up
• How to handle different opinions about the topic

Lesson Outline

• First do this
• Then move on to this
• Finish with this

The plan for the lesson. Outline form works well.

For example:

• Talk about what a theme is
• Demonstrate how to install and activate a theme
• Practice exercises to have participants find and install a theme on their own site

Exercises

Exercise name

Short description of what the exercise does and what skills or knowledge it reinforces.

• Short point or step of the exercise
• And another one

These are short or specific activities that help participants practice certain components of the lesson. They should not be fully scripted exercises, but rather something that participants could do on their own. For example, you can create an exercise based on one step of the Example Lesson.

Assessment

There should be one assement item (or more) for each objective listed above. Each assessment item should support an objective; there should be none that don't.

Write out the question.

1. Option
2. Option
3. Option
4. Option

Answer: 3. Correct answer

A few questions to ask participants to evaluate their retention of the material presented. They should be a measure of whether the objectives were reached. Consider having a question for each objective.

Additional Resources

• Resource 1
• Resource 2

An optional section which can contain a list of resources that the presenter can use to get more information on the topic.

For example:

• Link to information on the Codex
• Theme Review Team's Handbook

Example Lesson

An example of how the lesson plan can be implemented. Written in script form as one possible way an presenter might use this lesson plan at an event, with screenshots and instructions if necessary.

Section Heading for Example Lesson

You will likely need to break the Example Lesson down into multiple sections.

Lesson Wrap Up

Follow with the Exercises and Assessment outlined above.

[courtneyr-dev]

WordPress/gutenberg#39658

[courtneyr-dev]

WordPress/gutenberg#41460

[courtneyr-dev]

WordPress/gutenberg#43838

[wparasae]

Some AI-generated content to spot-check by chatGPT (I believe this falls within their terms of use, so I'm running this as an experiment): Note to future self, this content may not be 100% accurate, but I wanted to have it available to myself as I worked on this lesson plan.

How Do I Use a Featured Image in WordPress?

To use featured images in WordPress:

Ensure that your theme supports featured images.
Go to Posts or Pages and edit or create a new post/page.
Look for the "Featured Image" section on the right side of the screen.
Click on the "Set Featured Image" link.
Upload an image or select an image from your Media Library.
Set the image as your featured image.
Publish or update the post/page.
Your theme will determine how featured images are displayed, but they're often shown as thumbnails on archives or as header images on single pages.

What's the difference between a regular image and a featured image in WordPress?

In WordPress, a regular image is an image that you upload and insert into a post or page like any other media. A featured image, also known as a post thumbnail, is a representative image for a post or page that is chosen and set by the author or editor.

The main difference between a regular image and a featured image is that a featured image is meant to be used as the representative image for a post or page, while a regular image is just one of the images within the post or page. Featured images are often displayed prominently in themes, such as in archive pages or as header images on single post pages, and can be used to enhance the visual representation of the post or page. Regular images are typically placed within the content of the post or page and can be styled differently than featured images.

How are WordPress featured images different when used in block themes rather than classic themes?

In classic WordPress themes, featured images are typically used as representative images for posts or pages, and the display of these images is determined by the theme's templates and styles. In block-based themes, also known as Gutenberg themes, featured images are treated as blocks and can be placed anywhere within the content of a post or page, rather than just in the header or other prominent location.

With block-based themes, you have more control over how featured images are displayed, as you can place them anywhere in the content, set their size, alignment, and other styling options, and even combine them with other blocks to create more complex layouts. Additionally, block-based themes can provide more options for manipulating featured images, such as adding hover effects, animations, and more.

Overall, the difference between classic themes and block-based themes in the use of featured images is one of greater flexibility and control in block-based themes, making it easier to use featured images in more creative and effective ways.

How does social media use a WordPress featured image?

When you share a WordPress post on social media, the featured image can be used as the preview image for the link, helping to attract attention and entice people to click and read the post.

The way that a featured image is used on social media depends on how the social media platform handles the sharing of links and the preview information that is displayed. For example, on Facebook and Twitter, the featured image can be automatically extracted and used as the preview image when a post is shared, while on other platforms, such as LinkedIn, you may need to manually set the preview image.

To ensure that the featured image is used correctly on social media, you may need to use a plugin or add specific meta tags to the head of your WordPress site. Some social media optimization plugins, such as Yoast SEO, can automatically handle this for you and provide options for customizing the preview information.

By using a featured image, you can help to make your WordPress posts stand out on social media and attract more attention, clicks, and engagement from your followers and potential readers.

What WordPress social media optimization plugins can be used to preview how a WordPress post or page will appear on social media? Super double-check these to make sure to follow brand guidelines.

There are several WordPress plugins that can help you optimize your posts and pages for social media sharing and preview how they will appear when shared on different platforms. Here are a few popular options:

Yoast SEO: A comprehensive SEO plugin that includes features for social media optimization, including a social media preview tool that shows you how your posts will appear on Facebook, Twitter, and other platforms.

Social Snap: A social media optimization plugin that provides advanced features for controlling the appearance of your posts and pages when shared on social media, including a real-time social media preview tool.

Tasty Pins: A plugin specifically for optimizing images for Pinterest, including the ability to set and preview custom images for Pinterest sharing.

Jetpack: A multipurpose plugin that includes features for social media sharing, including a preview tool for seeing how your posts will appear on social media.

[wparasae]

Updated Script Draft:

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!

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 home page or blog page for an image related to a post or a page. Or, if you click around to a post or page template, you may notice an empty image space on a post or a page itself. You might be wondering, how 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; in a post or page that has lots of images, which image will a social media website such as Facebook, Twitter, LinkedIn, or another social media website choose to display from this page? 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.

To start, let’s find our featured images setting. First, open up the post or page editor. You can do this through your WordPress dashboard, or you can click on a post or page in your website and select ‘edit post’ or ‘edit page’. Make sure not to confuse this with ‘edit site’, which will bring you to the wrong place.

Once you’re in the post or page editor, select the settings icon in the top right-hand corner if it’s not open already. This setting may look like a gear if you are using WordPress 6.1 or earlier, or like a page with a sidebar if you are using 6.2 or later.

Make sure that ‘post’ is selected in these settings, and not ‘block’ to ensure you’re in the right place. Next, scroll down to section that says, “featured image”. Press the square 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.

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 home page.

By default, most themes—classic and block—will use your featured image in a pre-set way.

Featured Images in Block Themes:
With new block themes, however, you have a lot more control over how your featured images are used, and where they show up. Using a block theme’s site editor, I can make my featured images smaller or larger; I can often add duotone overlays; or, I can choose to only show them on my home page, but remove them entirely from the top of a post. To learn more about how to edit single post templates, visit the tutorial “Customizing your post content layout” on learn.wordpress.org.

Featured Images in Classic Themes
If you’re using a classic theme, it is possible to make some changes to the way your theme displays a featured image, but you will have to know some code—usually CSS—to make a change. For example, let’s say I wanted to change this blue filter from blue to red. I would need to find the code in this WordPress theme, click on ‘additional css’, and write it there to change that color. You can also reach out to a WordPress expert in the WordPress.org help forums for support.

Finally, let’s talk featured Images for Social Media Sharing.

In both classic and block themes, featured images also allow you to pick which image will appear if someone shares a post or page of yours on social media. This gives you more control over your content in case someone chooses to share it. Do know that there are many plugins available to help you hone your website’s social media appearance as well; using a featured image is the simplest way to do so without utilizing an outside plugin.

[wparasae]

Due to a transition, I have removed myself from this issue to allow someone else to work on this. :) If I find time to work on this in the next two weeks, I will comment below and happily reassign myself to this issue.