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 responses

  1. Awesome! This is really good news and I’m stoked to see this implementation. Can’t wait for 3.6!

  2. This is perfectly timed for me. 🙂 Yay !

  3. Very cool – I’m updating my personal theme to use this now. Would be great to see placeholder support as well 🙂

  4. nathanrice Avatar
    nathanrice

    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:


    <?php
    //* Only turn on HTML5 for comment list
    add_theme_support( 'html5', array( 'comment-list' ) );

    view raw

    functions.php

    hosted with ❤ by GitHub


    <?php
    if ( current_theme_supports( 'html5' ) )
    echo 'Supports HTML5' . "\n";
    if ( current_theme_supports( 'html5', 'comment-list' ) )
    echo 'Supports HTML5 comment list.' . "\n";
    if ( current_theme_supports( 'html5', 'search-form' ) )
    echo 'Supports HTML5 search form.' . "\n";
    if ( current_theme_supports( 'html5', 'comment-form' ) )
    echo 'Supports HTML5 comment form.' . "\n";

    view raw

    index.php

    hosted with ❤ by GitHub

    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';

  5. 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.

    1. 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.

  6. I’m currently using Thematic
    but why look http://www.angkajitu.net and there are differences in the sidebar http://www.kompetisi.angkajitu.net post. please help me fix it and what steps I need to do. thanks

    1. Hi Angka, for help with Thematic feel free to post in its support forum:
      http://wordpress.org/support/theme/thematic

  7. 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?