Add Captions to Featured Images Without Plugins on WordPress

Issue

A friend of mine created his first blog with WordPress.org and wanted to have captions for the featured image block. He uses the default WordPress Twenty-Twenty-Five theme but he couldn’t find a way to turn it on; captions were only showing in gallery blocks and image blocks.

Here’s a simple step-by-step guide for anyone who wants to add image descriptions or captions to their WordPress featured images (without downloading yet another job-specific plugin).

Solution

1. Download the Code Snippets plugin (I highly recommend this plugin—I’m using the free version, but it is plenty powerful for all sorts of customizations. It can do the job of many plugins.)

2. Activate Code Snippets (Plugins > Activate), go to Snippets (left sidebar) > Add New > make sure you’re on the Functions (PHP) tab

3. Give it a memorable name (snippet title), e.g.: “Shortcode: Show Featured Image Caption [featured_image_caption]"

4. Add the following code:

    1function display_featured_image_caption() {
    2    if ( has_post_thumbnail() ) {
    3        $thumb_id = get_post_thumbnail_id();
    4        $caption = wp_get_attachment_caption( $thumb_id );
    5        if ( $caption ) {
    6            return '<div class="featured-image-caption">' . esc_html( $caption ) . '</div>';
    7        }
    8    }
    9    return '';
   10}
   11
   12function featured_image_caption_shortcode() {
   13    return display_featured_image_caption();
   14}
   15add_shortcode( 'featured_image_caption', 'featured_image_caption_shortcode' );

5. Select Location > “Only run on site frontend”

6. Add some notes for future reference in the Description field, e.g.:

   css selector: .featured-image-caption shortcode used to activate snippet: [featured_image_caption]

7. Click “Save and Activate”

   

8. Now go to Appearance > Editor > Single Post template

9. Find your “Featured Image” block, add a “Shortcode” block beneath it

10. In the Shortcode block field, type with the square brackets: [featured_image_caption]

    

11. Save template, clear cache, force refresh and visit a post. You should see the caption appear if that image used has the caption box filled in the Media Library view.

    

12. To edit the look (CSS) of the caption, use the CSS selector as mentioned above in step 6. Read about figure captions on Mozilla developer documentations. For example:

    1.featured-image-caption {
    2  font-size: 0.85rem;
    3  font-weight: 300;
    4  text-align: center;
    5  padding: 0.5rem 0;
    6  background-color: rgba(89, 89, 89, 0.5);
    7}

Conclusion

If you’re interested in reading about the differences between captions, alt text and descriptions within the WordPress Media Library window, I think this blog post describes it quite well. And here’s a good guide for how to write good image metadata by the Australian Government.

Hope this helps!