HTML5 <article> for WordPress comments

WordPress natively allows us to wrap comments in <div>’s or <li>’s but not HTML5 <article> elements. If you want to do this, add an ‘end-callback’ param to the wp_list_comments function call and set ‘article’ as the style (in comments.php):

    wp_list_comments(array('callback' => 'twentyten_comment',
                           'style' => 'article',
                           'end-callback' => 'twentyten_comment_end'));

…then in functions.php, add the callback function:

    if(!function_exists('twentyten_comment_end')) :
    /**
     * Allow HTML5 <article> (or anything else) for comment container.
     */
    function twentyten_comment_end($comment, $args, $depth) {

        switch($args['style']) {
            case 'ol':
            case 'ul':
            case '':
                echo "</li>\n";
            break;
            default:
                echo '</' . $args['style'] . ">\n";
        }
    }
    endif;

3 thoughts on “HTML5 <article> for WordPress comments

  1. Thank you so much. This is just what I needed for my company’s site re-design.

  2. Clean and awesome, thanks so much. Would have been great with an example of the generated markup, but obviously you are using the code for this comments section, too, so it wasn’t that hard to find !

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>