HTML5 Galleries in WordPress 3.9

With the new release of WordPress will come the ability to declare support for HTML5 markup in galleries. Once a theme declared support, the definition list elements will be replaced by <figure> and <figcaption> for better semantics.

If you decide to not only adopt this new feature but also maintain backwards compatibility, then there are two ways to achieve that:

  1. Style not only the new HTML5 elements, but also add CSS selectors for the traditional definition list elements. This is the route we chose for _s to keep it as simple as possible.
  2. Filter the shortcode attributes and override the tag parameters. Since the shortcode_atts_gallery filter was introduced in 3.6, you’ll be backwards compatible with the latest two versions.

The callback to override the tag parameters could look something like this:

/**
 * Replaces definition list elements with their appropriate HTML5 counterparts.
 *
 * @param array $atts The output array of shortcode attributes.
 * @return array HTML5-ified gallery attributes.
 */
function prefix_gallery_atts( $atts ) {
	$atts['itemtag']    = 'figure';
	$atts['icontag']    = 'div';
	$atts['captiontag'] = 'figcaption';

	return $atts;
}
add_filter( 'shortcode_atts_gallery', 'prefix_gallery_atts' );

This second way of adding backwards compatibility has the added benefit that it also adds forward compatibility, as you’re able to use HTML5 markup for galleries now, even before WordPress 3.9 will be released in April.

Please keep in mind that WordPress  will no long output its default gallery styles by default, when HTML5 support for galleries has been added.

21 thoughts on “HTML5 Galleries in WordPress 3.9

  1. bevislarsen says:

    Filter the shortcode attributes and override the tag parameters looks better methond among these two methods.

  2. Pingback: Looking Ahead To WordPress 3.9: HTML5 Galleries – Tyler Longren

  3. Michelle McGinnis says:

    Awesome! Do you know if there will be a way to remove the “ tags that get inserted in galleries?

  4. Michelle McGinnis says:

    Sorry, thought I could post code – the tag I meant was br style=”clear:both;”

  5. Pingback: WordPress 3.9, "Smith" : Post Status

  6. Pingback: Wordpress "Smith" Version 3.9 Released | Blog | QuadraNet

  7. Pingback: Hikeno WordPress blog

  8. Pingback: HTML5 Galleries in Genesis - Sridhar Katakam

  9. Pingback: WordPress 3.9 Released | ClarkWP WordPress Magazine

    • There’s an open pull request about that at https://github.com/Automattic/_s/pull/443 and it looks like there’s some ongoing discussion about adding caption styles alongside that change. Might be a good time to take another look now that WordPress 3.9 has been released. Chime in on the PR if you have ideas about the best way to handle the corresponding styling.

Comments are closed.