How to Use Featured Image in WordPress: Simple Guide

In WordPress, you use set_post_thumbnail to add a featured image to a post and the_post_thumbnail to display it in your theme. First, enable support with add_theme_support('post-thumbnails') in your theme's functions.php, then assign and show the image in your templates.

Syntax

To use featured images in WordPress, you need to enable support and then use specific functions to set and display them.

• add_theme_support('post-thumbnails'); - Enables featured image support in your theme.
• set_post_thumbnail($post_id, $image_id); - Assigns a featured image to a post programmatically.
• the_post_thumbnail($size); - Displays the featured image in the post template.

php

<?php
// Enable featured image support in your theme
add_theme_support('post-thumbnails');

// Display featured image in a template
if (has_post_thumbnail()) {
    the_post_thumbnail('medium');
}
?>

Output

Displays the featured image of the current post in medium size if it exists.

Example

This example shows how to enable featured images in your theme and display them inside the post loop.

php

<?php
// functions.php
add_action('after_setup_theme', function() {
    add_theme_support('post-thumbnails');
});

// single.php or inside the loop
if (have_posts()) :
    while (have_posts()) : the_post();
        if (has_post_thumbnail()) {
            the_post_thumbnail('large');
        } else {
            echo '<p>No featured image set.</p>';
        }
        the_title('<h1>', '</h1>');
        the_content();
    endwhile;
endif;
?>

Output

<h1>Post Title</h1>
<img src="URL-of-large-featured-image" alt="Post Title" />
<p>Post content here...</p>

Common Pitfalls

Common mistakes when using featured images include:

• Not enabling post-thumbnails support in the theme, so images won't show.
• Calling the_post_thumbnail() outside the loop or without checking has_post_thumbnail().
• Using incorrect image size names that are not registered.
• Forgetting to set a featured image in the post editor.

php

<?php
// Wrong: No support enabled, image won't show
// single.php
if (has_post_thumbnail()) {
    the_post_thumbnail();
}

// Right: Enable support in functions.php
add_theme_support('post-thumbnails');

// Then in template
if (has_post_thumbnail()) {
    the_post_thumbnail('thumbnail');
}
?>

Output

Featured image displays correctly only if support is enabled and image is set.

Quick Reference

Summary tips for using featured images in WordPress:

• Always add add_theme_support('post-thumbnails') in your theme.
• Use has_post_thumbnail() to check if a post has a featured image.
• Use the_post_thumbnail() to display the image inside the loop.
• Choose image sizes like 'thumbnail', 'medium', 'large', or custom sizes.
• Set featured images in the WordPress editor under the post settings.

Key Takeaways

Enable featured image support in your theme with add_theme_support('post-thumbnails').

Use has_post_thumbnail() to check if a post has a featured image before displaying it.

Display the featured image inside the loop using the_post_thumbnail() with a size parameter.

Set featured images in the WordPress editor to ensure they appear on your posts.

Avoid calling the_post_thumbnail() outside the loop or without checking for an image.