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!
👉 Free course: Create a Stunning Website with WordPress and Divi
⚠️ 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.
👉 Pro tip: 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
Open your downloaded file and edit it in an editor, for example NotePad ++ for Windows or CotEditor for Mac.
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).
CSS:
.custom_caption {
padding: 0px 8px;
text-align: center;
font-style: italic;
line-height: 1.3em;
}
That’s all for now. Good luck!
Finally a solution that works. Thanks! Do you know how to display the caption for regular Divi image modules?
Not really, so I would recommend you to reduce the spacing under the Image Module and add a regular Text Module below the Image Module.
This caption will not be updated when editing the image caption, it would need to be manually updated if separate. Anyone know how to achieve this dynamically?
works perfect!
Does it still work in Jan, 2020 😛
Its not working for me, any suggestions ?
Hi UT BA,
I still works. I use the latest versions of WordPress and Divi on this website and you can see the image caption below the featured image in this post, right?
Sometimes, the ‘ character changes after copy & paste. Could that be the problem? Also please note that this only works for the featured image, not the Divi image module.
How about fetching featured image in image module dynamically, would it work there ?
Unfortunately not, this only works the traditional way. The Image Module is a tougher nut to crack, I’m afraid. Hopefully, ET will give it a well needed update soon.
Hey, I tried copypasting, and checked the characters, but its still not working :/
Do you know what the issue might be?
Thanks
Do you have a link to the post so I can have a look?
This solution works fine EXCEPT when the Theme Builder (with a Body Layout) is in used for a post. Looks like that doesn’t use single.php at all.
True Kim, thanks for underlining that. I will add a text in the article that clarifies that this is an old school Divi 3 hack. 🙂
Hi,
is it possible to show the caption under each image of the image gallery?
Unfortunately i found no way, to make this possible.
Thank you for support!
Hi Julian,
Yes, the Divi Gallery Module displays the text from the media fields “Title” and “Caption” by default. If not, make sure that the checkbox for “Show Title and Caption” is checked under Content > Elements in the Gallery Module settings. Read more at: https://www.elegantthemes.com/documentation/divi/gallery/
Hi, thank you for the photo description instructions. I use the Child template, but I made adjustments in the original. Is that correct, won’t it be overwritten during the next update?
Hi Miloš ! If you add the code snippet in /wp-content/themes/Divi/single.php it will be overwritten when you update Divi. Just add the code to your child theme instead and it will stick. Good luck!
Now it works for me even after the update. Thanks and have a nice weekend!
Nice work and the same to you!
Unfortunately the solution didn’t work for me.
I’m using “Extra” theme and the single.php looks completely different.
Hi Holger! This code is only working with the Divi theme and its’ default blog post layout. Maybe Elegant Themes support has a solution för Extra?
Did not work for me… : (
Not sure why. I checked my work three times and the code is correct, and it is in the child theme. I am using Divi. Do I need to delete the single.php from the parent theme for it to work?
Hi Stacie! Do you use the a Theme Builder template for your posts/featured image? If so, this snippet doesn’t work. It only works for the default Divi blog template. I have not figured out how to display the caption for featured images in the Theme Builder, since it uses a different logic.