Display Caption to Featured Image on Extra Theme Post Page

Screenshot of post page with caption under the featured image
This is how it will look like

One of my clients needed a solution to automatically add the caption under the featured image on the blog post using Elegant Themes Extra theme. He was using a work around by manually adding the caption under the image in the WordPress editor. But sometimes he will forget to add it and needed to log back in and add the caption. So he asked if there is a way the caption is automatically added. For some websites this is not necessary, but for his content, he needed to add attribution to photo contributors.

This is based on a tutorial by Divimundo but modified for Extra Theme.

Before you begin

  • Create an Extra child theme – You will be editing one of the templates and uploading to your child theme’s folder. While technically you can edit the files in Extra, this is not ideal since if you update the parent theme, your edit will be gone and have to do it again.
  • File Transfer Protocol FTP like Filezilla. Typically hosting providers give their clients a way to access the files in File Manager in cPanel. There is a WordPress plugin called WP File Manager you can install so you can access your theme files.
  • Text editor – You can use Notepad or TextEdit on the Mac but I suggest to use a program like Visual Studio Code because it’s way easier to sort through the code and see missing curly brackets, quotes. I once spent hours trying to figure out why something was breaking only to realize I used a colon instead of a semicolon. ¯_(ツ)_/¯ Here’s an article testing different text editors for the Mac.
  • A wee bit of guts to edit code. I specialize in design and like most designers we don’t like seeing code. But for simple tasks like this one I’m brave enough to edit.

Steps for editing the template file

  1. Create a post and add featured image. Make sure you have text in the caption box.
  2. Go to your WordPress theme files. The path to your files will directory where your site is then go to wp-content > themes > Extra folder.
  3. Locate the file single-post.php. Yup! You will edit this file’s code.
  4. Download this file and open in your text editor.
  5. Locate Line 48- this will be a closing div tag
  6. In Line 49 add this code. You can just enter the php code but having a div tag around it you can assign a class so you can style it later. In my example I added the class “custom-caption.”
  7. Save it and upload in child theme folder. This file will override the file in your parent theme.
  8. Done! Take a look at post page and you should see the caption under the image.
<div class="custom_caption">
	<?php echo get_post(get_post_thumbnail_id())->post_excerpt; ?>
</div>

Code screenshot for adding caption

 

Steps for adding CSS to the caption

To comply with non-disclosure agreement, confidential information in some case studies were omitted or obfuscated.

  1. On your WordPress admin, go to Extra > Theme Options.
  2. Enter the CSS to style the caption for the class name you entered in the single-post.php file. Remember to add comment in there to remind yourself what these CSS lines are for.
/*caption style under featured image*/
.custom_caption {
   padding: 0px 15%;
   margin-top: -2%;
   text-align: center;
   font-style: italic;
   line-height: 1.3em;
}

I found a lot of options for Divi but not for Extra theme so I wanted to share. Hope this helped you!

Scroll to Top