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?

Post Kinds Plugin for WordPress

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.

​​​