WordPress Post Thumbnails with Captions

This tip is for all themes that support WordPress’ Post Thumbnails (also known as Featured Images). If you’re using Thesis, this does not apply to you since Thesis uses its own Post Image solution.

In version 2.9 WordPress added  support for Post Thumbnails, which allowed you to upload an image using the standard uploader, and select it as the image that represents the post. This image could then be used throughout the site in thumbnails of different sizes, and displayed on the post itself.

Mark Jaquith provides an excellent summary of WordPress Post Thumbnails, so I’m not going to repeat it.

I’m building a client’s site with Genesis and using this feature. One issue that came up was Captions. The WordPress uploader let’s you specify a caption for an image, but when you use the_post_thumbnail() it just displays the image.

I couldn’t find any documentation on retrieving the image’s caption, so I asked Mark. I thought it would be useful to share it.

WordPress stores images as their own post, and it stores the caption as the post’s excerpt. To display the image and it’s caption, use this:

The first line creates a div called “featured image” so that we can style it later with CSS. The second line displays the post image. The third line uses get_post() to get the “featured image” post and pull out the excerpt, which is where the caption is stored. We then wrap it in a span with a class of “caption” for styling. Finally we close the original div.

To get the description instead of caption, use post_content instead of post_excerpt.

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk

Reader Interactions

Comments

  1. Dennis Osorio says

    Thank you for this. I was looking for this information everywhere. For some reason, it doesn’t seem to be in the codex.

  2. Vajaah says

    Thanks for posting! Using a custom theme, added has_post_thumbnail(), dropped the function in the functions file, called it from my template and it works like a charm!

  3. Josh says

    Brilliant, thanks! It took me ages to find this, but saved a lot of heartache.

    I’d just like to point out, if you’re using Frontend Uploader for WordPress, and need to set the description of an uploaded file, you can use this page :
    http://wordpress.org/support/topic/plugin-frontend-uploader-layout-and-collecting-data?replies=13
    and modify it to look like this:
    add_action( ‘fu_after_upload’, ‘my_fu_after_upload’ );

    function my_fu_after_upload( $attachment_ids ) {
    // do something with freshly uploaded files
    // This happens on POST request, so $_POST will also be available for you
    foreach( $attachment_ids as $att_id ) {
    // Format the title
    $author = $_POST[‘name’];
    $author .= ‘ ‘ . $_POST[’email’];
    // Change the description
    $caption = ‘Upload by ‘ . $_POST[‘name’];
    $caption .= ‘, ‘ . $_POST[’email’];
    $caption .= ‘ ‘ . $_POST[‘post_title’];
    // Sanitize input from user
    $author = sanitize_text_field( $author );
    wp_update_post( array( ‘ID’ => $att_id, ‘post_title’ => $author, ‘post_content’ => $caption ) );
    }
    }

  4. Gurdjieff says

    Inserting a caption worked, but not styling it with CSS. Then I realized the caption showed without entering the function, but it doesn’t have a CSS class and I cannot find a way to style it.

Leave A Reply