Codeable info

Customize WordPress Image Captions

Posted on by in WordPress Tutorials

WordPress image captions are quite plain by default. They consist of a single text font, size and white background that often doesn’t match the active WordPress theme at all.

Because the captions are somewhat ugly, a lot of blogs use an external plugin to handle caption text or just don’t use captions at all.

It’s quite unfortunate that a lot of writers and editors choose not to use captions, because they can tell the reader a lot about the image they are viewing. Captions can even be a great way to interact with readers, and make them laugh- like this.

By default WordPress gives the image caption two CSS commands; “.wp-caption” and “.wp-caption-text”. These commands can be found in the “Style.css” source file in the active theme WordPress directory. In the default Twenty Ten theme the two commands are located at the very bottom of the .css file, and is likely the same with other themes.

To stylize WordPress captions users simply need to enter in the proper CSS to associate with these commands. That means text font, text color, background colors and a background image can all be incorporated.

A basic CSS template for the two commands can be adopted like so (simply replace the existing wp-caption commands in the Style.css source file):

.wp-caption{
   position:relative;
}
 
.wp-caption img,
.wp-caption-text{
   position:absolute;
}

After implementing the above template we can begin styling the default image captions.

Some users may wish to have the caption appear above the photo instead of below, this can be done by implementing the following code (after the template above has already been injected).

.wp-caption img{
   top:20px;
}
 
.wp-caption-text {
   top:0;
}

Basically this code informs WordPress the caption text should be positioned on top of the image, with a 20 pixel margin between the image and text. Of course the above code can be tweaked to match a layout better and users can also change the margin pixel count (by changing the number).

Once the text has been moved we can really start making the caption look customized by changing text formats. We can change the text font, color and size by implementing the following code:

.wp-caption-text {
   top:0;
   color:#00ff00;
   font: normal 12px "Times New Roman", serif;
}

Customizing the WP-caption-text Command

The code above can also be completely customized to match any WordPress blog layout or theme.

-Font color can be changed by switching the html color code.

-The font can be given special attributes like bold, italic or underline by implementing the proper code in place of the “normal” command.

-The font size can be changed by switching the pixel number in the code above (for example: 12px to 20px is changing to a 20 pixel font size).

-Font format can be changed by switching the font name, also make sure to determine if the font is serif, sans-serif or arial and change the classification as needed.

But to spruce things up a little more we can add a background image which will display behind the caption text. This is perfect for designs and site themes that include a custom caption frame.

Add the below code in place of the “.wp-caption” CSS command:

.wp-caption img{
   top:20px;
   background-image: url(filename.format);
   background-repeat: no-repeat;
   background-position: center bottom;
}

All that’s left is to insert the directory of the image we want to use for the new caption frame.

That’s the entire process of customizing the default WordPress image captions. Good luck customizing your captions, we look forward to seeing what you can do with them!

)
Codeable info

Comments (4)

Comment by leiva says:

Do You have a demo so check the new style with images?

Comment by Photography in Austin says:

Many features are available in the image caption.The image should be fully word press supported is good.

Comment by Steve Mac says:

This is a very informative post. I will enjoy experimenting with a few of my own sites now. I love how you can change the font colour and size etc. Im sure the background can also be colour coded. Keep the great stuff coming guys.

Comment by walif says:

This is so amazing post and i enjoeyd much.I have spent more than 3 hours in your blog site.It is really helpful.

Codeable info