Html5 correct figure captioning for WordPress

Html5 correct figure captioning for WordPress

The problem

You may have noticed that when WordPress inserts an image into the Editor it creates this kind of code:

<a title="foobar" href="http://url_to_image.jpg">
    <img class="align size-full" title="foobar" src="url_to_image.jpg" alt="foobar"/>

And if you include a caption to the image it will show up like this:

[ caption id="attachment_id" align="align" width="xxx" ]
    <a href="url_to_image.jpg">
        <img src="url_to_image.jpg" alt="" title="foobar" width="xxx" height="yyy" class="size-large" />
Caption Here[ /caption ]

But that is obviously not correct Html5 markup and not at all semantic or parsable by robots. I’m very surprised at how slowly WordPress adapts to Html5, while it’s already been going on for years now.

The solution

So here’s the hack.

Edit your functions.php (ideally you’re working on a Child copy) and add the following:

function html5_insert_image($html, $id, $caption, $title, $align, $url, $size, $alt) {
$url = wp_get_attachment_url($id);
$src = wp_get_attachment_image_src( $id, $size, false );

if ($caption) {
	$html5 = "<figure class='align$align withcaption' >";
	$html5 .= "<a href='$url' data-title='$caption'><img src='$src[0]' alt='$alt' /></a>";
	$html5 .= "<figcaption>$caption</figcaption>";
	$html5 .= "</figure>";
} else {
	$html5 = "<figure class='align$align nocaption' >";
	$html5 .= "<a href='$url' data-title='$caption'><img src='$src[0]' alt='$alt' /></a>";
	$html5 .= "</figure>";

return $html5;
add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );

What this does is hook this new function that re-writes the html being sent to the editor from the Media Browser making use of Html5’s figure and figcaption tags.

So now, for newly inserted images (not the already inserted ones), you get this code instead:

<figure class="align nocaption">
    <a href="url_to_image.jpg"><img src="url_to_image.jpg" alt="Alt text"></a>

And with a caption:

<figure class="align withcaption">
    <a href="url_to_image.jpg" data-title='Caption Here'><img src="url_to_image.jpg" alt="Alt text"></a>
    <figcaption>Caption Here</figcaption>

The styling

Finally, it is very easy to style these new tags. Here’s an example:

/* Restyling for figcaptions */

#main-content figure.withcaption {
	border: 1px solid #DDD;
	background: #fff;
	border-radius: 3px;

#main-content figcaption {
	background: #FFF;
	color: #666;
	text-align: center;
	padding: 5px 0;
	color: #8c8d94;
	font-size: .8em;

This is an example of a styled Html5 figcaption imported directly from the Media Browser.
This is an example of a styled Html5 figcaption imported directly from the Media Browser.
Illustrations from Amy Blue

Next Article

Illustrations from Amy Blue

One Comment


Trackbacks for this post

  1. Active Screen Scrolling Mockup for Websites | Obsessive Coffee Disorder