How to Easily Customize the WordPress Image Caption

by Steven Snell

on 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+