The HTML5 Boilerplate is a (near) perfect template to start off a new web project according to the newest standards.
Read more about it on the HTML5 Boilerplate Website.
The HTML5 Boilerplate is a (near) perfect template to start off a new web project according to the newest standards.
Read more about it on the HTML5 Boilerplate Website.
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)
<div id="content" class="narrowcolumn hfeed">
<div class="post hentry" id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>" class="entry-title">
<?php the_time('Y-m-d H:i') ?>;
<abbr class="published" title="<?php the_time('Y-m-d\TH:i:s\Z') ?>"><?php the_time('Y-m-d H:i') ?></abbr>
<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.
I completely restructured the comments template in this blog.
The main difference visible is that Trackbacks/Pingbacks are now seperated from the rest of the comments.
I derived most of the ideas from Christian Montoya’s comments template he posted on his site today. Thank you 🙂
I hope I got everything covered in the new template, but still, if there are any problems just tell me 😉