Display Caption to Featured Image on Extra Theme Post Page

by | May 7, 2020 | Tutorials | 0 comments

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

Requirement 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 like Notepad for PC or TextEdit for Mac. I use Adobe Brackets. It’s free to download Brackets if you want to try using it.
  • 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

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

This is how it will look like.

Screenshot of post page with caption under the featured image

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

Pin It on Pinterest

Share This