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:

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!