How to add wordpress featured image captions for the divi theme builder.

After googling and talking to Divi support over the span of two weeks, I finally figured out how to display the featured image captions for WordPress.org blog posts — specifically if you’re using the Divi theme builder that lets you create templates with dynamic content and such.

What Didn’t Work

At first I tried the FMS Featured Image plugin, but wasn’t able to get this to work with my Divi theme despite the fact that they are working on getting their plugin to work with Divi. Their plugin seems fantastic, I just wasn’t able to get it to work with my theme setup. 

Then I tried this tutorial from Divi Mundo that suggests editing the single.php file; however, Divi Support kindly let me know that the single.php file was not in use for my website because I’m using the Divi theme builder templates that I made (pictured above). 

What Did Work

Divi support directed me to this WordPress Stack Exchange thread that ultimately formed the basis of my solution; however, I had to make some tweaks to their code. The code they provided generated the featured image, the caption, and linked the caption to the media file link. 

I didn’t want my captions to link to the media file page for the featured images, so I replaced the A tag <a></a> with the P tag <p></p> and removed the lines of code related to the file page link. I also didn’t want the captions to be formatted as the regular paragraph text from my theme, so I changed the font size and color directly in the PHP function.

Here is the code that I ended up with:

// FEATURED IMAGE + CAPTIONS & LINKS
// article used: https://wordpress.stackexchange.com/questions/213768/featured-image-shortcode

add_shortcode('thumbnail', 'thumbnail_with_caption_shortcode');

function thumbnail_with_caption_shortcode($atts) {
    global $post;

    // Image to display

    $thumbnail = get_the_post_thumbnail($post->ID);

    // ID of featured image

    $thumbnail_id = get_post_thumbnail_id();

    // Caption from featured image's WP_Post

    $caption = get_post($thumbnail_id)->post_excerpt;

    // Final output

    return '<div class="featured-image">'
    . '<p>'
    . $thumbnail
    . '<span class="caption" style="color: #565656; font-size: 12px;">' . $caption . '</span>'
    . '</p>'
    . '</div>';
}

// end featured image code

Troubleshooting Tips

1. This shortcode can be added to your Divi Theme Builder template so that you don’t have to manually add the shortcode to each blog post.
2. You have to write the caption in the image’s “Caption” meta data field for the caption to show up with this shortcode.