Replied to http://stream.boffosocko.com/2016/david-this-is-some-excellent-code-for-adding-some-microformats (Chris Aldrich)

David, This is some excellent code for adding some microformats to @WordPress. Thanks @dshanske!

For those with less technical expertise, could I pose a few questions which you may or may not cover in part 2?

If I recall, there’s microformats version 1 and a more recent, updated microformats2. Most of what you’re adding here is the mf2 spec and not backwards compatible mf1 mark up, right?

When you say that a theme shouldn’t “style” hfeed or hentry, you mean that the CSS shouldn’t include these classes as they’re used only for semantic mark up and not meant to be used for CSS at all?

If hfeed is already added into a theme, do you recommend removing it from the theme code directly with search and replace (particularly if it wasn’t added in the correct place) and then adding it with the snippet you provided, or is it best to leave it in the theme and remove it from the code? If we remove it from the code you provided, which line(s) should we omit? What happens if it is duplicated (ie, what will the output look like, or what happens to parsers that read the code)?

What exactly are the post, body and comment class functions? What do they look like and where would one find them in a particular theme?

How is the code you’ve provided different from what the WordPress plugin uf2 does? Is it more or less extensive?

In the end, this is also just a stop-gap measure to quickly add a small, but high level subset of microformats to current themes that don’t support it? Ideally we would hope more modern themes will add a more full version of microformats natively?

  • Hfeed and hentry are classic microformats, and remain in this implementation. In most themes, hfeed is attached to a main div and should be removed in favor of the implementation provided. The advantage is that it can be modified.
  • CSS shouldn’t include microformats classes.
  • If you duplicate the same classes attached to different elements, it can mess up parsing.
  • Some of this is similar to the code in wordpress-uf2. wordpress-uf2 hasn’t been updated in a while and also uses ActivityStream as Microformats Vocabulary…h-as-page, h-as-article, which are not commonly used. This doesn’t include that. So, simpler, but taking advantage of changes in WordPress and Microformats.
  • This isn’t really a stopgap measure. This is how any theme would update its structure.
  • The post_class, comment_class, and body_class are functions that output standard classes for the body, post, and comment enclosures. They are not required, but have been around since WordPress 2.8, and are usually present in themes. It is a more dynamic way to add structure.

For most people, this is a simple way to add basic microformats structure that allows your site to be parsed by a microformats 2 parser. The second part will be covering some more complicated issues.

Why Microformats

I’ve spent some time on this site commenting on the use of various Indieweb concepts, but I haven’t really touched on Microformats. Microformats just turned 11 years old.

Microformats are human-readable markup that are easily human readable as well as machine readable. They appear as classes attached to HTML elements in webpages. The most popular alternatives to Microformat markup are things like schema.org, RDFa, etc.

The mistake people make is that it is overly technical. The vocabulary of the current iteration of the standard is simple. The below is a simple example. For example, h-card is the vocabulary for marking up people, organizations, and places. The below is a minimal h-card identifying name and associated URL.

<div class="h-card">
<h3 class="p-name">David Shanske</h3>
<a class="u-url" href="https://david.shanske.com">Website></a>
</div>

Then there is h-entry, which is used for individual posts on this site, or any episodic content. It is a equally easy, though like h-card, you can add more elements.

<div class="h-entry">
<time class="dt-published" datetime="2016-06-22T02:34:16-0400">June 22, 2016</time> <p class="e-content">This is my content</p> </div>

And so on. Not only does it identify…what is the content, what is the publish date, etc. in a way a human could realistically read enough to mark it up, it can be parsed and read by a computer. It is easy, if you understand HTML enough to read it, how to mark up the elements.

And then come the advantages. If parsers can read the elements of your site, they can interpret your intent. The community has developed vocabulary to indicate many relevant things, and put out programs, sites, and in my case, WordPress plugins that take this data and turns it into things like: ‘likes’, meaningful comments, event RSVPs, etc.

I’ve been posting articles on adding Microformats to a WordPress site. Once added, the site can be properly parsed, and can be used to do these things. How do I know? My site already does them.

 

 

Converting WordPress Themes for Microformats 2 – Part 1

I won’t claim to be a Microformats expert…but the below are some simple steps that can be taken to adjust a theme structurally for Microformat posts.

The below filters can be added to a theme’s functions.php, but you have to make sure that your theme uses the post, body, and comment class functions, and that it doesn’t style hfeed or hentry. Also, hfeed is often added to the theme, and should be removed to avoid duplication.

 

/**
 * Adds custom classes to the array of body classes.
 *
 * @param array $classes Classes for the body element.
 * @return array
 */
function body_classes( $classes ) {
	// Adds a class of hfeed to non-singular pages.
	if ( ! is_singular() ) {
		$classes[] = 'hfeed';
		$classes[] = 'h-feed';
	} else {
		if ( 'page' !== get_post_type() ) {
				$classes[] = 'hentry';
				$classes[] = 'h-entry';
		}
	}
	return $classes;
}
add_filter( 'body_class', 'body_classes' );
/**
 * Adds custom classes to the array of post classes.
 *
 * @param array $classes Classes for the body element.
 * @return array
 */
function post_classes( $classes ) {
	$classes = array_diff( $classes, array( 'hentry' ) );
	if ( ! is_singular() ) {
		if ( 'page' !== get_post_type() ) {
			// Adds a class for microformats v2
			$classes[] = 'h-entry';
			// add hentry to the same tag as h-entry
			$classes[] = 'hentry';
		}
	}
	return $classes;
}

add_filter( 'post_class', 'post_classes' );

 

Now the below adds microformats 2 classes to the avatar photo and to comments.

/**
 * Adds mf2 to avatar
 *
 * @param array             $args Arguments passed to get_avatar_data(), after processing.
 * @param int|string|object $id_or_email A user ID, email address, or comment object
 * @return array $args
 */
	function get_avatar_data($args, $id_or_email) {
	if ( ! isset( $args['class'] ) ) {
		$args['class'] = array( 'u-photo' );
	 } else {
		$args['class'][] = 'u-photo';
	 }
	return $args;
	}

add_filter( 'get_avatar_data', 'get_avatar_data', 11, 2 );

/**
 * Adds custom classes to the array of comment classes.
 */
function comment_classes( $classes ) {
	$classes[] = 'u-comment';
	$classes[] = 'h-cite';
	return array_unique( $classes );
}

add_filter( 'comment_class', 'comment_classes', 11 );

This allows for the simplest conversion of themes to the basic Microformats 2 structure. In the second part, we start moving into other more invasive modifications of the theme.

Timezone Offsets in WordPress Themes

There is an odd implementation detail of many themes that has created a parsing problem with timestamps. It is actually a WordPress/PHP issue. The below is an excerpt from _s(Underscores) that appears in a large amount of themes.

$time_string = sprintf( $time_string,
   esc_attr( get_the_date( 'c' ) ),
   get_the_date(),
   esc_attr( get_the_modified_date( 'c' ) ),
   get_the_modified_date()
);

The string in question is used in a generated line of HTML, which usually looks like something below.

<time datetime="2016-06-21T22:48:40+00:00">June 21, 2016</time>

A parser reading the above will read it as 10:48PM UTC/GMT. Assuming it converted that into local time, it would actually be 6:48PM EDT. However, in reality, I posted at 10:48PM Eastern Time. It just omitted the timezone offset, putting in +00:00.

The timezone offset is properly shown if you replace ‘c’ with DATE_W3C or DATE_ATOM. The alternative is to add the date in as GMT.  Without proper timezone offsets, posts will be parsed as being at the wrong time.

Related:

https://core.trac.wordpress.org/ticket/25768

https://core.trac.wordpress.org/ticket/20973

 

 

Liked Day that Ireland really took off – Aer Lingus turns 80 (independent.ie)
On May 22, 1936, Aer Lingus registered as an airline. On May 27, 1936, five days after that, the first flight took off from Dublin to Bristol. I’ve been employed by Aer Lingus for just under thirteen years. While I rarely post much about my employer…they do make it possible for me to post about other things.
Bookmarked Garry Marshall Dead: ‘Pretty Woman’ Director Was 81 by Carmel Dagan ([object Object])

Garry Marshall, who created some of the 1970s’ most iconic sitcoms including “Happy Days,” “The Odd Couple,” “Laverne and Shirley” and “Mork and Mindy” and went on to direct hit movies including “Pretty Woman” and “The Princess Diaries,” died Tuesday in Burbank, Calif. of complications from pneumonia following a stroke. He was 81. Marshall went from […]

Bookmarked 15 People Hospitalized After Carbon Monoxide Scare Following Passover Seder (newyork.cbslocal.com)

A Westchester County family had gathered for a traditional Passover meal, but carbon monoxide was an uninvited guest and 15 people ended up in the hospital.

A miracle no one was hurt. But a good reminder for you to check your carbon monoxide detectors and smoke detectors.
Replied to UNESCO says no Jewish history on Temple Mount; Hebron and Bethlehem 'Integral part of Palestine' ( The Jerusalem Post | JPost.com )

Unclear who will benefit from polemical decision.

You’ve got to be kidding me. You want to say it is contested…fine. But suggesting that there are fake Jewish graves being set up and no evidence of a Jewish presence…