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.
- p-summary or e-content
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:
<article id="post-<?php the_ID(); ?>" <?php post_class( 'h-entry' ); ?>>
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.
<h3><a class="p-name u-url" title="Permalink to <?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
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.
<time class="dt-published" datetime="<?php echo get_the_date('Y-m-d H:i:s'); ?>"><?php echo get_the_date('F jS, Y'); ?></time>
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.
echo '<div class="p-summary">'; the_excerpt(); echo '</div>';
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.
<article id="post-3964" class="h-entry post-3964 post type-post status-publish format-status hentry category-uncategorized post_format-post-format-status"> <div class="p-name e-content"> <p>Scheduled my image posts for the week. I wanted a change so I chose mostly older photos from different locations.</p> </div> <time class="dt-published" datetime="2016-10-09 08:55:20"><a class="status-date" href="http://cdevroe.com/2016/10/09/3964/" title="Permalink to this status update">8:55am on October 9th, 2016</a></time> </article>
<article id="post-3894" class="h-entry post-3894 post type-post status-publish format-image hentry category-uncategorized tag-airplane tag-flying tag-rc tag-scott-township post_format-post-format-image"> <div class="p-name e-content"> <p><img class="alignnone size-full wp-image-3895" src="http://cdevroe.com/wp-content/uploads/2016/10/IMG_4998.jpg" alt="img_4998" srcset="http://cdevroe.com/wp-content/uploads/2016/10/IMG_4998.jpg 1000w, http://cdevroe.com/wp-content/uploads/2016/10/IMG_4998-300x200.jpg 300w, http://cdevroe.com/wp-content/uploads/2016/10/IMG_4998-768x512.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>Coming in for a landing, Scott Township, PA – September 2016</p> </div> <p class="text-uppercase text-muted"><a class="u-url" title="Permalink to Coming in for a landing, Scott Township, PA – September 2016" href="http://cdevroe.com/2016/10/09/coming-in-for-a-landing-scott-township-pa-september-2016/">October 9th, 2016</a></p> </article>
Post on Index:
<article id="post-3945" class="h-entry post-3945 post type-post status-publish format-standard hentry category-uncategorized tag-git tag-github tag-subscriptions tag-youtube"> <h3><a class="p-name u-url" title="Permalink to Tracking my YouTube subscriptions over time" href="http://cdevroe.com/2016/10/08/tracking-my-youtube-subscriptions-over-time/">Tracking my YouTube subscriptions over time</a></h3> <p class="text-uppercase text-muted"><time class="dt-published" datetime="2016-10-08 13:02:22">October 8th, 2016</time></p> <div class="p-summary"> <p>As I wrote late last month, I’m using YouTube a lot, and so I’d like to track my subscriptions over time. Git is the best tool for this sort of thing so I quickly jotted my YouTube subscriptions down and put them on Github. To retrieve your own subscriptions you can use YouTube’s Subscription Manager. […]</p> </div> <p class="text-primary"><a title="Permalink to Tracking my YouTube subscriptions over time" href="http://cdevroe.com/2016/10/08/tracking-my-youtube-subscriptions-over-time/">Read more...</a></p> </article>
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.