Visually indicating post types on blogs and microblogs

It’s been a while since I’ve actively read Om Malik‘s blog, but I noticed that he’s using graphical indicators that add some semantic detail about what each post is. It’s a design element I’ve only seen lately out of the IndieWeb community with plugins like the Post Kinds Plugin for WordPress or done manually with emoji in post titles the way Aaron Davis has done relatively religiously, particularly on his “Collect” site.

Om Malik is using some graphical indicators to give quick additional semantic meaning to what he’s posting.

I highly suspect that he’s using the Post Formats functionality from WordPress core to do some of this using a custom theme. Sadly it’s generally fallen out of fashion and one doesn’t see it very often any more. I suspect that it’s because WordPress didn’t take the functionality to its logical conclusion in the same way that the Post Kinds Plugin does.

The way Aaron Davis uses emoji in his posts helps to provide additional context about what is being written about to indicate what is going on in a link before it’s clicked.

I think some of my first experience with its resurgence was as helpful UI I saw suggested by Tantek Çelik on the Read page of the IndieWeb wiki. I’ve been doing it a lot myself, primarily for posts that I syndicate out to micro.blog, where it’s become a discovery function using so-called tagmoji (see books, for example), or Twitter (reads, bookmarks, watches, listens, likes). In those places, they particularly allow me to add a lot more semantic meaning to short notes/microblog posts than others do.

I do wish that having emoji for read posts was more common in Twitter to indicate that people actually bothered to read those articles they’re sharing to Twitter, the extra context would be incredibly useful. I generally suspect that article links people are sharing have more of a bookmark sentiment based on their click-bait headlines. Perhaps this is why I like Reading.am so much for finding content — it’s material people have actually bothered to read before they shared it out. Twitter adding some additional semantic tidbits like these would make it much more valuable in my mind.

It doesn’t appear that Om has taken this functionality that far himself though (at least on Twitter). Perhaps if WordPress made it easier to syndicate out content to Twitter with this sort of data attached it would help things take off?

Syndicated copies to:

Manually adding a new post kind to the Post Kinds Plugin for WordPress

An example using the infamous chicken post kind

The Post Kinds plugin, essentially an extended version of WordPress’s core Post Formats functionality, allows one to make a variety of types of posts on one’s website that mirrors the functionality provided in a huge variety of social media platforms. This is useful if you’re owning all of your own data and syndicating it out to social silos, but it’s also great for providing others better user interface for reading and consuming what you’re posting.

I’ve documented and written about it quite a bit in the past and am obviously a big fan. In addition to most of the default post types (notes, favorites, likes, bookmarks, reads, listens, etc.), my personal site also supports follows, eat, drink, wishes, acquisitions, exercise, and chickens! Wait a second… CHICKENS?!?

Yes, that’s chickens, not checkins, which I also support.

One of the nice benefits of the plugin is that it’s fantastically modular and extensible. As an exercise a few months back I thought I would take a shot at adding chicken post support to my website. Several years ago in the IndieWeb, partly as an educational exercise and partly for fun, several people thought it would be nice to add a post type of “chicken” to their sites. What would it look like? What would it entail? How might it evolve? Since then interest in chicken related posts has naturally waned, but it does bring up some interesting ideas about potential new pieces of functionality that one might want to have on their personal websites.

While I currently support many post types, I’ve discovered recently that I have a variety of notes and checkins that relate to items I’ve purchased or acquired. I thought it might be worthwhile to better keep track on my own website of things I acquired  in a more explicit way to make posting them and searching for them a lot easier. But how could I do this myself and potentially contribute it back to a broader base of other users? I started with a bit of research on how others have done this in the past and tried to document a lot of it on the Indieweb wiki. I eventually asked David Shanske to reserve the idea of acquisitions within the Post Kinds plugin, which he did, but I wondered how I might have done some of that work myself.

So below, as an example, I thought I’d write up how I’ve managed to add Chicken posts to my website. To a great extent, I’m using data fields and pieces already built into the main plugin, but in doing this and experimenting around a bit I thought I could continue to refine chicken posts until they did what I wanted, after which, I could do a pull request to the main plugin and add support for others who might want it. Hopefully the code below will give people a better idea about how the internals of the plugin work so that if they want to add their own pieces to their sites or contribute back to the plugin, things might be a tad easier.

Pieces for a new Post Kind in WordPress

Adding a new Post Kind primarily consists of three broad pieces  which I’ll address below. The modularity of the plugin makes adding most of the internals for a new kind far simpler than one might imagine.

Adding Taxonomy Support

New kinds in general will require a small handful of properties which include:

  • a name (as well as its singular, plural, and verb forms);
  • a microformats 2 property;
  • a format, so that the plugin can map the new post kind to a particular Post Format type within WordPress core so that themes which use these can be properly set when needed. Format options include: aside, image, video, quote, link, gallery, status, audio, and chat. Some post kinds may not have an obvious mapping, in which case the value can be left as empty;
  • a generic description for display within the admin user interface as well as for the archive pages for the type which are auto-generated;
  • a description-url, typically this is a link to the IndieWeb wiki that has examples and details for the particular post kind. If there isn’t one, you could easily create it and self-document your new use case. It could even be empty if necessary;
  • A show setting with a value of true or false to tell the plugin to default to showing the kind in the Post Kinds “Kinds” metabox so that the new kind will show up and be choose-able from within the interface when creating new posts.

Code to include these pieces of data will need to be added to the /includes/class-kind-taxonomy.php folder/file path within the plugin so that the plugin knows where it needs to be found.

As an example, here’s what the code looks like for the bookmark kind:

'bookmark'    => array(
	'singular_name'   => __( 'Bookmark', 'indieweb-post-kinds' ), // Name for one instance of the kind
	'name'            => __( 'Bookmarks', 'indieweb-post-kinds' ), // General name for the kind plural
	'verb'            => __( 'Bookmarked', 'indieweb-post-kinds' ), // The string for the verb or action (liked this)
	'property'        => 'bookmark-of', // microformats 2 property
	'format'          => 'link', // Post Format that maps to this
	'description'     => __( 'storing a link/bookmark for personal use or sharing with others', 'indieweb-post-kinds' ),
	'description-url' => 'http://indieweb.org/bookmark',
	'show'            => true, // Show in Settings
	),

For direct comparison, and as an explicit example for my chicken post kind, here’s the block of code I inserted within the class-kind-taxonomy.php file immediately below the section for the acquisition type:

'chicken'    => array(
	'singular_name'   => __( 'Chicken', 'indieweb-post-kinds' ), // Name for one instance of the kind
	'name'            => __( 'Chickens', 'indieweb-post-kinds' ), // General name for the kind plural
	'verb'            => __( 'Chickened', 'indieweb-post-kinds' ), // The string for the verb or action (liked this)
	'property'        => 'chicken-of', // microformats 2 property
	'format'          => 'image', // Post Format that maps to this
	'description'     => __( 'Owning all the chickens. Welcome to my chicken feed.', 'indieweb-post-kinds' ),
	'description-url' => 'https://indieweb.org/chicken',
	'show'            => true, // Show in Settings
	),

You’ll probably notice that beyond the simple cut and paste, I haven’t really changed much. Syntax aside, most of these pieces are relatively obvious and very straightforward, but I’ll add some commentary about a few parts and what they do which may not be as obvious to the beginner. When creating your own you can copy and paste this same block into the code at the bottom of the list of other types, but you’ll want to change only the data that appears within the single quotes on each of the nine lines for the various settings.

For those not familiar with microformats you may be asking yourself what snippet to add for the property setting. The best bet is to take a look at the microformats wiki or look for possible examples of people doing the same type of post you’re doing and copy their recommended microformat. For extremely new and likely experimental edge cases, chances are that you’ll need to choose your own experimental microformat name. In these instances you can use prior microformats as examples and potentially follow the format. In my case I knew about the bookmark-of, like-of, favorite-of, and the experimental read-of, listen-of, and watch-of microformats, so I followed the pattern and chose chicken-of for my experimental chicken posts. One could also potentially ask for recommendations within either the microformats IRC/chat channel or the IndieWeb chat. If you create a new and experimental one, take a few moments to document your use case in the IndieWeb and/or Microformats wikis for others who come after you. Keep in mind that if you change the property name at a later date you will need to go into your database and change the wp_postmeta database meta_key field from mf2_property1 to mft_property2 so that WordPress will know where the appropriate data is stored to be able to display it.

Our new chicken post kind is available in the post editor because show is set to true

The show setting is fairly straightforward, but may not be as obvious to some. It has either a value of true or false. If the value is false, the new post kind won’t be displayed in the radio button options within the admin UI for creating new posts. If the value is true, then it will be available. The Post Kinds plugin has a number of reserved post kinds which aren’t displayed by default on most sites–primarily because they do not have appropriate views or data fields defined–but they could be enabled by changing the show flag from false to true. Most often we recommend you only show those kinds that you’re actively using.

Additional examples of the dozen or more standard post kinds can be found within the code to provide some additional potential clarity on what types of data each of them are expecting.

I debated a while on making the verb ‘chickened out’ instead of ‘chickened,’ but I chickened out thinking that it would make my posts something wholly different. Obviously you can now make your own choice.

With this chunk of code saved into the plugin, it is now generally aware of the new post kind and can save the appropriate data for this new kind of post.

Template/View Support

Now you’ll want to add some code to the plugin to tell the plugin how it should display the data it’s saving for your posts. The easiest way to do this is to copy and paste the code from one of the many default views already in the plugin and just change a few small pieces of data to match your post kind. This code can be created as a new file with your new matching post kind name (the one at the top of your code snippet above that appears on line 1 before the word ‘array’) in one of two places. If you put it in the views folder in the plugin, you may need to re-add it later on if the plugin updates. Otherwise you can add the code into a file which can be placed into a folder named kind_views in either the folder for your theme (or your child theme, if you have one.) We recommend placing it in your child theme, so if the parent theme updates, your code won’t accidentally be lost.

There are a variety of views for many post kinds available to stand as examples, so you can look at any of these and tweak them as you wish to get the output you desire. For more complicated output displays it might certainly help to have some PHP coding skills. For my chicken post kind I simply copied and pasted the code for the bookmark kind view and pasted it into a file named kind-chicken.php following the naming convention of the other files.

Below is a copy of the code I added for the chicken post kind which is nearly identical to the bookmark view with exception of changing the name of the template, adding u-chicken-of and changing the get_before_kind to chicken instead of bookmark. Note that because the chicken-of microformat is wrapped on a URL, it has the u- prefix, otherwise if it were on plain text it would have been p-chicken-of using the standard microformat h-, u-, p-, and e- syntax.

I also put both the u-chicken-of and the u-bookmark-of microformats in the view so that sites using the post type discovery algorithm that don’t recognize the chicken-of microformat won’t choke on the proverbial chicken bone, but will default back to thinking this post is of the bookmark type. I suspect that I could also have left the u-bookmark-of off and many would have defaulted to thinking this post was a simple note as well. You can make your own choice as to which you prefer as a default.

<?php
/*
 * Chicken Template
 *
 */

$mf2_post = new MF2_Post( get_the_ID() );
$cite     = $mf2_post->fetch();
if ( ! $cite ) {
	return;
}
$author = Kind_View::get_hcard( ifset( $cite['author'] ) );
$url    = ifset( $cite['url'] );
$embed  = self::get_embed( $url );

?>

<section class="response u-chicken-of h-cite">
<header>
<?php
echo Kind_Taxonomy::get_before_kind( 'chicken' );
if ( ! $embed ) {
	if ( ! array_key_exists( 'name', $cite ) ) {
		$cite['name'] = self::get_post_type_string( $url );
	}
	if ( isset( $url ) ) {
		echo sprintf( '<a href="%1s" class="p-name u-url">%2s</a>', $url, $cite['name'] );
	} else {
		echo sprintf( '<span class="p-name">%1s</span>', $cite['name'] );
	}
	if ( $author ) {
		echo ' ' . __( 'by', 'indieweb-post-kinds' ) . ' ' . $author;
	}
	if ( array_key_exists( 'publication', $cite ) ) {
		echo sprintf( ' <em>(<span class="p-publication">%1s</span>)</em>', $cite['publication'] );
	}
}
?>
</header>
<?php
if ( $cite ) {
	if ( $embed ) {
		echo sprintf( '<blockquote class="e-summary">%1s</blockquote>', $embed );
	} elseif ( array_key_exists( 'summary', $cite ) ) {
		echo sprintf( '<blockquote class="e-summary">%1s</blockquote>', $cite['summary'] );
	}
}

// Close Response
?>
</section>

<?php

Icon Support

Finally, you’ll want to include the appropriate svg icon within the plugin so that it will display on the post (if the appropriate settings are chosen within the plugin’s settings interface: either “icon” or “icon and text”), and within the Kinds metabox in the post editor.

You’ll want to have one icon named kindname.svg in the svgs folder and another named kinds.svg in the plugin’s root folder. The kinds.svg is a special ‘master’ svg of all of the kinds icons bundled together. If it helps in matching the icon set, all of the current kind icons are made with Font Awesome icons which have the appropriate licensing for distribution.

In my chicken example, I opted for the feather icon since Font Awesome didn’t have an actual chicken available.

When you’re done

Thanks to the rest of the plugin’s functionality, you should now automatically be able able to make and display individual chicken posts, display a chicken feed (pun intended), and allow people to subscribe to the RSS feed of your chicken posts.

Creating a plugin for new kinds

Naturally some people may want to display particular exotic kinds which might not extend to the broader public. A chicken post type certainly falls under this umbrella as I wouldn’t expect that other than for novelty, obsessive IndieWeb post kinds completeness, or for a very small handful of specialized farming, juggling, or comedy websites that anyone else in their right mind would really want to be doing a lot of posting about chickens on their site.

David Shanske, the plugin’s creator, has made it possible to create a sub-plugin of sorts so that one can add one-off support to these types using  a variety of filters and functions. This could be useful so that updates to the plugin don’t overwrite one’s work and require adding the pieces outlined above back in again. Sadly, this is a tad beyond my present abilities, so I won’t address it further at the moment other than to say that it’s possible and perhaps someone might document it for others to use a similar template in the future.

Try it yourself

Now that you’ve got the basics, it should be relatively easy to add many of your own new post kinds.

Exercise One

If you want a simple exercise, you should be able to go into the code and manually change the show flags for the eat and drink kinds from their default false to true to enable posting food to create a food diary on your website. (These have a reasonable default view and icons already built in.)

Exercise Two

With slightly more work you can change the show flag on the follow kind and copy a view based on the bookmark view to make a follow view to make follow posts. (Here’s a link to my version.) Similarly other hidden kinds like wishes and acquisitions can be enabled easily as well. These also have default icons already built in, but just need a view defined to show their data.

Exercise Three

If you want a slightly larger challenge that uses all of the above, why not attempt adding the appropriate machinery to create a want post?

Exercise Four

Though David has often said before that he wouldn’t build in support for multi-kinds, some people may still want them or think they need them. If you’re exceptionally clever, you might be able to create your own explicit multi-kind by mixing up the details above and creating a kind that mixes a variety of the details and creates a view that would allow the specific multi-kind you desire. Caveat emptor on this approach if you should take it.

Share your ideas

Now that you’ve got the general method, what kinds are you going to deploy in the future? What have you already created? Feel free to reply with your ideas and thoughts below in the comment section or send us a webmention from your own site with what you’ve done. Maybe consider doing a pull request on the plugin itself to add the functionality for others?
​​​​​​​​​

Syndicated copies to:

Post Kinds Plugin for WordPress

A WordPress plugin that allows you to easily create a huge variety of social media post types to own your social media life online.

Post Types

Within the broader social media world there are a huge variety of types of posts. These range from common articles to status updates to likes or favorites to more varied post types like photos, bookmarks, RSVPs, checkins, videos, reviews, jams, reads, audio, exercise, food, recipes, and even an exotic and rare chicken post type. While this list barely scratches the surface, the IndieWeb wiki has an almost exhaustive list along with examples.

Many social platforms sub-specialize in only one specific post type while others provide support for multiple types. Here are some common examples:

  • Twitter: status updates
  • Instagram: photos, videos
  • Facebook: status updates, articles, photos, videos, links, events, life events, checkins, emotions
  • LinkedIn: status updates, articles,  résumés
  • Tumblr: text, photo, quote, link, chat, audio and video
  • Swarm/FourSquare: checkins
  • Last.fm: listens (aka scrobbles)
  • Pinboard: bookmarks
  • GoodReads: reads

Wouldn’t it be better to have a single personal website where you could post all these types of content easily and quickly?!

For a few years now, I’ve been posting these and many other types of posts on my personal website. When it’s appropriate I crosspost many of them to the social media silos that support these types so that friends, family, and colleagues can subscribe to them in the way that’s easiest for them.

Post Kinds Plugin

The simple meta box the Post Kinds Plugin displays for choosing what kind of post one is creating.

The Post Kinds Plugin for WordPress attempts to make it much easier to create customized displays for and format each of these types of posts (and many more). It leverages the flexibility and power of WordPress to be your single social media hub while, along with other IndieWeb friendly plugins, still allowing you to interact with other social networks.

Post Kinds Plugin not only indicates in the metadata what each post type is, but provides each post with some contextualization as well as the appropriate microformats classes to make it easier for other sites or parsers to interpret these posts. In short it helps to make status updates look like status updates; favorites appear like favorites; (schnozzberrys look like schnozzberrys); and RSVPs look like RSVPs in keeping with common user interfaces on many social platforms. (And in case you didn’t know, you can now post an RSVP on your own website and send a notification to posts elsewhere on the web of your intention!)

Post Kinds Plugin is different from WordPress’s Post Formats functionality

This sounds a little bit like the WordPress theme specific functionality of Post Formats, doesn’t it? Yes and resoundingly no!

Post Formats was a WordPress feature introduced in version 3.1, ostensibly to compete with other social platforms like Tumblr which offers the explicit post types of text, photo, quote, link, chat, audio and video.

The interface for choosing particular post types from within Tumblr.
WordPress Post Format meta box with all of the available post types. Note that it’s far more limited than the options for Post Kinds.

Within WordPress, post formats are available for users to choose from if the theme enables support for them. And typically if they do support them they often provide specific display outputs and CSS styling that are controlled by the theme, often to make them look like what users have come to expect these post types to look like on other social media platforms. As an example, a “Status” post would typically display a short update which doesn’t include a title. Each theme that supports post formats chooses which ones they support, how to display them, and they can vary quite a bit from one theme to the next.

Below is the list of the nine supported formats with brief descriptions of their purpose taken from the WordPress codex:

  • aside – Typically styled without a title. Similar to a Facebook note update.
  • gallery – A gallery of images. Post will likely contain a gallery shortcode and will have image attachments.
  • link – A link to another site. Themes may wish to use the first <a href=” “> tag in the post content as the external link for that post. An alternative approach could be if the post consists only of a URL, then that will be the URL and the title (post_title) will be the name attached to the anchor for it.
  • image – A single image. The first <img /> tag in the post could be considered the image. Alternatively, if the post consists only of a URL, that will be the image URL and the title of the post (post_title) will be the title attribute for the image.
  • quote – A quotation. Probably will contain a blockquote holding the quote content. Alternatively, the quote may be just the content, with the source/author being the title.
  • status – A short status update, similar to a Twitter status update.
  • video – A single video or video playlist. The first <video width=”300″ height=”150″> tag or object/embed in the post content could be considered the video. Alternatively, if the post consists only of a URL, that will be the video URL. May also contain the video as an attachment to the post, if video support is enabled on the blog (like via a plugin).
  • audio – An audio file or playlist. Could be used for Podcasting.
  • chat – A chat transcript

There is anecdotal evidence that the WordPress Post Format functionality is slowly falling out of favor and there hasn’t been much, if any, change in how the feature works in the past several years.

The Post Kinds Plugin in many respects picks up where Post Formats left off, extends them significantly, and also builds a stronger platform for more modern website to website interactions.

Plugin Display

The Post Kinds Plugin out of the box generally does an excellent job of styling with some generic CSS to make these various post types look and behave as one expects without any changes or modifications to one’s theme. However, designers are more than welcome to either customize their CSS to their hearts’ content, or, if they prefer, they can manually code specific template views to override the plugin’s original views within their theme or child theme. To do this the plugin looks for a subfolder (or directory) within the theme entitled kind_views and uses those templates instead.

Microformats

Because, in part, the Post Kinds Plugin is designed for use with IndieWeb philosophies in mind, it has built in microformats support. What are microformats? They’re simple semantic classes added to the HTML of one’s site that allow parsers or other programs to read the data on your posts and pages to provide extended or increased functionality. WordPress’s core functionality already includes some microformats version 1 support; Post Kinds Plugin extends this quite a bit and uses the more modern version 2 specifications. Because Post Kinds takes care of these additional microformats, some older themes will have a leg up in the IndieWeb space despite having either limited or no theme support.

As an example using the reply post kind, the context from the site for which the particular post is actually a reply to is wrapped with the semantic class “p-in-reply-to”. As an example of the extended functionality provided by microformats, if one is using the Webmentions Plugin to send a webmention to the post that is being replied to, that remote site can parse the reply and display it properly as a reply in their comments section. (For WordPress sites receiving these webmentions, they can utilize the parser built into the Semantic Linkbacks Plugin.)

Similarly, bookmarklets, feed readers, or other programs could utilize these microformats and the data on your page to create customized views and displays.

Plugin Installation and Configuration

Installation of the plugin is relatively straightforward. From the Plugin tab in the WordPress admin interface, one can click the Add New button at the top of the page and either search for the plugin within the repository and install and activate it, or they can use the Upload Plugin button and install it from a prior download from either the WordPress repository or from the GitHub repository.

Options for installing the Post Kinds Plugin from the administrative interface within WordPress.

Configuration can be done from the Settings tab within the WordPress admin interface or, if the IndieWeb Plugin is installed, the settings can be found under IndieWeb » Post Kinds tabs in the admin interface.

Within the settings you can choose the post kinds you wish to enable on a particular site–not all sites will necessarily need or even want all types. I recommend only enabling the specific kinds you will actively be using; you can always come back and add additional types in the future. Some types may be enabled by other specific plugins that work in conjunction with Post Kinds Plugin.

Post Kinds Settings
Click the appropriate check boxes for the kinds of posts you’d like to enable on your personal website.

Not having a post kind enabled will not disable the functionality on existing posts, it only hides the selection in adding new posts. This way if you enable favorites as a type and only use it a few times before deciding to disable it, the old posts will still exist and display properly.

You can also enable a Default Kind for New Posts. Most people will likely choose Article which is the default, but if your site is primarily used like a microblog for short status updates, then obviously Note may be your best default. Are you building a linkblog? Then you could enable the Bookmark kind.

How to use Post Kinds in practice

So how does this all actually work for creating posts?

Let’s start with a simple example. Let’s say I read a lot online and I’d like to have a linkblog of all of the articles I read. Let’s say I’m reading the article Lyme Disease’s Worst Enemy? It Might Be Foxes in the New York Times. I’d like to start out by creating a read post to indicate to those following me that I’ve read this particular article.

While I could do it manually, typically I’ll use a custom bookmarklet (more on how to do this shortly), which I click on in my browser bar as I read the article. The bookmarklet will create a new WordPress post and automatically fill in the URL of the article into the “Post Properties” metabox created by the Post Kinds Plugin in the admin UI of my WordPress site.

The Post Properties meta box in the administrative user interface in WordPress. The URL for the post can be either automatically included or manually filled in.

Then, I will click on the blue Retrieve button (pictured above) just under the post’s URL. The Post Kinds Plugin will parse the New York Times article page for either explicit metadata or Open Graph data to fill in some context about the article I’m reading in the Post Properties meta box. The main tab will autofill with the Name/Title of the article, a Summary/Quote of the article, and Tags if available. Similarly the other tabs in the Post Properties meta box including Details, Author, and Other will fill in with any available metadata about the Lyme disease post I’m reading.

In this particular example, the Times didn’t do a good job on the author data, so I’ll go to that tab and manually cut/paste the author’s name into the Author/Artist Name field, their URL into the Author/Artist URL field, and (optionally) the URL for their photo image as well. If other fields are improperly filled out or you would like to change them, one can manually adjust them if necessary. Not all kinds need (or show) all theses metadata fields when they’re ultimately published.

After retrieving the metadata most of the appropriate fields in the Post Properties box should be filled out. Here we see the “Main” tab filled in.
The Details tab of the Post Properties meta box.
The Author tab of the Post Properties meta box.

The retrieve button will also attempt to fill in an appropriate post Title into the posts’ field for that, but it can be modified manually if necessary. On many post kinds, though one may fill in an explicit (traditional WordPress post) title, it may not display on the final post because an explicit title isn’t really needed and the Post Kinds Plugin won’t display it. The note kind is a particular example of this behaviour.

Now that the contextual part of the post I’m reading is handled, I can, if I choose, add any notes, quotes, thoughts, or other personal data about what I’ve read into the main text box for the particular post.

The bookmarklet should have automatically set the post kind selector in the Kind metabox to Read and, if available, the older WordPress post format to link. (These can be changed or overridden manually if necessary.) Post Kinds does its best to properly and appropriately map Post Kinds to Post Formats, but the relationship isn’t always necessarily one-to-one and there are obviously many more kinds available than there are post formats.

Finally, the article can be published (unless you want to add any additional metadata to your post for other plugins or needs.)

Now I can also go to the URL of my personal site at http://example.com/kind/read/ where I can find an archive of this and all the posts I’ve read in the past.

A screen capture of what the final “Read” post looks like on my site. (Note that it may look slightly different depending on your theme and other customizations.)

Other post kinds work relatively similarly, though some may take advantage of other appropriate metadata fields in the Post Property meta box. (For example RSVPs use the RSVP dropdown field within the Other tab in the Post Property box.)

Custom feeds for Post Kinds

For sites adding lots of different post kinds all at once, the extra possible “noise” in one’s RSS feeds may have the potential to turn a site’s subscriber’s off. Fortunately the plugin also has custom RSS feeds for each of the particular post kinds which follows a particular format. As an example, the RSS feed for all the posts marked as “Note”,  could be found at either the URL http://www.example.com/kind/note/feed
or http://www.example.com/feed/?kind=note (if one doesn’t have pretty permalinks enabled). Other feeds can be obtained by replacing “note” with the base names of the other kinds (reply, article, etc.).

Archive Displays

Post Kinds Plugin also handles the display of archives for individual post kinds. To view all the posts marked as notes, for example, one could visit the URL http://www.YOURSITE.COM/kind/note/. Simply replace YOURSITE.COM with your particular site name and the particular post kind name to access the others. In some areas of the social media world, this particular archive display of notes might be considered a personal Twitter-like microblog.

Bookmarklet Configuration

For Post Kinds Plugin users who like the simplicity and ease of use of bookmarklets, one can add ?kindurl=URL to their post editor URL and it will automatically fill this into the URL box in post properties. Adding ?&kind=like to the post editor URL will automatically set the kind.

As a full example, the URL pattern https://www.example.com/wp-admin/post-new.php?kindurl=URL&kind=like will automatically create a new post, set the post kind as like and auto-import the permalink URL for the page into the URL field of the Post Properties meta box.

The following code could also be used as a template to create a full set of browser bookmarklets. (Keep in mind the base URL example.com will need to be changed to the base URL of your personal site for it to work properly. One would also change the word bookmark in the code to any of the other types.)

javascript:(function(a,b,c,d){function e(a,c){if("undefined"!=typeof c){var d=b.createElement("input");d.name=a,d.value=c,d.type="hidden",p.appendChild(d)}}var f,g,h,i,j,k,l,m,n,o=a.encodeURIComponent,p=b.createElement("form"),q=b.getElementsByTagName("head")[0],r="_press_this_app",s=!0;if(d){if(!c.match(/^https?:/))return void(top.location.href=d);if(d+="&kindurl="+o(c),c.match(/^https:/)&&d.match(/^http:/)&&(s=!1),a.getSelection?h=a.getSelection()+"":b.getSelection?h=b.getSelection()+"":b.selection&&(h=b.selection.createRange().text||""),d+="&buster="+(new Date).getTime(),s||(b.title&&(d+="&t="+o(b.title.substr(0,256))),h&&(d+="&s="+o(h.substr(0,512)))),f=a.outerWidth||b.documentElement.clientWidth||600,g=a.outerHeight||b.documentElement.clientHeight||700,f=800>f||f>5e3?600:.7*f,g=800>g||g>3e3?700:.9*g,!s)return void a.open(d,r,"location,resizable,scrollbars,width="+f+",height="+g);(c.match(/\/\/(www|m)\.youtube\.com\/watch/)||c.match(/\/\/vimeo\.com\/(.+\/)?([\d]+)$/)||c.match(/\/\/(www\.)?dailymotion\.com\/video\/.+$/)||c.match(/\/\/soundcloud\.com\/.+$/)||c.match(/\/\/twitter\.com\/[^\/]+\/status\/[\d]+$/)||c.match(/\/\/vine\.co\/v\/[^\/]+/))&&e("_embeds[]",c),i=q.getElementsByTagName("meta")||[];for(var t=0;t<i.length&&!(t>200);t++){var u=i[t],v=u.getAttribute("name"),w=u.getAttribute("property"),x=u.getAttribute("content");x&&(v?e("_meta["+v+"]",x):w&&e("_meta["+w+"]",x))}j=q.getElementsByTagName("link")||[];for(var y=0;y<j.length&&!(y>=50);y++){var z=j[y],A=z.getAttribute("rel");("canonical"===A||"icon"===A||"shortlink"===A)&&e("_links["+A+"]",z.getAttribute("href"))}b.body.getElementsByClassName&&(k=b.body.getElementsByClassName("hfeed")[0]),k=b.getElementById("content")||k||b.body,l=k.getElementsByTagName("img")||[];for(var B=0;B<l.length&&!(B>=100);B++)n=l[B],n.src.indexOf("avatar")>-1||n.className.indexOf("avatar")>-1||n.width&&n.width<256||n.height&&n.height<128||e("_images[]",n.src);m=b.body.getElementsByTagName("iframe")||[];for(var C=0;C<m.length&&!(C>=50);C++)e("_embeds[]",m[C].src);b.title&&e("t",b.title),h&&e("s",h),p.setAttribute("method","POST"),p.setAttribute("action",d),p.setAttribute("target",r),p.setAttribute("style","display: none;"),a.open("about:blank",r,"location,resizable,scrollbars,width="+f+",height="+g),b.body.appendChild(p),p.submit()}})(window,document,top.location.href,"http:\/\/example.com\/wp-admin\/post-new.php?kind=bookmark");

Development / Issues

Development for the Post Kinds Plugin takes place on GitHub. While users can certainly report issues/bugs on the page for the WordPress plugin, the developer actively watches the issue queue on GitHub and problems will be seen (if not resolved) there more quickly.

List of available Post Kinds

Now that we’ve seen a few examples and gotten things set up, let’s take a brief look at all of the Post Kinds that are available. To make things a bit easier, we’ll break them up into four groups based on some shared qualities.

The Non-Response Kinds

These kinds have an analog in WordPress’s original post formats. Adding context to one of these may make it a passive kind.

  • Article – traditional long form content – a post with an explicit post title
  • Note – short content or status update – a post with just plain content and usually without an explicit post title
  • Photo – a post with an embedded image as its primary focus. This uses either the featured image or attached images depending on the theme.
  • Video – a post with an embedded video as its primary focus
  • Audio – a post with an embedded sound file as its primary focus

The Response Kinds

Response kinds differ from the non-response in that they are usually intended to be interactions with other external sites. For the best experience and improved functionality with these post kinds, it is recommended, but not required, that one have the Webmentions and the Semantic Linkbacks Plugins installed and activated. Doing so will send notifications of the replies and other interactions to those external sites which often display them. (These help your site work just like replies and mentions do on many other social media platforms, they just do so in distributed ways, so that neither you nor your friends necessarily need to be on the same platform or content management system to communicate.)

  • Reply – used for replying to someone else’s post
  • Repost – a complete repost of someone else’s content
  • Like – compliments to the original post/poster
  • Favorite – content which is special to the favoriter
  • Bookmark – this is basically sharing/storing a link/bookmark.
  • Quote – quoted content
  • RSVP – a specific type of reply regarding attendance of an event

The Passive Kinds

To “Scrobble” a song is to make a related post on your website when listening to it. This is the most well-known example of a passive kind of post. These kinds are formed by having content in the context box on one of these types of posts.

  • Listen – scrobble – listening to an audio post
  • Jam – Indicates a specific personally meaningful song
  • Watch – watching a video
  • Play – playing a game
  • Read – reading a book, magazine, or other online material

Reserved Kinds

The following kinds are reserved for future use within the plugin but will not currently show up in the interface unless enabled directly within the code. In some cases, these kinds don’t have the appropriate metadata fields within the plugin to make them user friendly without significant work.

  • Wish – a post indicating a desire/wish. The archive of all of these posts would be a wishlist, such as a wedding, birthday, or gift registry.
  • Weather – a weather post would be about current weather conditions
  • Exercise – represents some form of physical activity
  • Trip – represents a trip or journey and would require location awareness
  • Itinerary – refers to scheduled transit, plane, train, etc. and does not generally require location awareness
  • Check-In – identifying you are at a place. This would use the extended WordPress Geodata. It will require the Simple Location Plugin or something equivalent to add location awareness to posts. Some people are beginning to use this with the OwnYourSwarm application, which may require further configuration of your site to work properly.
  • Tag – allows you to tag a post as being of a specific tag, or person tagging.
  • Eat – for recording what you eat, perhaps for a food diary
  • Drink – similar to Eat, but for beverages
  • Follow – a post indicating you are now following someone’s activities (online)
  • Mood – feelings or emotions you’re having at the time of posting
  • Recipe – ingredients and directions for preparing food or other items
  • Issue – an article post that is typically a reply to some source code, though potentially anything at a source control repository
  • Event – a post kind that in addition to a post name (event title) has a start datetime, (likely an end datetime), and a location.

Additional Examples

If you’re reading this on my personal website, you can click on and view a variety of these post kinds described above to give you an idea of what they look like (and how they function with respect to Webmentions and other IndieWeb functionalities).

Go Forth and Post All the Things!

I’ve tried to cover as much of the basics of the plugin and provide some examples and screenshots to make things easier, but as always, there are ways to do additional custom configuration under the hood. I’m sure there are also off-label uses of the plugin to get it to do things the creator didn’t intend.

For additional details, one is certainly encouraged to skim through the code. If you have specific questions or problems, you can usually find the developer of the plugin and many of its users in the IndieWeb chat (web chat, IRC, Slack, etc.) for possible real-time help or support, or you can post questions or issues at the GitHub repo for the project.

Post all the things

Thanks

Special thanks to David Shanske for creating and doing a stellar job of maintaining the Post Kinds Plugin. Additional thanks to those in the IndieWeb community who continue to refine and revise the principles and methods which make it constantly easier for people to better own and control their social lives online by owning their own websites and data.

​​​

Syndicated copies to:

Browser Bookmarklets and Mobile Sharing with Post Kinds Plugin for WordPress

Making it easier to post to WordPress on desktop and mobile

The Post Kinds Plugin

I’ve been using David Shanske’s excellent WordPress plugin Post Kinds, which is conveniently bundled into the IndieWeb Plugin, for more than a year now. (Update: I’ve also written a fairly in-depth primer for it.)

Much like WordPress’s native post formats (standard, aside, image, quote, link, status, audio, etc.) which were introduced in v3.1, Post Kinds instead provides a better mapping of post types across a larger variety of social media types (article, bookmark, favorite, itinerary, jam, like, listen, note, photo, play, read, reply, repost, watch, and more). In addition to changing the visual layout and formatting of most posts, the plugin also importantly includes the correct microformat classes for each of these post types and this enables a lot of other fantastically important functionality for the open web.

Custom URLs for Post Kinds

One of the problems I had with using it initially was taking the extra time to cut and paste in the several pieces of additional data or fill in meta data to make a post. It was particularly painful in a mobile setting. I was thrilled when David mentioned that he’d built in some customized query parameters which could take URLs to import in much of the data as well as to set the correct post kind automatically. They came with the general format of

http://example.com/wp-admin/post-new.php?kind=bookmark&kindurl=@url

where one could replace @url with the target URL of the site to be bookmarked, for example. Replacing bookmark with the appropriate post kind name would allow one to set the flag for each post to the proper post kind automatically, and naturally one should replace example.com with the base URL for their site.

Putting this customized URL into a browser will create a new post in one’s website admin UI and Post Kinds will automatically set the URL and scrape its meta data. One can then modify any additional data or add a comment and then publish quickly and easily.

As a concrete example, I would put the following URL in my browser of choice to “like” the Post Kinds Plugin page:
http://www.boffosocko.com/wp-admin/post-new.php?kind=like&kindurl=https://wordpress.org/plugins/indieweb-post-kinds/

Browser Bookmarklets

I am a huge fan of browser bookmarklets, so for a while I’ve been meaning to create some for the post kinds I use to better automate my post process. After dragging my feet for ages, particularly because my JavaScript skills are nearly non-existent, I’ve finally gotten around to adapting the common WordPress “Press This” bookmarklet to work with Post Kinds.

Below is the modified code that can be put into a bookmarklet to allow for easily bookmarking a particular post:

javascript:(function(a,b,c,d){function e(a,c){if("undefined"!=typeof c){var d=b.createElement("input");d.name=a,d.value=c,d.type="hidden",p.appendChild(d)}}var f,g,h,i,j,k,l,m,n,o=a.encodeURIComponent,p=b.createElement("form"),q=b.getElementsByTagName("head")[0],r="_press_this_app",s=!0;if(d){if(!c.match(/^https?:/))return void(top.location.href=d);if(d+="&kindurl="+o(c),c.match(/^https:/)&&d.match(/^http:/)&&(s=!1),a.getSelection?h=a.getSelection()+"":b.getSelection?h=b.getSelection()+"":b.selection&&(h=b.selection.createRange().text||""),d+="&buster="+(new Date).getTime(),s||(b.title&&(d+="&t="+o(b.title.substr(0,256))),h&&(d+="&s="+o(h.substr(0,512)))),f=a.outerWidth||b.documentElement.clientWidth||600,g=a.outerHeight||b.documentElement.clientHeight||700,f=800>f||f>5e3?600:.7*f,g=800>g||g>3e3?700:.9*g,!s)return void a.open(d,r,"location,resizable,scrollbars,width="+f+",height="+g);(c.match(/\/\/(www|m)\.youtube\.com\/watch/)||c.match(/\/\/vimeo\.com\/(.+\/)?([\d]+)$/)||c.match(/\/\/(www\.)?dailymotion\.com\/video\/.+$/)||c.match(/\/\/soundcloud\.com\/.+$/)||c.match(/\/\/twitter\.com\/[^\/]+\/status\/[\d]+$/)||c.match(/\/\/vine\.co\/v\/[^\/]+/))&&e("_embeds[]",c),i=q.getElementsByTagName("meta")||[];for(var t=0;t<i.length&&!(t>200);t++){var u=i[t],v=u.getAttribute("name"),w=u.getAttribute("property"),x=u.getAttribute("content");x&&(v?e("_meta["+v+"]",x):w&&e("_meta["+w+"]",x))}j=q.getElementsByTagName("link")||[];for(var y=0;y<j.length&&!(y>=50);y++){var z=j[y],A=z.getAttribute("rel");("canonical"===A||"icon"===A||"shortlink"===A)&&e("_links["+A+"]",z.getAttribute("href"))}b.body.getElementsByClassName&&(k=b.body.getElementsByClassName("hfeed")[0]),k=b.getElementById("content")||k||b.body,l=k.getElementsByTagName("img")||[];for(var B=0;B<l.length&&!(B>=100);B++)n=l[B],n.src.indexOf("avatar")>-1||n.className.indexOf("avatar")>-1||n.width&&n.width<256||n.height&&n.height<128||e("_images[]",n.src);m=b.body.getElementsByTagName("iframe")||[];for(var C=0;C<m.length&&!(C>=50);C++)e("_embeds[]",m[C].src);b.title&&e("t",b.title),h&&e("s",h),p.setAttribute("method","POST"),p.setAttribute("action",d),p.setAttribute("target",r),p.setAttribute("style","display: none;"),a.open("about:blank",r,"location,resizable,scrollbars,width="+f+",height="+g),b.body.appendChild(p),p.submit()}})(window,document,top.location.href,"http:\/\/example.com\/wp-admin\/post-new.php?kind=bookmark");
Browser bookmarklets for Post Kinds

Other versions of the bookmarks can easily be made for all the other other Post Kinds by replacing the two red highlighted portions of the code sample appropriately for each one. Specifically one should exchange bookmark with the name of the kind desired (all of them should be in lowercase) and replace example.com with one’s own domain name.

For simplicity, I’m including a sample/template bookmarklet button below which can be dragged and dropped into most browser bars. Before using it, edit the JavaScript as described above and paste it into the URL box. I’m happy to help those who may have problems. I’ve included a screen capture of what all of them look like once they’re set up and configured with matching emoji added into the titles to assist in visual selection.

🔖 Bookmark

Perhaps I (or someone else enterprising) would contribute all this back into the plugin repository for Post Kinds so that these bookmarklets would be self-generated for plug and play usage within the admin interface for the plugin the way the bookmarklets are for the IndieWeb plugin’s PressThis bookmarklets, perhaps at /wp-admin/admin.php?page=kind_options.

A Post Kinds “Bookmarklet” for Mobile

For those who would like something similar to the above for use on mobile platforms (and particularly Android) I’ve written up some instructions below which allow one to use the Android app URL Forwarder to use the ubiquitous mobile “share” functionality from most pages and/or apps in a way similar to this bookmarklet functionality. (This is based in part on some work by Ryan Barrett and some work I’d written up for the Known CMS a while back.)

I’d suspect that there’s also a similar app for iOS, but I haven’t checked. If not available, URL Forwarder is open source on Github and could potentially be ported. There’s also a similar Android app called Bookmarklet Free which could be used instead of URL Forwarder.

Configuring URL Forwarder for Post Kinds

  1. Open URL Forwarder on your phone
  2. Click the “+” button to create a filter.
  3. Give the filter a name, “Bookmark” for the bookmark version. (See photo below.)
  4. Use the following entry for the “Filter URL” replacing example.com with your site’s domain name: http://EXAMPLE.com/wp-admin/post-new.php?kind=bookmark&kindurl=@url
  5. Leave the “Replaceable text” as “@url”
  6. Finish by clicking on the checkmark in the top right corner.
  7. Repeat the above for the other desired post types but replacing “bookmark” with the lower case names of those other types.

Simple right?

Creating a post via mobile

With the configuration above set up, do the following:

  1. On the mobile page one wants to bookmark, like, favorite, etc., click the ubiquitous “share this” mobile icon (or share via a pull down menu, depending on your mobile browser or other app.)
  2. Choose to share through URL Forwarder
  3. Click on the “bookmark” option just created above (or other option as necessary for the desired post type).
  4. Change/modify any meta data within your website administrative interface or add any additional thoughts and publish. (This part is the same as one would experience using the desktop bookmarklet.)

Happy posting!

Syndicated copies to:

RSS Feeds on BoffoSocko.com

A Follow up on My IndieWeb Commitment 2017

Over the past two years I’ve been owning more and more of the data that I used to sharecrop into various social media silos. Instead of posting it to those sites which I don’t own, don’t control, and can’t rely on them staying up forever, I’m posting on my own site first and when it seems worthwhile, I’m syndicating my content back out to them to take advantage of their network effects.

A Crowded Stream

As a result of owning all this data, my blog/site has become MUCH more active than it had been before. (It’s also been interesting to see just how much data I’d been giving to social media sites.) This extra activity has caused a few to tip me off that they’re seeing a lot of email notifications and additional material in their RSS feeds that they’re not used to seeing (and may not necessarily care about). So rather than risk them unsubscribing from everything and allow them to receive what they’re used to seeing, I’ve spent some time in the last couple of days to work on my IndieWeb Commitment 2017 which was to:

Fix my site’s subscription/mail functionality so that I can better control what current subscribers get and allow for more options for future subscribers.

Because a lot of the recent additions to my site have been things like owning all my Instagram posts, my bookmarks, what I’m watching, updates about books I’m reading, and links to everything I’ve been reading online, I’ve been using a category on the site called “Social Stream” with each of these posts as sub-categories. In most cases, social stream could be synonymous with microblog to some extent though it covers a broader range of content than just simply Twitter-like status updates.

Filtering Social Stream Posts out of My Email Subscriptions

I added a filter in my functions.php file for the JetPack-based plugin that prevents my site from emailing those who have used the JetPack subscription service from receiving emails for each and every post in those categories.

I had previously been preventing some of these emails from firing on a manual basis, but with their increased frequency, it was becoming unsustainable.

For those interested, the code and some useful tips can be found at the JetPack site. A copy of the specific code I’m currently using in my functions.php file appears below:

add_filter( 'jetpack_subscriptions_exclude_these_categories', 'exclude_these' );
function exclude_these( $categories ) {
$categories = array( 'social-stream');
return $categories;
}

More Flexible RSS Feeds and Discovery

For future subscribers, I wanted to allow some easier subscription options, particularly when it comes to RSS. Fortunately WordPress does a pretty good job of not only providing RSS feeds but makes them relatively configurable and customizeable with good documentation. [1] [2]

Custom URLs for RSS Syndication and .htcacess Modifications

I wanted to create a few human-readable RSS feed names and feeds including:

With somewhat canonical feed URLs, I can always change where they point to in the future. To do this and have them map over into the actual feeds for these things, I did a bit of remapping in my .htaccess file based on some thoughts I’d run across recently.  The code I used appears below:

# BEGIN rss
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^rss\.xml$ "/feed?cat=-484"[L,R]
RewriteRule ^microblog\.xml$ "/feed?cat=484"[L,R]
RewriteRule ^articles\.xml$ "/feed?kind=article"[L,R]
RewriteRule ^instagram\.xml$ "/feed?cat=936"[L,R]
RewriteRule ^linkblog\.xml$ "/feed?cat=964,945"[L,R]
RewriteRule ^read\.xml$ "/feed?cat=945"[L,R]
RewriteRule ^math\.xml$ "/feed?cat=10"[L,R]
RewriteRule ^informationtheory\.xml$ "/feed?cat=687"[L,R]
RewriteCond %{Query_STRING} ^$
RewriteRule ^feed$ "/rss.xml" [L,R]
</IfModule>
# END rss

Each of the cat=### are the numbers for the particular category numbers I’m mapping within WordPress for the associated category names.

RSS Feed Pattern for IndieWeb Post Kinds Plugin

I also spent a few minutes to figure out the RSS feed patterns to allow for the additional feeds provided by the Post Kinds plugin to work. While Post Kinds is similar to the native WordPress post formats, it’s designed particularly with IndieWeb posts in mind and uses a custom taxonomy which also wraps particular post kinds in the appropriate microformats automatically. The general form for these RSS feeds would be:

Other feeds could be constructed similarly by replacing “article” with the other kinds including:  bookmark, favorite, jam, like, listen, note, photo, read, recipe, reply, repost, watch, and wish. I suspect that most will only want the articles while those who are really interested in the others can either “build” them themselves for subscribing, or given the sporadic nature of some, they would more likely be interested in the “social stream” feed noted above.

Discoverability

Finally there’s the most important question of what feed readers like Feedly or Woodwind can actually discover when someone searches for an RSS feed on my domain. It’s one thing to have customized feeds, but if feed readers can’t easily find them, the subscriber is never likely to see them or know they exist to want to consume them. Most advanced feed readers will parse the headers of my site for discover-able feeds and present them to the user for possible subscription.

Out of the box WordPress provides two RSS feeds as standard: one for posts (essentially everything) and one for comments.  I added several additional ones (like those mentioned above), which I thought might be most requested/useful, into my page header to provide a slightly broader range of subscription options. I even included a few feeds for alternate sites I run, like my WithKnown-based site. I suppose if I wanted I could advertise feeds for my favorite sites anywhere.

To add these additional feeds, I added several additional lines into my page header similar to the following example which makes my posts categorized or tagged as mathematics discoverable:

<link rel="alternate" type="application/rss+xml" title="Chris Aldrich » Mathematics Feed" href="http://boffosocko.com/math.xml" />

Wrap up

Hopefully with these few simple changes, those who wish to subscribe to my blog by email won’t be inundated with a lot of the social details. Those who want all or even smaller portions of my feed can consume them more easily, and there’s a way to be able to consume almost anything you’d like by category, tag, or post format/post kind.

Now on to my stretch goal:

Finish my monthly email newsletter

Comments/Questions?

Is there a particular type of content I’m creating here that you’d like to subscribe to? Let me know in the comments below if there’s a feed of a post format/kind, category, or tag you’d like to have that isn’t mentioned above.

References

[1]
“WordPress Feeds « WordPress Codex,” WordPress.org. [Online]. Available: https://codex.wordpress.org/WordPress_Feeds. [Accessed: 18-Dec-2016]
[2]
“Customizing Feeds « WordPress Codex,” WordPress.org. [Online]. Available: https://codex.wordpress.org/Customizing_Feeds. [Accessed: 18-Dec-2016]
Syndicated copies to: