You’ve been granted h-entry

This morning I took a few minutes to add microformats to the HTML of my blog. I had done so in the past when my site was using a completely different theme and hadn’t taken the time to add them back in. Shame on me. I should have done it much sooner since it took less than 20 minutes and now I think my blog will be a little easier to read for things like webmentions.

This post isn’t to be used as a guide in adding microformats to your WordPress theme. I’m simply writing this down as a way to walk myself through my own task of doing so. But if you read it and feel inspired to add microformats to your own site then I’ve done my job.

In short, the following classes must be added to your index pages (index.php, archive.php, search.php, etc.) and your single post page (single.php) to support the h-entry microformat.

  • h-entry
    • p-name
    • p-author
    • u-url
    • p-summary or e-content
    • dt-published

There are other classes in the spec, and I recommend supporting which ever ones make sense for your site, but if you only had these class names added your HTML, it would be much easier to parse for the little robots that are running around on the web trying to eat your code.

Many WordPress templates wrap posts in an article tag and add classes to it using post_class function. This function adds numerous classes to help you specify things like post-formats, post-types, etc. Supporting h-entry couldn’t be easier since the post_class function allows you to add any classes you’d like on your own. Like this:

Next, you’ll want to add the p-name and u-url classes to the link that goes to your blog post from the index. That should be easy enough. Mine looks like this but your’s will likely look a bit different. In my case the A tag’s contents contains the post’s name, and the HREF of the A tag is the post’s URL. So I can add both classes to the one element.

We’re almost there. The next class I needed was dt-published – or the datetime that the post was published. This one may prove to be a bit harder to wrap your head around but here is how I did it.

I used HTML’s time element so that I could take advantage of the datetime attribute. Exactly as the microformats wiki suggests. get_the_date in WordPress accepts PHP’s date formatting arguments (all those weird letters up there) so it didn’t take too long to figure out how to format the datetime correctly. Essentially, I’m formatting the date for machines in the attribute and humans in the contents.

Finally the contents of the post must be marked up. On my indexes I only show an excerpt of the post and on the single page’s I show the entire entry’s contents. So I use p-summary on index and the e-content class on the single post page. This is how my index page’s markup looks.

For my particular use I also needed to mark up statuses or what might be called “notes” on the indieweb wiki. In retrospect “notes” is a far better term since what I post as statuses are more often than not more a note than a status. But, oh well? I think I’m stuck with it for now. For statuses I simply mark up the entire content as both p-name and e-content as suggested by the microformats wiki.

Here are a few examples of each post format, in HTML, that I use on my site.



Post on Index:

I hope to improve this markup a bit over the coming weeks to support more microformats. But for now I think this will help to make my site’s HTML a bit more readable to our little bot friends.


#, #, #, #, #, #