IndieWebCamp NYC2 2016 is a two-day maker event for creating and/or improving your personal website. All levels welcome! One of several 2016 IndieWebCamps and the fourth IndieWebCamp in NYC!
- 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
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
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
$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="2">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
Attending this event: yes
Some opioid addicts are turning to an over-the-counter alternative to get high.
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 […]
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.