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:
- 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
_sto keep it as simple as possible. - Filter the shortcode attributes and override the tag parameters. Since the
shortcode_atts_galleryfilter 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.
ThemeShaper 
21 responses
We talked briefly about this at Wordcamp Phoenix this year; I’m so excited to see it coming to fruition in core in 3.9! Yay!
A simple but welcome change.
Filter the shortcode attributes and override the tag parameters looks better methond among these two methods.
[…] WordPress 3.9, we’ll be able to declare HTML5 support for our galleries! ThemeShaper has an excellent article detailing HTML5 galleries in the upcoming WordPress […]
Waiting to see WP 3.0 in action.
Testing beta version.
Sorry, it was WP 3.9
Awesome! Do you know if there will be a way to remove the “ tags that get inserted in galleries?
Sorry, thought I could post code – the tag I meant was br style=”clear:both;”
You can with
codetags.To answer your question: We actually just talked about that yesterday. I’m not sure how Nacin feels about it, but if you’d like to make a case for removing them in HMTL5 mode, please feel free to comment on the ticket!
Ah! I got stuck in WordPress forum backtick-code land, sorry. 🙂 I’ve submitted a comment on that ticket. Thanks!!
I like this change gave it a try on the beta and it worked pretty good.
[…] Galleries and captions will now support HTML5. Themes can register support, and galleries will now use figure and figcaption instead of definition lists. You can learn more about how to support these features on Themeshaper. […]
Some folks might be concerned about styling the new markup so I pasted some simple code to make things look reasonable.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
gallery-style.css
hosted with ❤ by GitHub
Thanks, great idea! We recently updated gallery styles for
_sas well.Cool use of inline-block instead of float.
[…] 3.9 offers a host of new features for developers, including MySQLi support for queries, expanded HTML5 support, the addition of the has-post-thumbnail post class, and updates to 9 libraries, including TinyMCE […]
[…] figure and figcaption instead of definition lists. You can learn more about how to support these features on Themeshaper. […]
[…] https://themeshaper.com/2014/03/04/html5-galleries-in-wordpress-3-9/ […]
[…] Support for HTML5 in galleries, captions, and multimedia […]
You forgot to add html5 theme support for captions in Underscores 😉
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.