WP-Oomph: Add the Oomph Microformat Overlay to your WordPress blog

I’ve just developed a completely idiotic (by which I mean brain-dead simple) plugin for WordPress that will add the Oomph Microformat Toolkit to all WordPress-generated pages. If you use a WordPress template that encodes your data with valid microformats anywhere on your page, this means when you install the plugin your users will see the Oomph microformat overlay and will be able to instantly export this encoded data.

This page is a live example, so if you’re using a JavaScript-enabled browser you should see a microformat icon on the top-left of the viewport that is pulling data from (at least) my “The bio” section in my sidebar. Go ahead, click it. I’ll wait.

Pretty nifty, isn’t it? Naturally, all of the credit for this functionality belongs to the Oomph team, not me. If you want to learn how to add microformats to your blog, I’d recommend Emily Lewis’s latest series of blog posts, Getting Semantic with Microformats. If you want to learn how to easily add the Oomph microformat overlay to your WordPress blog, read on.

The backstory

After Ask.com’s announcement that they are adding semantic search capabilities to their search engine, there’s little doubt in anyone’s mind that the semantic web is the future’s web. As far as I know, Google has yet to reveal similar initiatives but they are clearly in the know as well. Mark Birbeck, one of the smart folks who devised RDFa, recently gave a Google Tech Talk that made the point that semantics are the next big thing in the Internet search engine game.

However, for semantic web stuff to really take hold, two things need to happen first. I think these things need to look like this:

  1. Developers must create tools, plugins, and other software that makes it possible for the wider community to create compelling, interoperable applications that support semantic encoding. Thankfully, we are already at this point, with toolkits like the Oomph Microformat toolkit coming out of MixLabs.
  2. Armed with these software tools, CMS and other publishing platforms need to adopt semantics as first-class features of their platforms, and build interfaces that end-users can make immediate use of. This is where we still need to go, though some platforms like Drupal have begun to pave the way for this.

Drupal 7 will be fantastic, I’m sure, but we live in the here and now. I saw the Oomph microformat overlay on Emily Lewis’s blog and was more convinced than ever that if everyone—programmers and laymen alike—had easy access to these tools, they’d simply be pounding down the doors to use them. So that’s why I sat down and wrote a completely idiotic plugin for WordPress that makes it completely, utterly, brain-dead simple for anyone with a microformats-enabled WordPress theme to add the overlay to their site.

WP-Oomph: Download the plugin

My request to add the plugin to the WordPress.org Plugin Directory has not yet been completed, so in the mean time I’m hosting the plugin right here. (When/if it’s accepted it’ll end up being The plugin is hosted on that site permanently.)

The latest version is: 0.1.1.

Download the latest version of the WP-Oomph plugin.

Thanks to the Oomph team’s work, the plugin is a ridiculous 1-liner (for now) that uses WordPress’s wp_enqueue_script() function to call both its included jQuery library and the Oomph library itself. And, well, that’s it. I told you it was idiotic, but at least now the whole process of microformat-enabling a WordPress blog is 100% point-and-click.

WP-Oomph: Frequently Asked Questions

I installed and activated the plugin, but nothing is different. How come?

First, view the source of your WordPres-generated page and make sure you see a line similar to the following near the top:

<script type='text/javascript' src='http://visitmix.com/labs/oomph/1.0/Client/oomph.min.js?ver=1.0'></script>

If you see that but there’s still nothing different about your page, then you probably don’t have any (valid) microformats. You might consider switching to a WordPress theme with built-in microformat support, or modifying your theme’s code to add some of your own. You can learn more about the support WordPress offers for microformats in the Microformat wiki.

The plugin does let me do X thing that I want to do! Why not?

Most likely because I haven’t taken X thing into account. Sorry, I’m not a psychic (as much as I wish I were). However, you’re encouraged to leave a comment on this post or to contact me elsewhere to request that I add capabilities to the plugin. Better yet, if you’re comfortable doing so, send me a patch.

20 replies on “WP-Oomph: Add the Oomph Microformat Overlay to your WordPress blog”

  1. Whoa, sweet! This is the perfect thing to go along with the Live Writer plugin we built to go with the Oomph toolbar. Do you mind if we link this from the Oomph project site?

    Note that the Oomph code depends on jQuery, so you’ll want to enqueue_script ‘https://visitmix.com/labs/oomph/1.0/client/oomph.min.js’ first. Also note that you could also use http:// instead of https:// on those two URLs, to get a bit of extra perf (or even load jQuery from Google’s CDN instead). We use https:// in the toolbar to protect from DNS poisoning attacks, which are less relevant in the scenario where the author adds the tag.

    BTW, regarding Google and RDF, did you know R V Guha (creator of RDF) has been at Google for the past couple of years now? I don’t think he’s working on RDF, or even on microformats, but interesting nevertheless.

  2. @Joshua Allen: This plugin was so easy to write I just couldn’t not make it point-and-click for WordPress users! Naturally I’d be thrilled for you to link to here. Thank you for making such a rockin’ toolkit and bringing Microformats to a much wider audience so much faster!

    Also, if you take a look at the plugin’s source code you’ll see I’m actually using the wp_enqueue_script() WordPress function and calling it with jQuery as a dependency. Since WordPress ships with jQuery, I can let WordPress handle the jQuery stuff and be assured that it’ll be taken care of without having to encumber my plugin with the concern. Additionally, I’m already using the http: scheme over the https: scheme for exactly the reasons you describe in your comment. :) Seems that I made a typo in my original post, which has now been corrected. Thanks for catching that!

    I didn’t know that R V Guha was at Google now. I’m looking forward to some neat stuff from the search engines with regards to Semantic Web stuff, but I’m still convinced that it’s the CMS platforms, not the search engines, that will be responsible for the real sea change in the way semantic technologies are adopted.

  3. Great plugin! Could this incorporate hListing or hReview microformats and would that be appropriate in a plugin like this? Has anyone created a microformat sidebar widget for WordPress?

  4. @Scott: Adding hReview or other microformats to the Oomph toolkit is totally possible, but requires some JavaScript experience. The Oomph guys have put together a great manual with instructions for how to do this (you get it by downloading the toolkit). I’d suggest you take a look at it and contribute your enhancements back to them. :)

  5. I’m using WordPress 2.7 along with this plugin and yet nothing in the admin interface seems broken to me. Joss, can you describe what functionality isn’t working for you with the WP-Oomph plugin enabled that is working with the plugin disabled?

  6. I have the admin sidebar collapsed by default. Normally, when I hover over the Admin icons, the menu appears. With wp-oomph activated, the hover over does not work. I’ve tried this with all other plugins disabled.


  7. You’re right Joss, it looks like the Oomph JavaScript has a bit of a problem playing nicely with some of the events in the WordPress admin interface. Thank you for the heads up on those conflicts! Given more time I’d jump into the JavaScript myself but it doesn’t really make sense to me to add Oomph to admin pages anyway, so I think I’ll just enqueue it for non-admin pages, which will resolve those compatibility issues. Again, thanks for your eagle eye.

  8. Pingback: WP-Oomph

Comments are closed.