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. 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

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s