Convert WordPress Default Captions Shortcode to HTML 5 Figure and Figcaption Tags

WordPress has a built in shortcode that allows you to insert an image along with a caption. They use a couple of DIVs to handle this, but of course, we’re moving into HTML 5 and there are some new tags to handle these elements: FIGURE and FIGCAPTION. If you’d like to modify your theme so that it always outputs the new HTML 5 instead of WP’s default implementation, just add the following code to your theme’s functions.php file.


add_shortcode('wp_caption', 'cn_caption_shortcode');
add_shortcode('caption', 'cn_caption_shortcode');
function cn_caption_shortcode($attr, $content = null) {
extract(shortcode_atts(array(
'id' => '',
'align' => 'alignnone',
'width' => '',
'caption' => ''
), $attr));
if ( 1 > (int) $width || empty($caption) )
return $content;
if ( $id ) $idtag = 'id="' . esc_attr($id) . '" ';
return '<figure ' . $idtag . 'aria-describedby="figcaption_' . $id . '" style="width: ' . (10 + (int) $width) . 'px">' . do_shortcode( $content ) . '
' . $caption . '</figcaption></figure>';}

Don’t forget to check your stylesheet (style.css) and make sure you updated any applicable styles, or create some new ones if you’d like to take a stab at the ol’ Web Design trade.

Up Next: How to Create a Multi-page Checkout for WP E-commerce