Being the further adventures of: html5 already works somewhat.
Article comments didn’t get the treament, last time, because they’re produced by wp_list_comments() in the comment.php template. But actually this isn’t that hard to sort, and I also took a look at the form fields in the comment post section of the page.
wp_list_comments takes a couple of arguments, including the type of comment to be listed (comment or pingback, for example) and a callback function to produce the comment output. This last is the clever part, and it makes it simple to change the html produced when listing out the comments without having to hack wordpress.
[php]
// in comments.php template
<ul class="commentlist">
<?php
wp_list_comments(‘type=comment&callback=mytheme_comment’); ?>
</ul>
// in functions.php, the prettied up markup.
function mytheme_comment($comment, $args, $depth) {
$GLOBALS[‘comment’] = $comment; ?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
<article id="comment-<?php comment_ID(); ?>">
<?php echo get_avatar($comment,$size=’50’); ?>
<div class="commentbody">
<div class="author"><?php comment_author_link() ?></div>
<?php
if( $comment->comment_approved == ‘0’ ) { ?>
<em>(Your comment is awaiting moderation…)</em>
<?php
} ?>
<div class="commentmetadata">
<a href="#comment-<?php comment_ID() ?>" title="">
<?php comment_date(‘F jS, Y’) ?> on <?php comment_time() ?>
</a>
<?php edit_comment_link(‘edit’,’ ‘,”); ?>
</div>
<?php comment_text() ?>
</div><!– /commentbody –>
<div class="reply">
<?php comment_reply_link(array_merge( $args, array(‘depth’ => $depth, ‘max_depth’ => $args[‘max_depth’]))) ?>
</div><!– /reply –>
<div class="cleared"></div>
</article><!– /comment –>
<?php
}
[/php]
And finally, something of limited current use (unless your visitor has Opera9), but it does no harm and it’s going to get better and better as more browsers implement form validation at the client level. Here are the form fields for new comment submission, if you’re not logged in:
[html]
<p class="ie-visible"><label>Name (required)</label>
<input type="text" name="author" id="author" size="22" tabindex="1" placeholder="Name (required)" autofocus /></p>
<p class="ie-visible"><label>Email (required)</label>
<input type="email" name="email" id="email" size="22" tabindex="2" placeholder="Email (required)" /></p>
<p class="ie-visible"><label>Website (optional)</label>
<input type="url" name="url" id="url" size="22" tabindex="3" placeholder="Website (optional)" /></p>
[/html]
This puts placeholder text (except in ie, which is why the form labels are visible to ie users) and autofocus on the fields, and validates (in Opera only) that the email and url fields are valid.
Sweet!