Featured images in Wordpress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to enable featured images in your WordPress theme.

Wordpress

add_theme_support([1]);

Drag options to blanks, or click blank then click option'

A'post-thumbnails'

B'custom-logo'

C'menus'

D'widgets'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'custom-logo' instead of 'post-thumbnails'.

Forgetting to add theme support for featured images.

Using add_theme_support('post-thumbnails') enables featured images in your theme.

2fill in blank

medium

Complete the code to display the featured image inside the post loop.

Wordpress

<?php if (has_post_thumbnail()) { the_[1](); } ?>

Drag options to blanks, or click blank then click option'

Athumbnail

BpostThumbnail

Cpost_thumbnail

Dfeatured_image

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'thumbnail' instead of 'post_thumbnail'.

Using camelCase instead of underscores.

The function the_post_thumbnail() displays the featured image.

3fill in blank

hard

Fix the error in the code to get the URL of the featured image.

Wordpress

$url = get_the_[1]_url();

Drag options to blanks, or click blank then click option'

Aimage

Bthumbnail

Cfeatured_image

Dpost_thumbnail

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'get_the_thumbnail_url()' which does not exist.

Using 'get_the_featured_image_url()' which is incorrect.

The correct function is get_the_post_thumbnail_url() to get the featured image URL.

4fill in blank

hard

Fill both blanks to set a custom size for the featured image.

Wordpress

the_post_thumbnail([1], [2]);

Drag options to blanks, or click blank then click option'

A'medium'

B'thumbnail'

Carray('width' => 150, 'height' => 150)

Darray('width' => 300, 'height' => 200)

Attempts:

3 left

💡 Hint

Common Mistakes

Using size names for both arguments.

Passing strings instead of arrays for dimensions.

Use 'thumbnail' as size name and an array for custom dimensions.

5fill in blank

hard

Fill all three blanks to add support for featured images and display one with a custom size.

Wordpress

<?php
add_theme_support([1]);
if (has_post_thumbnail()) {
  the_post_thumbnail([2], [3]);
}
?>

Drag options to blanks, or click blank then click option'

A'post-thumbnails'

B'medium'

Carray('width' => 400, 'height' => 300)

D'thumbnail'

Attempts:

3 left

💡 Hint

Common Mistakes

Not enabling theme support before displaying images.

Using wrong size names or dimension formats.

First enable 'post-thumbnails', then display with size 'thumbnail' and custom dimensions.

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