Display the caption of a featured image in WordPress

Have you ever wanted to display the caption of a Featured Image in WordPress? I recently had need to do this and figured out a way to accomplish this.

When you set the Featured Image for a post in WordPress, you can add additional information for the image: Title, Caption, Alt Text and Description.

Set caption for featured image

It makes sense to me that you might want to display the caption for a Featured Image, if entered. My solution to this was to add a function to my functions file to use to display the caption. My function looks like this:

function my_display_featured_image( ) {
    global $post;

    $thumbnail_id = get_post_thumbnail_id($post->ID);
    $thumbnail_details = get_posts(array('p' => $thumbnail_id, 'post_type' => 'attachment'));
    $thumbnail_src = wp_get_attachment_image_src( $thumbnail_id, 'full' );
    $thumbnail_width = $thumbnail_src[1];

    if ($thumbnail_src && isset($thumbnail_src[0])) {
        echo '<div class="featured-image';
        if ( !empty( $thumbnail_details[0]->post_excerpt ) ) echo ' wp-caption';
        echo '" style="max-width: ' . $thumbnail_width . 'px;">';
        if ( !empty( $thumbnail_details[0]->post_excerpt ) ) {
          echo '<p class="featured-image-caption">';
          echo $thumbnail_details[0]->post_excerpt;
          echo '</p>';
      }
      the_post_thumbnail( $post->ID );
      echo '</div>';
    }
}

First, we get the information for the post we’re on. We do this by making the $post global. This will give us access to the id of the post we’re on. From there, we can call get_post_thumbnail_id to get the id of the Featured Image. Once we have the id of the Featured Image, or attachment, that we want, we can then use WordPress’s get_posts to grab the record of the Featured Image. The details of the Featured Image are stored in the variable $thumbnail_details using the call:

$thumbnail_details = get_posts(array('p' => $thumbnail_id, 'post_type' => 'attachment'));

get_posts accepts the arguments of WP_Query so, in our example, ‘p’ is the post id (the id of the Featured Image) which we were able to get using get_post_thumbnail_id. This query returns an object which includes the Featured Image’s caption in the ‘post_excerpt’ value and the description is available in the ‘post_content.’

if ( !empty( $thumbnail_details[0]->post_excerpt ) ) {
  echo '<p class="featured-image-caption">';

I am also grabbing the source of the attachment image and using the width of the image to set some inline CSS (in my particular case I wanted to float the image so I wanted to set the width). wp_get_attachment_image_src gets the url and image dimensions and returns the values in an array.

So, now I have the image’s URL, dimensions and caption. With this information, we can display the image. To check if there is a caption present, I just need to check the value of the post_excerpt returned by my get_posts call.

Finally, I use the_post_thumbnail to display the featured image. In my template file, if the post has a Featured Image, I call my function to display the Featured Image.

if ( has_post_thumbnail() ) : my_display_featured_image(); endif;

That is how I display a Featured Image’s caption.

Inspecting rollover elements in Chrome and Firefox

For some reason, this was never apparent to me but it is actually pretty straightforward. I used to use tricks to inspect rollover elements like changing the CSS display: none to display: block inline with Firebug. But there is actually a much easier way to test these elements.

In Chrome’s Web Inspector, simply use the Elements panel and click on the element, when hovered over, triggers a drop down menu. On the right-hand side of the Inspector, where the element’s CSS information is shown, there is an icon of a mouse pointer hovering over a dashed box. Click that, and you will be given options to change the state of the element. You can change the element’s state for active, hover, focus, and visited.

Changing the hover state in Chrome

In Firefox, using Firefox, doing this is just as easy. Inspect an element with Firebug and choose the item in the HTML panel. On the right-hand side, you will see the Style information for the selected element. The tab for the Style panel has a little down arrow to the right of the label. Click that and among the options are hover, active and focus. Click on hover and you can style the item that is hidden until triggered by a rollover.

Hover in Firebug

Again, this is probably something most people probably figured out long before I did but finding these features made my development much easier.

Responsive testing in Firefox

In my last post, I discussed testing a responsive design in Google’s Chrome using the Web Inspector. Well, Firefox also has a way to test responsive designs. Simply go to Tools > Web Developer > Responsive Design View:

Responsive design view in Firefox

Firefox then gives a simple interface, which I actually find cleaner than Chrome’s, to see sites in a variety of breakpoints selectable from a dropdown list of pre-defined resolutions. You can also add your own set of resolutions to the dropdown as well as “rotate” the device. Unlike Google Chrome, there is no easy way to set the User Agent to emulate iOS, Android, and other devices. There are extensions to do this, though.

Firefox responsive interface

Getting to the responsive tester in Firefox is easier than in Chrome. I also don’t like that, in Chrome, the Web Inspector needs to remain open to continue responsive testing. I have found that as soon as the Web Inspector is closed, the viewport reverts back to normal. To revert back to the normal view in Firefox, one must unclick “Responsive Design View.”