HTML5 Support in WordPress Core

I’m excited to share that we’re pushing things forward in WordPress 3.6 – default snippets for comments, the comment form, and the search form are updated with the latest HTML5 markup.

While the changes to both the search form and the comment form are rather marginal (added classes and some streamlined markup), the comment markup changed a bit more. The new version offers the best features from previous default themes and the pre-existing markup from core.

Everything is backwards-compatible, of course, so themes that do not use their own searchform.php template or a custom call back for wp_list_comments() will not break and will need to be updated.

How to use it in your theme

Since WordPress has no way of knowing whether the currently active theme supports HTML5, we need to explicitly add theme support. In this function call, we also have to pass an array of arguments to specify the snippets we expect to be output in HTML5. The arguments that are currently supported are:

  • 'comment-list'
  • 'search-form'
  • 'comment-form'

And this is how it could look in your theme’s functions.php file:


function prefix_setup() {
    add_theme_support( 'html5', array( 'comment-list', 'search-form', 'comment-form', ) );
}
add_action( 'after_setup_theme', 'prefix_setup' );

Additionally, from now on we can display pings (pingbacks/trackbacks) in a shorter version as well, instead of using the regular comment markup. This is how the setting looks in Twenty Thirteen’s comments.php file:


wp_list_comments( array(
    'style'       => 'ol',
    'short_ping'  => true,
    'avatar_size' => 74,
) );

Updates to _s

Since we strive to keep Underscores backward-compatible with the prior two WordPress releases, it will be a while before we can lose the custom comment callback and the search form template there. However, we did update the code in those two places with the new core markup. This way we can remove those passages in the future without having to worry about breaking any styles.

With the release of WordPress 3.6 being imminent, get excited about these changes, update your themes, and help us creating better experiences for everyone!

9 thoughts on “HTML5 Support in WordPress Core

  1. nathanrice says:

    FWIW, the specification of which feature to turn on HTML5 for is irrelevant. As of 3.6′s release, simply specifying support for ‘html5′ turns on HTML5 for all 3 output types. Here’s a unit test:

    https://gist.github.com/nathanrice/6143003

    And yes, that’s how the feature is detected in WordPress core.

    http://phpxref.ftwr.co.uk/wordpress/wp-includes/comment-template.php.source.html#l1610

    $args['format'] = current_theme_supports( 'html5', 'comment-form' ) ? 'html5' : 'xhtml';

  2. I think this is not consequent, also not very relevant for users. The html5 topic with wordpress is more a topic for the content from the posts, page. Currently use all filters for the_content default xhtml markup and html5 is only possible with custom functions, there change or enhance the filters on content. The completely solution for WP and html5 is open, this is a small step in the direction html5. But thanks for this step.

    • Agreed, we are still not at a point where all markup is being output in HTML5. Or at least can be comfortably filtered to do so. But as you mentioned, it is a step in the right direction.
      Never the less, the few changes we made will have a big impact on theme development, going forward.

  3. I’m trying to understand whether searchform.php and comments.php are needed in a theme if html5 support is on. WordPress throws a notice but everything seems to work ok. Does anyone know if I can drop those files in a theme if I’ve got html5 support on?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s