html5 Comments in Wordpress – quickfix

Introduction

I’m not even going to acknowledge my terrible blogging habits ( or in reality, lack thereof ) and get to a little something something that will hopefully be of some use to someone.

With html5 making a lot of noise and gaining steam ( Google Voice & Youtube as examples ), it’s only a matter of time.

On January 25th, 2010, a nice chap by the name of Nathan Staines released his html5 version of Elliot Jay Stocks‘ Starkers theme.

As I’m still in the process of learning the nuances of html5 I decided to use Starkers html5 as a learning ground. Being a typical twitter user I let the world know what I was up to. Nathan fairly quickly responded, asking my thoughts and recommendations on any adjustments, I replied in kind.

I sat down to see if I could tackle it, I’ve always been a bit wary of messing with the comments code for wordpress seeing as recursive code can get complicated if you don’t know exactly what is going on. I thought it was an excellent opportunity to learn and I came up with a (mostly) strait forward quick fix for now. I still want to go back and rewrite the wp_list_comments(); function but that will have to wait as I have other priorities.

My quick fix:

In the comments.php template file find this bit of code:

<?php wp_list_comments(...); ?>

We’ll be using this instead:

<?php wp_list_comments('style=div&callback=html5_comment&end-callback=html5_closecomment'); ?>
'

In your theme’s functions.php file we’ll be adding the following code:

// Changes the trailing </li> into a trailing </article>
function html5_closecomment() {?>
	</article>
<?php
	}

// This is the new comment markup - edit as you feel necessary
function html5_comment($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>

	<article id="comment-<?php comment_ID() ?>" <?php comment_class(); ?>>
		<header class="comment-author vcard">
			<?php echo get_avatar($comment,$size='48',$default='<path_to_url>' ); ?>

			<?php printf(__('<cite class="fn">%s</cite> says:'), get_comment_author_link()) ?>

			<p><time pubdate><?php edit_comment_link(__('(Edit)'),'  ','') ?></time></p>

			<p><?php echo $args ['style']; ?></p>

		</header>
		<?php if ($comment->comment_approved == '0') : ?>
			<p><?php _e('Your comment is awaiting moderation.') ?></p>
		<?php endif; ?>

		<?php comment_text() ?>

		<footer class="reply"><?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?></footer>

<?php
	}

This will force your comments to display like the following:


<article>

    <article> 
    
    </article>
</article>
...
...

A couple of notes

Usually, theme’s wrap the wp_list_comments(); call in an ordered list, this isn’t necessary for our super awesome html5 anymore since articles can (and I guess should) be nested. Personally I wrapped it in a div with “the_comments” as a class ( For styling purposes mainly. ).

These are the only changes I made to the starkers html5, take a look for yourself.

Feel free to use, modify and share as you like. Try to give references where they are due though, that’s all I ask.

Once I rewrite the function for wp_list_comments to handle ‘style=article’ I’ll let you all know.

More on html5

W3C html5 spec overview

WhatWG.org html5 Working Draft

html5Doctor

html5 Gallery

html5 Comments in WordPress – quickfix