Whatever you do, don’t panic!
hAtom and WordPress
In this post I’ll briefly describe the steps I took to implement hAtom into my WordPress template.
hAtom is a draft specification for a Microformat to incorporate the common Atom format into HTML. Marking up your blog with those desciptive elements gives you several advantages but more on this later.
To make WordPress hAtom ready you have to edit the file named ‘Main Index Template’. The easiest way to do this is to go into the WordPress Admin and then to ‘Presentation’ -> ‘Theme Editor’.
This file includes the main ‘WordPress Loop’ that displays all of your posts. To add the hAtom Microformat here the only thing you have to do, is to set some HTML class attributes.
(Note: All examples taken from the “WordPress Default” template, edits are in bold)
- Find the div that has the id “content” and add a class “hfeed”. It’s ok for elements to have more than one class name. So if there’s already a class attribute there, just seperate them with a space. This marks the beginning of the Atom ‘feed’.
Now it should look like this:
<div id="content" class="narrowcolumn hfeed"> - Next we have to define a single entry. For this to happen I choose to include the “hentry” class to the alrady existent “post” div.
<div class="post hentry" id="post-<?php the_ID(); ?>"> - To set the post title correctly I simply added a class=”entry-title” to the link surrounding the post title.
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>" class="entry-title"> - Now comes the tricky part. To have a correct date format for the point of time the entry was postet we have to change the date display from the following
<?php the_time('Y-m-d H:i') ?>;
to
<abbr class="published" title="<?php the_time('Y-m-d\TH:i:s\Z') ?>"><?php the_time('Y-m-d H:i') ?></abbr>
This setting only applies if you are posting in CET. Please consult the datetime Design Patterns on the Microformats Website and the PHP date() function to adapt the part in the ‘title’ of the ‘abbr’ tag to your timezone. - Now find a tag surrounding the WordPress function named the_content() (or just put a div around there) and add the class “entry-content”.
<div class="entry entry-content">
<?php the_content('Read the rest of the entry.'); ?>
</div>
That’s basically it. You could of course add several more tags and classes for categories for instance. The good thing is that Microformats are nice to each other, so if you already have some Technorati tags in your blog that feature the ‘rel=”tag”‘ attribute, they will be incorporated in the hAtom format automatically.
So the question is now, how can you take advantage of your new semantic additions to your blog?
Well, as mentioned in my previous post about Microformats there is tails for Firefox but you can do all sorts of crazy stuff like converting your hAtom posts to a real Atom feed using the awesome webapp Luke Arno made: hatom2atom.
And that brings us to a whole new level. I’m asking myself why do I need a seperate feed that features the very same content that’s already displayed on my HTML pages? That’s where the magic of Microformats sets in. Their nature being that they are humans first and machines second I can now have both served just from one source.
Having Atom feeds for all of my blog posts also enables them to be used more widely for instance I can think of a few situations where an Atom feed of my archived posts could come in very handy. I’m sure you can think of several more ways to use this.
| Print article | This entry was posted by Florian Beer on 16. November, 2006 at 6:04, and is filed under Blog, Development, Web. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |
- Planet Microformats
- Planet Microformats
- L.T.P.
- coComment – Site
- はてなブックマーク – miyagawaのブックマーク / hatom
- hAtom, making your blog more accessible at charisma:18
- Ma.gnolia.com – Find Web Sites & Build Community Online
- Hot Links – Archives
- AndrewSkinner.name » Blog Archive » links for 2007-06-27
- serious-coder » Blog Archive » read http://blog.no-panic.at/2006/11/16/hatom-and-wordpress/
- hAtom应用 让结构提供数据 – 样式之美
- Stream of Conscience » Hunt
- virel.org: search engine for microformats -













about 6 years ago
There’s also Sandbox WordPress theme that you should check it out.
about 6 years ago
Thanks for mentioning it!
I came across this theme while searching for background infos on WordPress and Microformats but I’ll rather stick with my current template.
Too much customizing already went into it
about 5 years ago
Hi there, great tutorial, this was really helpful! I ran into a small problem while I was implementing it though and I thought I would share since it seems it would be pretty common?
To start I tried simply copy-pasting the date abbreviation from step 4, and that gave me the familiar blank white screen of a PHP error. After testing I noticed it was the backslashes that were triggering the error. This is what works for me:
<abbr class="published" title="<?php the_time(‘Y-m-d’) ?>T<?php the_time(‘H:i:sZ’) ?>">
Also note that the capital Z of the timezone is not escaped in my case because although I wasn’t able to make much sense out of that datetime Design Patterns page, it seems that the offset info does need to go there and not just a Z. And, that hatom2atom page accepts this as being valid. I’m not sure how this is different for a CET posting like yours of course since I’m posting from Pacific time in the US.
This is just what works for me, so if anything seems blatantly wrong here be sure to let me know. Thanks again!
about 5 years ago
Nice post, I also like the Sandbox theme Zeo mentioned.
about 5 years ago
Very useful information for me.
about 4 years ago
Great tutorial. Helps a lot. It really solved my problem. Thanks for the sharing the tips and info.
about 4 years ago
Thanks for sharing the tip. but think there must be some plugin to implement hAtom in wordpress.
about 4 years ago
Thank you for the walkthrough, really helped me out.
about 4 years ago
Great post, thanks for sharing.
about 4 years ago
very nice post thank you
about 4 years ago
You really seem like you know what you’re talking about. Good stuff, keep it up!
about 4 years ago
Great job, keep up the good work.
about 3 years ago
Yeah i aggree whit the guys above .:D
about 1 year ago
Super Anleitung, danke! Leider hat das Rich-Snippet-Preview-Tool bei mir gemeckert: Warning: Missing required field “updated”. Zur Lösung hab ich einfach class=”published” noch erweitert um class=”published updated”.
Gruß,
Florian
about 1 year ago
Danke für die Ergänzung, Florian!
about 1 year ago
The output was stripped.
<abbr class="published" title="<?php the_time(‘c’) ?>"><?php the_time(‘Y-m-d H:i’) ?></abbr>
about 1 year ago
Thanks for this simplification!
This article is from 2006 and thus quite old, I’m thinking about doing a rewrite for the newest WordPress standard theme, also implementing all the changes in Microformats in recent years.