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.

Practice

1. What is the main purpose of a featured image in WordPress?

easy

A. To change the font style of the post

B. To add background music to posts

C. To add a video to the sidebar

D. To add a main picture to posts or pages

Solution

1. Step 1: Understand the role of featured images

   Featured images are used to add a main picture that represents a post or page visually.

2. Step 2: Compare options with this purpose

   Only To add a main picture to posts or pages describes adding a main picture; others describe unrelated features.

3. Final Answer:

   To add a main picture to posts or pages -> Option D

4. Quick Check:

   Featured image = main picture [OK]

Hint: Featured images show main pictures for posts/pages [OK]

Common Mistakes:

• Confusing featured images with videos or audio
• Thinking featured images change fonts
• Assuming featured images affect sidebars

2. Which WordPress function correctly checks if a post has a featured image?

easy

A. has_post_thumbnail()

B. the_post_thumbnail()

C. get_featured_image()

D. check_thumbnail()

Solution

1. Step 1: Identify the function to check featured image existence

   WordPress uses has_post_thumbnail() to check if a post has a featured image.

2. Step 2: Differentiate from display functions

   the_post_thumbnail() displays the image, not checks it. Other options are not valid WordPress functions.

3. Final Answer:

   has_post_thumbnail() -> Option A

4. Quick Check:

   Check featured image = has_post_thumbnail() [OK]

Hint: Use has_post_thumbnail() to check existence [OK]

Common Mistakes:

• Using the_post_thumbnail() to check instead of display
• Assuming get_featured_image() exists
• Confusing function names

3. What will the following code output if the current post has a featured image?

if (has_post_thumbnail()) {
  the_post_thumbnail('medium');
} else {
  echo 'No image';
}

medium

A. Shows a syntax error

B. Displays 'No image' text

C. Displays the featured image in medium size

D. Displays the featured image in full size

Solution

1. Step 1: Understand the condition

   The code checks if the post has a featured image using has_post_thumbnail().

2. Step 2: Analyze the output when true

   If true, it calls the_post_thumbnail('medium'), which displays the image in medium size.

3. Final Answer:

   Displays the featured image in medium size -> Option C

4. Quick Check:

   has_post_thumbnail() true = show medium image [OK]

Hint: If has_post_thumbnail() true, the_post_thumbnail() shows image [OK]

Common Mistakes:

• Thinking it shows full size by default
• Assuming it prints 'No image' when image exists
• Confusing function usage causing syntax errors

4. Identify the error in this code snippet that tries to display a featured image:

if (has_post_thumbnail) {
  the_post_thumbnail();
}

medium

A. Missing semicolon after the_post_thumbnail()

B. Missing parentheses after has_post_thumbnail

C. No error, code is correct

D. the_post_thumbnail() should have an argument

Solution

1. Step 1: Check function usage

   has_post_thumbnail is a function and must be called with parentheses ().

2. Step 2: Verify other parts

   the_post_thumbnail() can be called without arguments; the semicolon is present after it.

3. Final Answer:

   Missing parentheses after has_post_thumbnail -> Option B

4. Quick Check:

   Function calls need () [OK]

Hint: Always add () when calling functions [OK]

Common Mistakes:

• Forgetting parentheses on function calls
• Thinking arguments are always required
• Assuming semicolons are mandatory in PHP

5. You want to show a featured image only if it exists, otherwise show a default image located at /images/default.jpg. Which code snippet correctly does this?

hard

A. if (has_post_thumbnail()) {
the_post_thumbnail();
} else {
echo '';
}

B. the_post_thumbnail() ?: '';

C. if (the_post_thumbnail()) {
the_post_thumbnail();
} else {
echo '';
}

D. has_post_thumbnail() ? the_post_thumbnail('/images/default.jpg') : '';

Solution

1. Step 1: Check condition for featured image existence

   Use has_post_thumbnail() to check if the post has a featured image.

2. Step 2: Display featured image or default image

   If true, display with the_post_thumbnail(). Otherwise, echo an <img> tag with the default image path.

3. Final Answer:

   if (has_post_thumbnail()) { the_post_thumbnail(); } else { echo '<img src="/images/default.jpg" alt="Default">'; } -> Option A

4. Quick Check:

   Check existence, show image or default [OK]

Hint: Use has_post_thumbnail() with if-else for fallback image [OK]

Common Mistakes:

• Using the_post_thumbnail() in condition instead of has_post_thumbnail()
• Passing image path as argument to the_post_thumbnail() incorrectly
• Not providing an else fallback for missing images