Quick Tip: HTML in Image Captions

We will find out what this new media improvement means in practice!

Good news! For this functionality you won’t even need a plugin, because when WordPress recently released version 3.4.x, this feature was introduced.

You can read about other changes too in the Codex.

When you insert an image into a WordPress page or post you can make a caption for it. Each inserted image can have its own caption and can use standard HTML tags to format it (of course you can leave it empty then it won’t have a caption at all).

The tags you can use are by default the same as the ones available in comments.

For example you can have bold text with <strong>, italicized text with <em> and crossed out text with <strike>.

Please note that WordPress uses a light gray style for the background and dark gray for text by default. These CSS class selectors are .wp-caption and .wp-caption-text.

If you want to use your custom styles then include them in the theme’s CSS (usually in style.css).

In our case the theme’s style is the following.

.wp-caption {
	background: #F1F1F1;
	line-height: 18px;
	margin-bottom: 20px;
	padding: 4px;
	text-align: center;
}

.wp-caption-text {
	color: #888;
	font-size: 12px;
	margin: 5px;
}

Note that you can always change the caption if you click on the picture in the post editor then clicking on Edit image.

The HTML code I’m using is this:

<em>This text is italicized.</em> <strong>And this is bold.</strong>

Examples in Pictures

Insert image box in WordPress admin

Caption look in editor

Caption look on the site