How to stylize WordPress image caption

By default, WordPress stylizes your image captions in a way that might not perfectly match your theme design. However, we can dramatically change it just by applying some CSS on the right classes.

First, let’s take a look at the essential structure to see how far we can push it:

[html]
<div class="wp-caption">
<img />
<p class="wp-caption-text">
</p>
</div>
[/html]

Luckily, we have a wp-caption wrapper that we can fix and move things inside. For example, assign the following:

[css]

.wp-caption{
position:relative;
}

.wp-caption img,
.wp-caption-text{
position:absolute;
}
[/css]

And now you can move the text above the image. For example:

[css]
.wp-caption img{
top:30px;
}

.wp-caption-text {
top:0;
}
[/css]

Of course, you could add a background, change colours, fonts, etc. You could even use a plugin like Art-Direction to stylize your captions differently depending on your post thematic. Let’s try a quick test using Art-Direction:

Composed with Affair from SudTipos
Affair by SudTipos

In the example I also added

[css]
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 945px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">.wp-caption-text {</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 945px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">top:0;</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 945px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">font: normal 12px "Times New Roman", serif;</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 945px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">}</div>
.wp-caption-text {
top:0;
font: normal 12px "Times New Roman", serif;
}
[/css]

So, sky is the limit. Style those captions!

4 thoughts on “How to stylize WordPress image caption”

  1. You can add a link to the image from the Insert Images panel. If you forgot to add it, you can use the add link button on the rich text editor

  2. While in edit page mode I can insert html code inside the caption. For example I can have some words in the caption text appear bold, italics or add line breaks. I can see these font changes while in edit mode but as soon as I press preview or save they are automatically removed and do not appear within the caption text.

    Is there a way of preserving HTML and font styles inside the caption.

    Thanks

Leave a Reply to Elio Cancel reply