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:

Steven Snell

Stephen Snell is the owner and editor of Vandelay Design. Connect with Stephen on google+

  • 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.

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

  • Pingback: Enlaces del 01-02-09 | evelio.info()

  • 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.

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

  • 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!

  • Thanks a bunch author, It works and looks great!

  • awesome css, thanks! Thanks for the code!

  • Dermot

    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???

  • 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.

  • Pingback: 11 Non-Traditional Uses of WordPress()

  • Pingback: Wordpress Tips | design-playground.net()

  • 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.

  • 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.

  • mattie

    Hello,
    do you have a solution for this problem?

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

  • 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 ??

  • Pingback: Blog – Velagapati - 300+ Resources to Help You Become a WordPress Expert()

  • Pingback: 300+ Resources to Help You Become a WordPress Expert « eBSPAD()

  • 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?

  • 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.

  • Many thanks, saved me a lot of time!

  • Jeyanthan

    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

  • LV

    Thanks for this article !!

  • 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

  • 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.

  • 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?

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

    Loybuckz

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

  • Tom

    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.

  • @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!

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

  • Ben

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

  • 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.

  • James Griggs

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