Display Your Caption Below The Featured Image In Divi Posts

✏️ 2019-02-28 | Divi, Divi Nuggets | 14 comments

Add some code snippets and you will see the featured image captions.
Skribent: Victor Duse
By Victor Duse

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.

Before

Caption does not display 🙁

After #1

Default caption design

After #2

With custom CSS

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.

Set featured image in WordPress

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”

Choose 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.

 

Utvald bild som inte visar bildtexten

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/

Lägg in kod i single.php

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;
}

Centrerad och kursiv bildtext

That’s all for now. Good luck!

Related posts

14 Comments
  1. Finally a solution that works. Thanks! Do you know how to display the caption for regular Divi image modules?

    Reply
    • 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.

      Reply
      • 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?

        Reply
  2. works perfect!

    Reply
  3. Does it still work in Jan, 2020 😛
    Its not working for me, any suggestions ?

    Reply
    • 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.

      Reply
      • How about fetching featured image in image module dynamically, would it work there ?

        Reply
        • 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.

          Reply
  4. Hey, I tried copypasting, and checked the characters, but its still not working :/

    Do you know what the issue might be?

    Thanks

    Reply
    • Do you have a link to the post so I can have a look?

      Reply
  5. 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.

    Reply
    • 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. 🙂

      Reply
  6. 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!

    Reply
    • 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/

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.