Hi, I’m Colin.

A technical article, from me? There are some very good reasons I stopped releasing code to the world, but I think I have very good reasons I am going to start up again.

Today, we’re going to be learning how to format our comments, for Wordpress, to work within the hCard spec. If you are unaware what microformats are, what hCard is, or why you might consider doing this on your site, please take a few minutes to read the microformats site.

As a side note: Even if you do not see yourself trying to directly benefit from using hCard in your comments, others will. Adding hCard syntax to your existing comments on Wordpress is painless, and should not effect your layout at all. So do it anyway!

Current Wordpress comment markup

Obviously, this markup depends on the theme you are using, but I’m going to show you the most common example, and you can hopefully adapt it to your current theme.

The following is the markup found in Michael Heilemann and Chris J. Davis’Kubrick, which comes pre-installed with every copy of Wordpress and is, by default, chosen as your theme. This theme has been customized thousands of times, and so most of you out there should be familiar with this markup.

<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
	<cite><?php comment_author_link() ?></cite> Says:
	<?php if ($comment->comment_approved == '0') : ?>
	<em>Your comment is awaiting moderation.</em>
	<?php endif; ?>
	<br />

	<small class="commentmetadata">
		<a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> at <?php comment_time() ?></a> <?php edit_comment_link('e','',''); ?>
	</small>

	<?php comment_text() ?>

</li>

This markup is replicated, by Wordpress, for every comment you have on each post. So, how do we make this hCard compatible?

There are a few essential elements to a hCard. The first, is marking up where the actual hCard is. In this case, we’re going to use the cite tag since that is where we have the commentor’s first name, last name, and url to their website. The second essential element would be the annotation of the commentor’s formatted name. To do this, we need to add 3 class names to your comments.

• vcard: This signifies the beginning of an hCard
• fn: This signifies the formatted name (or the way that the user would like their name shown).
• url: The home url for the commentor.

There has been some discussions in the world of microformats recently about being able to uniquely target single hCards on a page with multiple hCards, hence I am also going to add an ID to each hCard, so that if something takes off in this area, your comments will already be compatible. So, below is the code that you may use inside of Kubrick v1.5 for your commentor’s information to be marked up as hCards.

<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
			<cite id="vcard-<?php comment_ID() ?>" class="vcard"><a class="url fn" href="<?php comment_author_url(); ?>"><?php comment_author(); ?></a></cite> Says:
			<?php if ($comment->comment_approved == '0') : ?>
			<em>Your comment is awaiting moderation.</em>
			<?php endif; ?>
			<br />

			<small class="commentmetadata"><a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> at <?php comment_time() ?></a> <?php edit_comment_link('e','',''); ?></small>

			<?php comment_text() ?>

		</li>

It really is just that easy. Again, adding these few classes should not effect your layout, and can be installed painlessly into your site, for your benefit and ours.

Digg this article to help others find it.

[tags]wordpress, kubrick, microformats, hcard, xhtml, semantics[/tags]