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 '
' . do_shortcode( $content ) . '
' . $caption . '

';}

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.

People are Talking, Talking 'bout People

Your Turn

You could be famous! If this post goes viral, imagine if you were first...

Your email address will not be published.