Converting Your WordPress Theme for Microformats 2 Part 2

Okay, so four years after I wrote how to start Converting Your WordPress Theme for Microformats 2, I’m back with Part 2.

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.

David Shanske

My day job is in training for an airline. I also develop Indieweb WordPress plugins so that others can take control of their online identity.

7 Responses

  1. September 25 through October 2, 2020
    Recent EventsFrom events.indieweb.org/archive:

    Webmention + Next.js (with Monica Powell)
    Thursday, October 1 at 9:30am

    Homebrew Website Club West Coast
    Wednesday, September 30 at 6:00pm

    ONLINE: Homebrew Website Club Europe/London
    Wednesday, September 30 at 7:00pm

    Homebrew Website Club: Nottingham (Hacktoberfest edition)
    Wednesday, September 30 at 5:30pm

    Virtual Homebrew Website Club Indian Standard Time
    Wednesday, September 30 at 6:00pm

    Lightning Talk – How IndieWeb can help break free from big tech at Software Freedom Kosova
    Sunday, September 27 at 9:00pm

    Making IndieWeb Friendly WordPress Themes
    Saturday, September 26 at 9:30am
    Upcoming EventsFrom events.indieweb.org:

    ActivityPub Conference 2020
    October 2 – October 5

    OAuth 2.1 and ActivityPub Live Q&A Session
    Saturday, October 3 at 4:30pm

    Homebrew Website Club West Coast
    Wednesday, October 7 at 6:00pm

    Virtual Homebrew Website Club Indian Standard Time
    Wednesday, October 14 at 6:00pm

    Homebrew Website Club: Nottingham (Hacktoberfest edition)
    Wednesday, October 14 at 5:30pm

    ONLINE: Homebrew Website Club Europe/London
    Wednesday, October 14 at 7:00pm

    Homebrew Website Club East Coast Timezone
    Wednesday, October 14 at 6:00pm

    Domain of One’s Own Meetup (October 2020)
    Tuesday, October 20 at 9:00am

    Homebrew Website Club: Nottingham (Hacktoberfest edition)
    Wednesday, October 28 at 5:30pm

    IndieWebCamp East 2020
    November 14 – November 15
    Posts about the IndieWebFrom news.indieweb.org:Displaying Webmentions on My Siteby jamesg.blog on October 2

    Why I IndieWebby jamesg.blog on September 29

    Adding Webmentions to Jekyllby jamesg.blog on September 28

    Converting Your WordPress Theme for Microformats 2 Part 2by david.shanske.com on September 27

    New Community Members
    From IndieWeb Wiki: New User Pages:
    User:Onetwoxu.deCreated by Onetwoxu.de on Saturday and edited 6 more times
    Top New Wiki Pages
    From IndieWeb Wiki: New Pages:
    Search My SiteSearch My Site provides simple search for personal and independent websites – to improve the ability to find independent and personal websites, and provide a search as a service for site owners.Created by Boffosocko.com on Friday
    Top Edited Wiki Pages
    From IndieWeb Wiki: Recent Changes:
    2020/Pop-ups/IndieWeb Friendly WordPress Themes 6 edits by boffosocko.com and david.shanske.com
    person-tag 5 edits by loqi.me and boffosocko.com
    holiday theme 4 edits by boffosocko.com and jamesg.blog
    SMS 4 edits by aaronparecki.com, tantek.com, loqi.me and vanderven.se martijn
    birthday 3 edits by jamesg.blog
    backblaze b2 3 edits by tomasparks.name and q4.re
    PKCE 2 edits by aaronparecki.com
    React 2 edits by loqi.me and tantek.com
    commonplace book 2 edits by boffosocko.com and loqi.me
    Craft 2 edits by theadhocracy.co.uk

Leave a Reply

Your email address will not be published. Required fields are marked *