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.