Implementing hAtom: The entries code

This article is rather old now, but has been linked to a few times recently. Just wanted to say that I don’t actually use the example below anymore, as I have since upgraded WordPress and used the sandbox theme as the basis for my own, which comes with it’s own microformat goodness. The example below is still valid though and should be useful to you if you want to understand how it works or still want to do it yourself.

As promised, here is my PHP hAtom WordPress loop. Feel free to do as you like with it.

To start: The first thing with implementing something like this is it’s a really good excuse to do a code review. I had a look at the way I was using my headings and abbrs etc. and moved them about a bit. It becomes clear pretty soon that if you’re not using your HTML tags in a semantic way, it’s harder to think about adding additional levels of meaning (the microformat classes).

When I first added hAtom I didn’t also add it for my comments. This meant I could use hFeed around the entries. You can’t nest hFeed though, and since this loop will sit around the comments loop on a permalink entry, it had to be sacrificed and instead the page is taken as hFeed (which is the fallback) and the hFeed wraps around the comments loop (which I can also post if you’re interested). If you don’t hAtom your comments, put hFeed back in around the main entries, as this is a field that *should* exist if possible.

Entries loop with hAtom:


<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<div class="post hentry" id="post-<?php
the_ID(); ?>">

<h2 class="entry-title"><a href="<?php
the_permalink() ?>" rel="bookmark"
title="<?php the_title(); ?>"><?php the_title();
?></a></h2>

<h3>by <span class="author
vcard"><span class="fn"><?php the_author()
?></span></span>

on <abbr class="published" title="<?php
the_time(’Y-m-d’) ?>"><?php the_time(’F jS Y’)
?></abbr> </h3>

<?php the_bunny_tags(); ?>

<div class="entry-content">

<?php the_content(’Read the rest of this entry »’); ?>

</div>

</div> <!– end hentry –>

<p class="righted">Posted in <?php the_category(’, ‘) ?>
<strong>|</strong>

<?php teb_word_count(); ?> | <?php
edit_post_link(’Edit’,'’,'<strong>|</strong>’); ?>
<?php comments_popup_link(’No Comments »’, ‘1 Comment »’,
‘%Comments »’); ?></p>

<?php comments_template(); ?>

<?php endwhile; ?>

<p><?php next_posts_link(’« Previous Entries’) ?>
<?php previous_posts_link(’Next Entries »’) ?></p>

<?php else : ?>

<h2>Not Found</h2>

<p>Sorry, but you are looking for something that isn’t here.</p>

<?php endif; ?>

I’ve added some linebreaks and such to make it a bit more practical for a fixed width blog, so don’t take too much heed of the actual layout.

The bold parts are the hAtom sections (although the bunny tags also produce the “rel=tag”). The parts in italics are plugin calls. Note also how you incorporate hCard as the author. The publish date uses the datetime design pattern on the abbreviation. I chose not to include a timestamp as I don’t publish more than once a day (as a rule, anyway).

Do not fret those of you who aren’t into working up your own code, or perhaps are using wordpress.com – The Sandbox theme (available to .com users also) now has hAtom!

As you can see, it’s pretty simple. It’s just a case of going through and basically labeling the correct parts with the correct classes (making sure you have instances of all the *must have* classes). If you follow the link above to the hAtom wiki page on the microformat site, you’ll find some tools for testing your implementation.