When you create a post in WordPress, you can upload a Featured Image that displays between the title and the body copy. In order for Divi to display your caption below this image, you need to add a line of code. We show you how and share a basic CSS caption style. Let’s go!
Update 2020-05-26: Please notice that this fix does not work if you use the Body Template feature for blog posts in the Divi Theme Builder. But it still works fine if you use the default blog post template.
Important! Make sure that you use a Divi child theme. Otherwise, your changes will be overwritten the next time you update Divi. Create your own child theme for free »
1. Add your Featured Image
Start by creating a post and scroll down to set your Featured Image. It doesn’t matter if you create the post with the Divi Builder or any other editor, as long as you use the Divi theme.
2. Add your image caption
Select an existing image or upload a new image to the WordPress Media Library. Enter your desired caption in the “Caption” field to the right of the images. Click on the button “Set featured image”
3. Download single.php
Unfortunately, this is not enough for the caption to display. But don’t worry, it only takes a few minutes to fix. Start by downloading the file single.php from the directory /wp-content/themes/Divi/ in your website directory. Use an ftp client like FileZilla or use the file manager in the control panel in your web hosting account.
3. Edit and upload single.php
Find this line of code:
print_thumbnail( $thumb, $thumbnail["use_timthumb"], $titletext, $width, $height );
… and add this line of code below:
echo '<p class="custom_caption">'.get_the_post_thumbnail_caption().'</p>';
Save and upload your updated file single.php to your child theme folder, for example /wp-content/themes/your-childtheme/
Single.php should look something like this when you are are finished.
Voilà! The caption now displays below your featured image
The update will take effect on all your posts that contains featured images with captions, regardless of if they were published before or after this update.
Bonus: Style your image caption with custom CSS
But the caption looks a bit dull, right? You can style the caption text by using the CSS class .custom_caption. Here is one simple styling that you can use by adding the code below to Divi > Theme Customizer > Additional CSS. It will center align the text, make it italic and fix the padding and line height (which is good if the image caption is long enough to cause a line break).
That’s all for now. Good luck!