How to Add a Featured Image Caption in Wordpress

Question

I am hoping someone may be able to help me with a problem. I am building a news web site for a friend of mine. The site is starting to come together, but I cannot find out how to add captions to featured images. I have been looking all over the web today, there are loads of ways to do it by adding code to php sheets, but I am not sure what I am doing.

I have added so code to the functions.php code, but the everything goes pair shaped.

I am keeping my fingers crossed, someone will be able to help me by typing me through what to do.

Thank you in advance for your help.

Kind regards

John

Snaky

What do you mean by "featured images"? Do you mean you want certain images to have captions and others not? Explain in what context you want to display the images, the captions, etc. – Shaunteshave

A featured image has its own upload spot for each post and page, and its called "Featured Image". So I would assume that is what he is talking about. A quick Google search provided a simple solution, I'll post it below. – Burgos

This post has a simpler solution: #6197452 – Girovard

Answer 1

First, you'll need to drop the following code in your functions.php 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 '<span>'.$thumbnail_image[0]->post_excerpt.'</span>';
  }
}

Paste it right before the closing PHP tag in that file, if there isn't a closing PHP tag then make sure there's no empty lines below the code you paste as that can cause problems.

Then, where you'd like the caption to be displayed, you'll need to call it with this:

<?php the_post_thumbnail_caption(); ?>

If you're unsure where to put the call in your template files, you'll need to find where <?php the_post_thumbnail(); ?> is being called. Just look for that line in your template file, and place the function call near it, where ever you'd like the caption to be displayed at. The function wraps the caption in a span tag automatically so you can target it with CSS, but you can also wrap the function call in any tag you'd like to.

So for example, if your template file is calling the featured image with this or something very similiar:

<?php 
    if ( has_post_thumbnail() ) {
        the_post_thumbnail();
} ?>

You'd want to add the caption call to it like this:

<?php 
    if ( has_post_thumbnail() ) {
        the_post_thumbnail();
} ?>
<?php the_post_thumbnail_caption(); ?>

Let me know if you need any other clarification.

Burgos

Hi there Andy,Thank you for taking the time to help me. I am using a very good theme builder called Ultimatum, please see the following link. ultimatumtheme.com I have looked in all the folders this morning, but cannot find the php files you mention. So I have copied your post and credited you and posted it the the Ultimatum forum, hopefully someone will tell me which file I need to open up in notepad++ and add to. – Snaky

No problem, hopefully it helps. Once you get it figured out, please accept my answer on here if it was what you were looking for. I went to the link you provided and was gonna download a copy so I could find the correct files for you, but its a rather expensive tool. It would appear that its some kind of front end drag and drop builder? So it may have much more code and files that a typical WordPress theme. – Burgos

Answer 2

I know this is an old question, but I wanted to offer another solution that others might prefer, if you would rather deal with data that is already available (less database calls) while using fields already available in WordPress.

Since the output of get_the_post_thumbnail() returns the entire img tag as a string with the alt tag pre-populated from the caption field, you can simply extract the alt tag of the image tag by using xml parser or regex.

I did this:

    <?php 
    if ( $featured = get_the_post_thumbnail( get_the_ID() ) ):

        echo $featured; 
        preg_match('/alt="(.*)"/i', $featured, $caption);

        if ($caption) {
            echo wpautop(array_pop($caption));
        }
    endif;
    ?>

If you want it in a function like the originally accepted answer, you pass the img tag directly to your function:

    function get_the_post_thumbnail_caption($img_tag) {
        preg_match('/alt="(.*)"/i', $img_tag, $caption);
        return array_pop($caption);
    }

And in the template:

    $img = get_the_post_thumbnail( get_the_ID() ); // or any id
    echo wpautop( get_the_post_thumbnail_caption( $img ) );

Note that if you populate the 'alt text' field, it will overwrite the caption field data when outputting the img tag. You can override that behavior with filters if necessary.

Enamel

One more thing: you can expand the regex to include other tags by using the preg_match_all function and a pattern like '/(alt|title|src)="(.*)"/i' – Enamel