Add caption functionality to custom WordPress theme

Question

Hi I am working from a custom theme created by my predecessor and I am trying to add caption functionality to the theme but I am have some trouble with it. Presently if I insert a image into a post and wish to add a caption, the caption would just appear next to the picture without any tags or classes containing it, here is a pic.

I tried following another post and adding this piece of code to the function.php and to my single.php but nothing changed.

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

<?php the_post_thumbnail(); ?>

What do I have to include to implement captions properly under my images?

Answer 1

When you add an image with caption to the WP text editor, it should add a caption shortcode. Is that the case here?

From there the output html should have some default classes like wp-caption. You can then style your caption by applying some CSS to these classes:

/* The wrapper <div> for the caption and captioned element. */
.wp-caption { }

/* The caption text. */
.wp-caption-text { }

/* An image within the caption (you might want to style other elements too). */
.wp-caption img { }

See here: http://justintadlock.com/archives/2011/07/01/captions-in-wordpress

Alternatively you can customize the html output using the caption shortcode hook.