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!

Alex Denning

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)!

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2024

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

25 Best Free WordPress Themes (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2024 Compared and Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. Theyโ€™ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2024

Is this going to be the year you learn how to start an eCommerce business from scratch? Youโ€™re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...