How to Easily Customize the WordPress Image Caption

A while ago WordPress added the ability to easily give captions to images within posts and pages. Most bloggers choose to style images in one way or another using CSS, and the caption provides an opportunity to for designers and bloggers to do some customization here.

When you’re inserting an image into a post or page you’ll see the options shown below, which include entering a caption. If you leave this field blank the caption coding will not be added, but if you fill it in the caption coding will be added.

Inserting an Image in WP

The default theme’s styling of the caption uses a light gray box around the image. If your theme is older, you may not have styles for the caption in your CSS file, but it can easily be added. If your theme does include the caption styling, it may not be quite what you want, and I’ll show you how it can easily be changed.

Here is a screen shot of the default styling.

Default Styling

If you open the style.css file from the default Kubrick theme, you’ll see the following code that styles the caption:


.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

There’s nothing wrong with the default styling, but it may not match your theme, or you may just want to change it up a little bit. Changing the caption styling is simple, but I don’t see many blogs that are doing it, and I have never attempted it until now.

For the purposes of this tutorial, I decided to experiment with the caption styling in attempt to match the recent re-design. The theme’s background uses splatter brushes from Bittbox, so I thought I would experiment with a similar effect on the caption.

To start with, I created an image in Photoshop that will match the background color of the site and will have some small splatters to replicate the look and feel of the site’s background.

Once the image is created in Photoshop, all that’s left is some simple changes to the CSS. The adjusted code is shown below.


.wp-caption {
border: 1px solid #B1A79B;
text-align: center;
padding-top: 10px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background-image: url(../../../images/captionbg.jpg);
background-repeat: no-repeat;
background-position: center bottom;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 1em;
line-height: 17px;
font-weight: bold;
padding: 8px;
margin: 0;
}

Here’s a look at an image with the styled caption (if you’re in a feed reader or email you won’t be able to see the change):

A Beautiful Horizon
A Beautiful Horizon

In this case, the change isn’t drastic, but you can do all different kinds of things if you want to (in terms of font styling, background colors and images, and borders). The changes I made to the style of the caption included adding the background image to .wp-caption, and a few changes to .wp-caption p.wp-caption-text, including the font size, weight and padding.

Honestly, I’m not sure if I’ll use the new caption on most posts or if I’ll continue to use a class on images to style them as I have been doing. Regardless, styling the caption is a legitimate option for WordPress users to add some character to their posts or to simply get the caption to match the theme more closely.

If you want to experiment with captions, check your theme’s style.css file to see if the caption styling is included. If not, start by taking the code from the Kubrick theme and customize it however you like.

For more WordPress-related content, see:

1 shares
Stephen Snell is the owner and editor of Vandelay Design, a popular design blog.
  1. January 30, 2009

    I don’t use them often, but yes, WP captions can be stylized for some dramatic changes on how you display your images. For instance, you can assign
    .wp-caption { position:relative; }
    .wp-caption-text{ position:absolute;}

    and then you can freely move the wp-caption-text with top and left.
    For instance, on your caption I added
    .wp-caption{
    padding-bottom:10px;
    padding-top:30px;
    position:relative;
    }
    .wp-caption p.wp-caption-text {
    position:absolute;
    top:0;
    padding:8px 5px;
    }
    to send the caption text on top of the image.

  2. January 30, 2009

    Elliot,
    I hadn’t really even thought of taking it that far, but that would present some interesting opportunities. Thanks for the comment.

  3. Pingback: Enlaces del 01-02-09 | evelio.info

  4. February 1, 2009

    Caption doesn’t look nice if you try to align the image to left or right.

    It is awesome if you have pic in center.

  5. Pingback: Geek Week - CSS, jQuery,Wordpress, PHP, XHTML, Web Design, web 2.0 | JasonCypret.com

  6. February 11, 2009

    Ah! Thanks so much. My new theme doesn’t do much at all for captions and the code you pointed out worked instantly. That saved about 4 hours worth of tinkering!

  7. February 19, 2009

    Thanks a bunch author, It works and looks great!

  8. February 22, 2009

    awesome css, thanks! Thanks for the code!

  9. Dermot
    February 25, 2009

    Hi

    I’m trying to add about 5 lines of captions below each image in my wordpress blog. Any ideas how I can do this:

    eg. Below each image, it would read:

    Artist name 2007
    Hand embroidery
    114 x 120 cm / 44? x 47¼ ins
    Signed
    Price

    Is this possible???

  10. February 25, 2009

    Dermot,
    I’m not sure if it’s possible with the WP caption, I don’t really use captions very often. What might be easier is to use CSS to style your own type of caption. Place the image and text inside a div and style the div with CSS like you would style the caption.

  11. Pingback: 11 Non-Traditional Uses of WordPress

  12. Pingback: Wordpress Tips | design-playground.net

  13. July 17, 2009

    Very good to know, but I’m having trouble with the sizing.

    Is there a way to make it 100% (ie: percentage based)

    WP auto sizes images when using the img tag button. But not when using the media library and caption box. (and after testing seems the culpit is the caption box that makes the size fixed).

    so image resizing WITH captions?

    any suggestions would be greatly appreciated.

  14. July 17, 2009

    Richard,
    I’m not really sure. I always size the images in Photoshop to get them the size I want prior to inserting them in the post, so I don’t do any re-sizing.

  15. mattie
    July 20, 2009

    Hello,
    do you have a solution for this problem?

    http://wordpress.org/support/topic/291499?replies=3 (image caption)

  16. September 11, 2009

    Hi! I am trying to stylise my captions under my gallery images, but with no luck. WordPress iserts div tags and I do not know where to change them – I do not have the script you have in my css —- my theme did not have it ??

  17. Pingback: Blog – Velagapati - 300+ Resources to Help You Become a WordPress Expert

  18. Pingback: 300+ Resources to Help You Become a WordPress Expert « eBSPAD

  19. March 17, 2010

    With WordPress 2.9.2, captions use CSS-3 with rounded corners for mozilla firefox, but dont work with IExplorer..

    I found a css (http://www.cssplay.co.uk/boxes/krazy.html) for rounded corners working both (firefox & iexplorer), but need to change css and html code too.
    I was investigating and i know captions is a plugin from tinyMCE.

    How can i change the html code for captions?

  20. April 12, 2010

    Thanks so much for this post – My theme was putting the captions in white, they didn’t show up at all on the border. Your information pointed this WP n00b in the right direction to get it fixed.

  21. April 25, 2010

    Many thanks, saved me a lot of time!

  22. Jeyanthan
    May 4, 2010

    Really nice tutorial..
    I think we can use that same rounded style for images with no captions too !

    I use captions all over my site ! it looks nice !

    -Jeyanthan

  23. August 8, 2010

    Thanks for this article !!

  24. October 15, 2010

    Thanks for this! And just FYI, the same holds true for those you using thesis theme. although i had to reference the class like this:

    .format_text img.frame, .format_text .wp-caption{
    background-color:#FFF;
    border-color:none;
    border-style:none;
    padding:0 0;
    }

    Best,
    J

  25. November 7, 2010

    Thanks for that. I’m using the Builder theme from iThemes and the text was left by default on the style sheet. Captions just look weird when stuck on the left of the image.

    Thanks for the one small change that makes all the difference.

    Strange that the text is always center on the page editor.

  26. November 18, 2010

    I’m trying to find a method to manipulate the HTML output of the caption portion, in order to nest the image/caption with my own custom CSS style classes.. however I have had no luck so far. Anybody?

  27. January 10, 2011

    Been searching for a way to solve this problem for quite some time, I’m glad I found your post.

    Loybuckz

  28. February 26, 2011

    I am from Turkey. I like your writing too. Thank you.

  29. April 1, 2011

    I’m using the 3 coloumn Neo Classical theme, its old but its a beaut. It being old, I think, is the reason I was having a problem with using the “caption” option when inserting images. I found that if I used the caption option, no matter what I did, the image would only align-left. But, if I didn’t use the caption option the image would align as I requested.

    Thanks for the post, it helped enourmously in sorting out this problem, which has been buggin me for weeks.

  30. May 18, 2011

    @Elliott, thanks for this. I was wondering how I could place the caption text on top of the image and your CSS led me in the right direction!

  31. June 5, 2011

    i cabt understand it clearly i want to add caption to my site because baats are to much on my site

  32. Ben
    June 24, 2011

    Doesn’t look like it works on a Mac, Safari or FF.

  33. June 29, 2011

    Excellent post. The text of my caption was blending in with the background and changing the background color did the trick. Now the attribution text for photos is readable. Many thanks.

  34. James Griggs
    June 29, 2011

    Thanks for this post. Really helped me solve an image caption problem today.

Leave a Reply

Your email address will not be published. Required fields are marked *

27 Resources to Find Web Design Jobs