1

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.

screenshot

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?

1
  • 2
    You don't execute your function?
    – s_ha_dum
    Oct 27, 2015 at 16:59

1 Answer 1

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.

3
  • Yea I noticed the caption shortcode are there in the back-end however the styling does not exist. What classes do I have to include in style.css?
    – Sai
    Oct 28, 2015 at 9:25
  • I found the problem, it was a plugin causing the issue
    – Sai
    Oct 28, 2015 at 11:40
  • If the caption has the default css classes you can use them to style it. I updated my answer Oct 28, 2015 at 11:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.