How to Easily Customize the WordPress Image Caption
By Steven Snell | Published January 29th, 2009 in TutorialsA 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.
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.
If you open the style.css file from the default Kubrick theme, you’ll see the following code that styles the 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.
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
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:
- Top 10 Tutorials for Working with WordPress Comments
- Top 10 Premium Specialty Themes for WordPress
- Category Hacks for WordPress Theme Designers (Vandelay Design Blog)
- The Top 10 Tutorials for Developing WordPress Themes (Vandelay Design Blog)
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.
[...] How to Easily Customize the WordPress Image Caption [...]
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.
[...] How to Easily Customize the WordPress Image Caption [...]
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!
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.
[...] How to Easily Customize the WordPress Image Caption [...]
[...] How to Easily Customize the WordPress Image Caption January 29th, 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.
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.
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 ??
[...] How to Easily Customize the WordPress Image Caption – A tutorial for customizing the appearance of the built-in WP image caption text. [...]
[...] How to Easily Customize the WordPress Image Caption – A tutorial for customizing the appearance of the built-in WP image caption text. [...]
[...] How to Easily Customize the WordPress Image Caption – A tutorial for customizing the appearance of the built-in WP image caption text. [...]
[...] How to Easily Customize the WordPress Image Caption [...]
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!
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
Thanks for this article !!