How To Add and Style Post Thumbnails with Captions in WordPress

Published On :

Today, most of the Bloggers use WordPress as a platform for blogging. But there are so many functions in WordPress which are rarely utilized in a normal blog. One such function is Post Thumbnails with Captions. We are all aware about captions, but that is when we use them in normal post images. In this tutorial we will see how to use those captions with post thumbnails (or Featured Images). I guess most of the themes today offer support for WordPress Post Thumbnails.

Adding Post Thumbnails support to themes which DO NOT support it achieved by a small code. Add the below code in your theme’s functions.php file.

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 100, 100, true );

In the above code our Post Thumbnails size would be 100×100 pixels. You can adjust the size according to your blog’s needs and spacing. So if your theme doesn’t support Post Thumbnails, first add that. Only then you can go ahead and add captions to it.

Captions

Add Post Thumbnails with Captions inside Featured Image Editor

Now that we have added Post Thumbnails support to the theme, we can proceed with the captions tutorial. Normally we place the Post Thumbnails near the excerpts on the homepage of our blog. For that purpose we will be using the_post_thumbnail(); function. It’s function is to display Post Thumbnails with the size we specify. But to make it display captions we need to extend the code a bit using get_post function and assigning it with the image’s excerpt value.

If you are not aware of basic PHP or WordPress coding then you probably won’t understand fully, what I’ve said in the above paragraph. Don’t worry about it, just copy and paste the codes below and you will get Post Thumbnails with Captions on your blog.

Setting up Post Thumbnails with Captions

Firstly, open up your theme’s single.php file and place this PHP code in it.

<div class="excerpt_thumbnail"><?php the_post_thumbnail();
echo '<div class="thumbnail_caption">'.get_post(get_post_thumbnail_id())->post_excerpt.'</div>'; ?></div>

Ideally the above code is placed just before the_excerpt(); function. Notice that I’ve added the classes excerpt_thumbnail and thumbnail_caption to style and align the Post Thumbnails with Captions.

Styling the Captions

The default style of captions look apt within the posts, but when it comes to Post Thumbnails we need to do something innovative so that the whole thing looks good. Your blog visitors will like the design of it, only if you try out something different. Even I’m trying out some unique and innovative things in my new theme and Post Thumbnails with good looking Captions is one among them. Below is the screenshot of my theme in which I have added the captions and styled it.

Post Thumbnails with Captions

Post Thumbnails with Captions in my new Theme

In the above image, iPhone Sales is the Caption text. Make sure that you limit your captions text to around 12-15 characters. Else the text will not be displayed properly due to unavailability of space.

Yes, the style is simple and I can’t say whether the final theme will feature the same style. If I get innovative ideas during the up coming days the captions style may be changed. I’m just sharing the current captions style with you all. So once you are done with PHP code, open your theme’s stylesheet (commonly named as style.css) and place the below CSS code.

.excerpt_thumbnail {
float: left;
}

.excerpt_thumbnail img{
background: #fcfcfc;
padding: 0.4em;
margin: 0.5em 1em 0.5em 0em;
border: 1px solid #E0E0E0;
}

#content_area .excerpt_thumbnail div.thumbnail_caption {
position: relative;
background: rgba(51, 51, 51, 0.7);
color: white;
text-align: center;
text-transform: uppercase;
font-size: 0.8em;
width: 112px;
margin: -4em 0em 0em 0em;
}

Change the background colors or text colors according to your WordPress theme. I have styled it with a white background, hence I’ve used light black as the background color for the Captions area.

I hope this tutorial helped you. Subscribe to Our RSS Feeds / Daily Updates for more such WordPress tutorials. If you face any problem while applying the PHP or CSS code of the captions then post a detailed comment and I will try to solve your problem.

So, have you ever thought of using Captions along with Post Thumbnails ? Are you going to try after reading this tutorial ??

Share :
Tagged as : 23 Comments
About » Has written 231 Post(s) «

I'm a Web Designer/Developer, SEO'er and a Blogger who gives a few Blogging Tips in the form of posts/tutorials. Follow & Subscribe to my Blog if you feel it's worth it.

HostGator
Loader

23 Comments Comments RSS

  1. #

    Perfect! Thank you!

  2. #

    stylish thumbnails, Thanks for sharing

  3. #

    That is great I was wondering how that was done.

  4. #

    This is very cool. Very stylish. I like this idea of creating post thumbnails with caption. Thanks for sharing. :)

  5. #

    Nice tip. I would try it on my site too…

  6. #

    Nice tutorial, the CSS looks a little difficult, but I am sure it will work well in my WordPress theme if I follow closely. The caption looks great, and I am sure it will add more impact on the photo!

  7. #

    It’s really great idea :) stylish post thumbnails. Thank you so much for sharing your post on here :)

  8. #

    Hi Mani,

    Thanks to the wonderful tutorial with image thumbnail.

  9. #

    Really interesting tutorial. I will surely use this at some time to give a stylish look to my homepage.

  10. #

    i know i have to download wordpress but whats a good host to go with? and after i set up an account with a host, how difficult is the set up before I can begin building a site? and last but not least, can i still import the free wordpress templates?

  11. #

    Seems fairly do-able! I would probably struggle with the right color selections though as I am not very artistic.

    -Jean

  12. #

    nice stuff but yes the css seems to require a bit more then small knowledge and skills :)

  13. #

    I think you haven’t approved my comments in your Blog.. OK thanks for your co-operation.

  14. Thumbnails makes the homepage as very perfect sense for human-beings.

  15. #

    These are some good suggestions, Mani. They can surely come in handy.

  16. #

    i m also want to need a suggestions like this to add the thumbnails and there are many other also.

  17. #

    on my wordpress blog, i’ve been trying to put a caption on some images, but when i go to the “Edit Image Caption” form and hit update, nothing happens. when i go back and check, the caption i just typed in is not there. this has only been a problem for picture i imported from blogspot, perhaps that’s the reason?

  18. Hello Mani ,Thanks for these wonderful tips

  19. sunil
    #

    Hi ..I cant see any single.php in my thesis theme . can you tell me where do i post it now?

  20. #

    thanks. i got this tip on my blog.

  21. #

    I am using Alltuts wordpress theme for my website. When i set caption to any image it does not shown at all. even that image cannot locate at center with caption. Please help me, is there any need to do with my theme CSS?

    • #

      Are you talking about the captions for images inside the post itself?

  22. #

    Wow, Thanks bro for code. Caption option is great.

Post a Comment

Your email is never published nor shared. Required fields are marked *

Also, use your Real name in the 'Name' field. Comment names with only keywords will be trashed.