Featured images in Wordpress - Step-by-Step Execution

Concept Flow - Featured images

Enable Featured Images Support

↓

Add Featured Image in Post Editor

↓

Save Post with Image

↓

Display Featured Image in Theme

↓

User Sees Image on Site

This flow shows how WordPress supports featured images: enabling support, adding image in editor, saving, and displaying on site.

Execution Sample

Wordpress

<?php
add_theme_support('post-thumbnails');
set_post_thumbnail_size(150, 150);
if (has_post_thumbnail()) {
  the_post_thumbnail();
}
?>

This code enables featured images, sets size, and displays the image if the post has one.

Execution Table

Step	Action	Condition	Result	Output
1	Call add_theme_support('post-thumbnails')	N/A	Featured images enabled	No visible output
2	Set thumbnail size to 150x150	N/A	Thumbnail size set	No visible output
3	Check if post has featured image	Post has image?	True or False	No output yet
4	If true, call the_post_thumbnail()	True	Image HTML generated	<img src='image-url' width='150' height='150' />
5	If false, skip image display	False	No image shown	No image output

💡 Stops after displaying image or skipping if none set

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
has_post_thumbnail()	N/A	True or False	N/A	N/A
the_post_thumbnail()	N/A	N/A	Image HTML generated or skipped	N/A

Key Moments - 3 Insights

Why do I need to call add_theme_support('post-thumbnails')?

Without this call (see Step 1 in execution_table), WordPress won't allow featured images in posts, so no image can be added or shown.

What happens if a post does not have a featured image?

At Step 3, has_post_thumbnail() returns false, so the_post_thumbnail() is not called and no image is shown (Step 5).

How does the_post_thumbnail() know what size to use?

Because set_post_thumbnail_size() sets the size before displaying (Step 2), the_post_thumbnail() outputs the image with those dimensions.

Visual Quiz - 3 Questions

Look at the execution_table, what happens at Step 3?

A Check if the post has a featured image

B Display the featured image

C Enable featured image support

D Set the thumbnail size

💡 Hint

See the 'Action' and 'Condition' columns at Step 3 in execution_table

At which step is the featured image actually shown on the page?

A Step 2

B Step 1

C Step 4

D Step 5

💡 Hint

Check the 'Output' column for image HTML in execution_table

If you remove add_theme_support('post-thumbnails'), what changes in the execution?

A Images show without size limits

B Featured images cannot be added or shown

C Thumbnail size changes automatically

D Nothing changes

💡 Hint

Refer to Step 1 in execution_table and key_moments about enabling support

Concept Snapshot

Featured Images in WordPress:
- Enable with add_theme_support('post-thumbnails')
- Set size with set_post_thumbnail_size(width, height)
- Use has_post_thumbnail() to check
- Display with the_post_thumbnail()
- Shows image if set, else no output

Full Transcript

Featured images in WordPress require enabling support in your theme using add_theme_support('post-thumbnails'). Then you can add images to posts in the editor. When displaying posts, check if a featured image exists with has_post_thumbnail(). If yes, use the_post_thumbnail() to show it, which outputs an image tag with the set size. If no image is set, nothing is shown. This process ensures posts can have a main image that appears on your site.