Featured images in Wordpress - Mini Project: Build & Apply

Featured images

📖 Scenario: You are creating a simple WordPress theme that shows posts with their featured images.Featured images help make posts visually appealing and easy to recognize.

🎯 Goal: Build a WordPress theme template that displays posts with their featured images above the post title.

📋 What You'll Learn

Create a WordPress loop to display posts

Check if a post has a featured image

Display the featured image using the_post_thumbnail() function

Display the post title below the featured image

💡 Why This Matters

🌍 Real World

Featured images are used in blogs and websites to make posts visually attractive and improve user engagement.

💼 Career

Knowing how to work with featured images is essential for WordPress theme development and customizing websites.

1

Set up the WordPress loop

Write the WordPress loop using if ( have_posts() ) and while ( have_posts() ) with the_post() inside to start displaying posts.

Wordpress

Hint

Use if ( have_posts() ) to check for posts and while ( have_posts() ) : the_post(); to loop through them.

2

Check for a featured image

Inside the loop, add a check using if ( has_post_thumbnail() ) to see if the current post has a featured image.

Wordpress

Hint

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

3

Display the featured image

Inside the if ( has_post_thumbnail() ) block, add the_post_thumbnail(); to display the featured image.

Wordpress

Hint

Use the_post_thumbnail(); to show the featured image.

4

Display the post title below the image

After the featured image block, add the_title(); to display the post title below the image inside the loop.

Wordpress

Hint

Use the_title(); to show the post title below the featured image.

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