Featured Image Caption

How to fix captions NOT being displayed on WordPress blog post featured images

Displaying Featured Image Captions in WordPress

First of all… why in the WORLD would your blog posts NOT be displaying the caption you so CAREFULLY added to the image (when uploaded to the media library) you’ve set as the featured image of your blog post? The answer lies (mostly) within the specific coding of your WordPress theme. It most likely was … “overlooked”.

So let’s fix this because we WANT to give proper image credit AND link to the image licensing (i.e. creative commons). These are all good tips that will likely keep the COPYRIGHT police from knocking on your door.

STEP 1: CREATE A NEW FUNCTION TO DISPLAY THE CAPTION FOR THE FEATURED IMAGE

This will require a little bit of coding so… go into CPanel via your website host OR you can install the awesome Advanced Code Editor plugin which provides a nice editing interface right within the WordPress admin panel.

Next, you’ll need to insert the following code into your theme’s function.php file. I always recommend inserting custom code at the END of the file… that way you can keep track of the pieces you add overtime and they are nicely grouped at the end of the file.

function the_post_thumbnail_caption() {
global $post;

$thumbnail_id    = get_post_thumbnail_id($post->ID);
$thumbnail_image = get_posts(array('p' => $thumbnail_id, 'post_type' => 'attachment'));

if ($thumbnail_image && isset($thumbnail_image[0])) {
echo '<div class="front-caption">'.$thumbnail_image[0]->post_excerpt.'</div>';
}
}

STEP 2: DISPLAYING THE FEATURED IMAGE IN YOUR BLOG POST COMPLETE WITH CAPTION

The final step might be a little challenging because you first have to identify which file within your theme controls the display of a single blog post. In most WordPress themes, this is either the page.php file or sometimes the single.php. The fact is… it’s all reliant on how the theme developer wanted to name the file. They may or may NOT have followed standard naming conventions. For example, in my theme… the file is named single-post.php.

Once you have identified the page, you next need to identify the code within the page that renders the Title of the blog post and then the credits (i.e. Author’s name, Date posted, Number of comments, etc.). This is USUALLY at the top of the blog post and standard convention is to then put your Featured Image (complete with caption) just under that. You may have to test this by inserting the following code (that actually renders the Featured Image + Caption) into where you THINK it fits best, then SAVE, and test. Keep repeating this process (moving the code around) until you get it positioned JUST where it works best.

<?php
$get_description = get_post(get_post_thumbnail_id())->post_excerpt;
the_post_thumbnail();
  if(!empty($get_description)){//If description is not empty show the div
  echo '<div class="featured_caption">' . get_post(get_post_thumbnail_id())->post_excerpt . '</div>';
  }
?>

 

What the code above actually does is to first check and see if a Featured Images is actually assigned to the blog post. If one IS assigned, it next checks to see if there as an associated Caption stored in the database and assigned to the image. If that ALSO is true, it then renders the caption just under the featured image. Cool … huh!

I will typically go one step further and add a bit of CSS styling to the caption itself so that it’s a less obtrusive font size than the rest of my blog text. That styling looks like this:

div.featured_caption {
    font-size: 9px;
    text-align: center;
}

 

I HOPE THIS HELPS YOU AS MUCH AS IT HELPED ME! Many times, I scratch my head wondering why Theme authors leave out such an important piece such as this. However, the beauty of the WordPress framework is that with just a little coding… we can make it all SING AND DANCE however we like =0)

Add a Comment