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.
Why should you use WordPress Image Captions?
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.
Default CSS Commands For Image Captions on WordPress
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):
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).
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:
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:
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!