Looking Ahead To WordPress 3.9: HTML5 Galleries

HTML5 In Your Galleries

In 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 3.9.

According to the ThemeShaper article, this is how it’ll work:

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:

The two options they mention to maintain backwards compatibility are:

  1. Style the new elements and add CSS selectors for the traditional definition list elements. That’s what ThemeShaper did for the _s starter theme.
  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.

For more details on option one, see how ThemeShaper handled it. If you went with option two, you’d need to add this to your theme’s functions.php file:

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 post is primarily targeted towards people who are developing custom themes, available publicly or not. Most of the themes I develop are private and are used for one specific client’s site.

Not the best fit for inclusion in a functionality plugin. I suppose you could, only if you have no other choices, which you do.


Well, now what?

Work with Me

I'm available for hire and always taking new clients, big and small. Got a project or an idea you'd like to discuss? Startup plan but no developer to make it happen? Just get in touch, I'd love to see if I can help you out!

Leave some Feedback

Got a question or some updated information releavant to this post? Please, leave a comment! The comments are a great way to get help, I read them all and reply to nearly every comment. Let's talk. 😀

Longren.io is proudly hosted by DigitalOcean


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.