Series: Indiewebifying Your WordPress Theme

First, four years later, we need to recap, update, and expand what we discussed last time.

Before you start, you need to clean up two very simple things.

•  Don’t style any Microformats Classes. WordPress commonly supports classic microformats. WordPress actually adds hentry, the predecessor to h-entry, into every single post in the post_class filter. So, you want to be able to supplement, replace, or fix Microformats classes without changing the look of your theme. So if you are updating a theme that already does this, add a styling class and change your CSS to do that. For example, I add entry alongside hentry and rewrite all the CSS to style entry, then I can take hentry out where it shouldn’t be.
• Someone years ago decided to add hfeed to the header file of their theme and everyone copied it. hfeed indicates a page is a feed…which means it contains multiple entries(date archive, author archive, main posts page, etc). This should therefore not appear on a single page…so if it does, take it out.

Where do you start?

Add h-entry and h-feed in the proper places. See Part 1 for some sample code on how to do that using the body_class and post_class filters. You could also add it manually by surrounding your post, class="h-entry", and surrounding all the posts in an archive/feed page with an element that has class="h-feed" Congratulations, you’ve now marked up your posts as posts and your feeds as feeds.

Now that we’ve marked up feeds and posts, we want to get down deeper…namely, inside your posts. We want to mark up things like author, publish date, etc.

In most themes, time is already marked up, something like this, with an HTML5 time element. The full time is present in ISO8601 format, with the timezone offset for your site, and inside the tag is the human readable one.

<time datetime="2016-06-22T23:52:09-04:00">June 22, 2016</time>

You get two times per post..the published time and the updated time.  Many themes have the updated time visually hidden, but available for parsing. If you do not have a fully formatted timestamp in datetime, you should do so. Positively, since WordPress 5.3, the offset is properly set based on your site settings, where previously you had to edit the theme to get this. The displayed time is up to you.

Add class="dt-published" to the publish time of the post, and class="dt-updated" to the updated/modified time of the post.

We also, most importantly, want to make sure the author is marked up correctly. That should include, at minimum, the author’s name, if not URL and photo. All author properties should be surrounded by an element that has class="p-author h-card". The photo should have class="u-photo", indicating it is a representative photo of the element it is inside…the h-card. H-cards represent people, organizations, or places. By adding the p-author, we indicate that this person is the author of the piece. The p- tells the parser that whatever text is inside here is the value of the author property. You can also add a url for the author website, marking it class="u-url" which states it is the URL that represents the containing element…the h-card/author property.

Here is a simplified example of what this might look like…

<div class="h-entry">
<time class="dt-published" datetime="2016-06-22T23:52:09-04:00">June 22, 2016</time>
<span class="p-author h-card"><a class="u-url" href="https://joebloggs.com">Joe Bloggs</a><img class="u-photo" src="https://joebloggs.com/avatar.jpg" /></span>
</div>

So, if we run the new file through a Microformats parser(I like php.microformats.io), we’d get a nice output…

{
   "type": [
     "h-entry"
    ],
   "properties": {
     "url": [
       "https://joebloggs.com"
     ],
     "published": [
       "2016-06-22T23:52:09-04:00"
     ],
     "author": [
       {
         "type": [
           "h-card"
         ],
         "properties": {
           "photo": [
             "https://joebloggs.com/avatar.jpg"
           ],
           "name": [
             "Joe Bloggs"
           ]
         },
         "value": "Joe Bloggs"
         }
     ]
  }
}

Looks pretty good…except no content… Content is a bit more complicated, because WordPress stores content in the database, but when outputting it, puts it through a filter called “the_content”, which many plugins use to add things that aren’t content to the post.

Content is supposed to be wrapped in an element with the class="e-content". If we wrap the output of the_content, we might incorporate things from other plugins.

While it is by no means the most reliable way, my solution is to use the same content filter, but at the first priority, wrapping what original came out of post_content before all the other items.

You can do the same with the summary, if it exists, wrapping it in p-summary.

function add_econtent( $content ) {
  // Do Not Add this is it is a Feed.
  if ( is_feed() ) {
    return $content;
  }
  $wrap = '<div class="e-content">';
  // If there is no content, do not bother.
  if ( empty( $content ) ) {
    return $content;
  }
  return $wrap . $content . '</div>';
}
add_filter( 'the_content', 'add_econtent', 1 ); 

function add_psummary( $excerpt ) {
  // Do Not Add this is it is a Feed.
  if ( is_feed() ) {
    return $excerpt;
  }
  $wrap = '<div class="p-summary">';
  // If there is no excerpt, do not bother.
  if ( empty( $excerpt ) ) {
    return $excerpt;
  }
  return $wrap . $excerpt . '</div>';
}
add_filter( 'the_excerpt', 'add_psummary', 1 );

In the next part, we’ll dive even more into the weeds, talking about other classic microformats and rel-values and what to do with them. Probably before 2024.