Skip to content

Better WordPress Captions

The latest WordPress update introduced HTML editing captions, reminding us all that captions are in fact a feature in WordPress.

They’ve not exactly been embraced as the über feature we initially hoped for; many sites still prefer to go for writing under an image in italics instead of using the captions. Smashing Magazine, for example still just have their images and then a short description underneath acting as a caption:

So why don’t we like them? I’d like to suggest it’s because the default captions, well… I’m trying to think of an eloquent way of putting this. Essentially, they look a bit pants. But it doesn’t have to be that way! Today I’ll be showing off how I do my fancy overlay captions here on WPShout, as introduced in the latest redesign.

What we’re making

My proposal for better WordPress captions is that instead of displaying a little bit of text under the image, is that the caption gets displayed, featured content style, over the image. Something like this:

This, essentially, is it! A nice little overlay.

Thanks to the nice friendly HTML a caption outputs, it’s actually quite easy to do this. I’ll take you through it.

Captions’ HTML output

Customising a caption is actually quite easy, thanks to the nice friendly HTML output they generate. The following is a standard caption:

<div class="wp-caption">
	<img class="size-full wp-image-1159" title="Test test test!" src="test-img.jpg" alt="Test image" />
	<p class="wp-caption-text">This, essentially, is it! A nice little overlay.</p>
</div>

It’s just an image and a paragraph containing the caption text encased in a div with the caption’s class. This is great news as it means we can more or less do anything we like this it. Let’s try out my little overlay idea.

Building the overlay

This too is quite simple; it just needs a little bit of CSS. This is a simplified version of what I’ve got here on Shout. Just need to set the wrapping div, .wp-caption, to relative and then position the paragraph containing the caption on top of the image, using RGBA to create a black transparent background:

.wp-caption{ position: relative; }
.wp-caption-text{ background-color: rgba(0, 0, 0, 0.8); bottom: 60px; color: #eee; left:0; padding: 3px 10px 3px 20px; position: absolute; }

Once that’s dropped in your stylesheet, that’s actually more or less it.

Admiring the results

The results are, I think, quite neat. I asked on Twitter whether anyone actually used captions earlier and nobody replied, suggesting nobody does. Hopefully this will provide some food for thought; I’m only suggesting one way of doing it, so if anyone has any other ideas, I’d be delighted to hear them — leave a comment to let me know. Happy captioning!

Yay! 🎉 You made it to the end of the article!
Alex Denning
Share:

10 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Signe
June 17, 2013 9:54 am

This is terrific, thank you so much.
Is there any way to move the overlay so that it sits flush to the right side of the image?

Niall Rutter
October 3, 2012 7:17 am

Like a total WP newb I tried building a fully featured HTML5 site with the new tags: , and all only to find that WP image captions don’t do it this way. Wouldn’t it be good to have a caption core setting for the output type to be either ‘HTML4’ or HTML5..? Maybe that is the next step for this, as you have stated, largely unused feature…

Herrin
September 28, 2012 11:35 am

It’s been shown that captions are highly read by visitors so in my opinion you’re wasting a chance at increasing conversions by either having none, or implementing something that potentially confuses the image and the visitor.

Great code and certainly good to know how to do this though thank you!

Chris
September 27, 2012 1:15 pm

Wow, nice idea. I have to admit, I tend to ignore caption styling — my caption styles haven’t changed much since Kubrick! O.O

Shawn
September 25, 2012 11:22 pm

I like it, though I think it should be positioned left a little, maybe half as far left as it is pushed up, which would give it a ribboned effect.

As far as the caption obscuring the image, it’s rare that an image is going to have such important information that close to the bottom, but even if it did, there are ways around that, too. I would suggest adding a hover style to the image that changes it’s z-order above the caption. This would effectively hide the caption when the image was focused upon, while still providing the stylish caption for normal display.

Erik Rubright
September 25, 2012 10:37 pm

I like the idea. My only concern would be that the caption now sits on top of the photo obscuring a portion of it from readers.

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!