How to Easily Customize the WordPress Image Caption

by Steven Snell

January 29, 2009 in Tutorials

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:

Powered by Shutterstock

About Steven Snell

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

  • Elliot

    Jan 30th

    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.

  • Steven Snell

    Jan 30th

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

  • Ajay Kumar Singh

    Feb 1st

    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.

  • Dionisio

    Feb 11th

    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!

  • Rohit

    Feb 19th

    Thanks a bunch author, It works and looks great!

  • burch

    Feb 22nd

    awesome css, thanks! Thanks for the code!

  • Dermot

    Feb 25th

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

  • Steven Snell

    Feb 25th

    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.

  • Richard Min

    Jul 17th

    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.

  • Steven Snell

    Jul 17th

    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

    Jul 20th

    Hello,
    do you have a solution for this problem?

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

  • elaine

    Sep 11th

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

  • cdiaz

    Mar 17th

    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?

  • Kelly

    Apr 12th

    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.

  • Martyn

    Apr 25th

    Many thanks, saved me a lot of time!

  • Jeyanthan

    May 4th

    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

    Aug 8th

    Thanks for this article !!

  • Internet Marketing Dude

    Oct 15th

    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

  • John

    Nov 7th

    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.

  • Jeff Kee

    Nov 18th

    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?

  • Loybuckz

    Jan 10th

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

    Loybuckz

  • kişisel gelişim

    Feb 26th

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

  • Tom

    Apr 1st

    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.

  • Gary

    May 18th

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

  • zeeshan

    Jun 5th

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

  • Ben

    Jun 24th

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

  • Axel Sage

    Jun 29th

    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

    Jun 29th

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

  • Leave a Comment

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