Microformats and WordPress Themes

By Otto of Nothing to See Here

Question: What are Microformats?

The short answer: Microformats are a way to make your web pages readable by more than just people. The idea is that you put special forms of HTML in your page, around the stuff you already have in your page. This special code lets other computers that happen to be looking at your page make some form of sense out of it.

Today, I’m going to show you how to do this on your own WordPress blog, or when designing your own WordPress theme.

Let’s start with a simple example of a microformat. Say you posted an address to your favorite restaurant, like so:

<p>
My Favorite Restaurant<br />
123 Fake Street<br />
Springfield, IL, 12345
</p>


That’s all well and good, and it displays the address on the screen. However, what if somebody wants to see a map of that address? Or add it to their address book? They probably have to copy and paste it somewhere. Wouldn’t it be nice if the browser knew that that was an address, and could take actions on it? Microformats let you do that:

<p class="adr">
My Favorite Restaurant<br />
<span class="street-address">123 Fake Street</span><br />
<span class="locality">Springfield</span>, <span class="region">IL</span>, <span class="postal-code">12345</span>
</p>


Okay, so it’s a little more verbose. However, it displays exactly the same in a web browser, and any system that understands the "adr" microformat will know that that is an address and can take automatic actions based on it. They can pull it up in Google Maps, or Google Earth. They can add it to an address book program. Things like that.

The important thing to note here is that all I did was wrap the existing pieces of the address into span elements and gave them class names. The actual layout of my text didn’t change at all. The class names came from the Microformats Wiki, on their entry about the address microformat.

Now that you’ve seen a simple example, we can dive into some more complex ones, and explain how to microformat enable your theme as a whole…

So, what’s with these CSS Classes?

The key to microformats is adding classes and other semantic design elements to existing data. These various elements follow specific formats that are semi-standardized. These CSS classes are used specifically because you can use them without changing your existing design. You can add classes all day long, and nothing changes if you don’t style them. Of course, you’re free to style them if you want… If, say, you want all your addresses to look a certain way, then you could easily style the "adr" class as you see fit.

Let’s look at a slightly more complex example. hCard is the type of microformat that allows you to mark up contact information. It’s based on the vCard standard for address book and email programs. You can include lots of information in an hCard, but we’ll stick with the basics here.

I have code on my site that looks like this:

<a href="mailto:otto@ottodestruct.com">Email Otto</a>

It’s a very simple little bit of markup, giving a link to send me an email. But I’d like it to be an hCard. What’s more, I’d like that hCard to include my website name as well, so that if somebody adds me to their address book, they get my name, my email, and my website.

Solution:

<span class="vcard">
<a class="url fn" style="display:none;" href="http://ottodestruct.com">Otto</a>
<a class="email" href="mailto:otto@ottodestruct.com">Email Otto</a>
</span>


I’ve done a few things here, so let’s go through them one step at a time.

• First, I’ve created a span around the entire thing, with a class of “vcard”. This is the main identifier that says that this contains vcard (hcard) information.
• Second, I’ve added the “email” class to my email link. This says, obviously, that this is an email link.
• Third, I’ve added another link entirely. This is a link to my website itself. However, note that I gave it an explicit style of display:none. This is to keep it from actually appearing on the webpage itself. It also is part of two classes: url and fn. The “url” class says that it’s my main url (this is my vcard after all). The “fn” class says that the name inside the link (which is “Otto” in this case) is my “full name”. This is just the name I want to show up as the main name on the vcard.

And that’s it. A microformat enabled browser might have a toolbar option to save that vCard information to the local address book. Or it might have an option to easily send me email. Or it might do something else. That depends on the individual person’s computer and what they do with contact information.

Come on, nothing is that easy!

Okay, so you may be thinking “Well, the user has to have a separate program to understand microformats anyway, so what’s the benefit?” That’s good thinking! You’re correct, you need some program capable of knowing and parsing out microformat information. There’s some addons for Firefox (like Operator) that can read microformats, and various other web systems read them as well for various purposes. Firefox 3 will have native support for microformats.

Operator in particular is very useful when changing your theme and/or blog to be microformat enabled. It has a debug mode that can show you exactly what was parsed and whether or not your finished microformats are valid. Refer to it constantly when editing your theme and reloading your pages.

The real benefit of microformats is when large numbers of sites become microformat enabled. With enough microformats and enough people publishing semantic information, search engines can gather it all up and use it in useful ways.

As a blog writer, you’d probably like your own posts and information to be gathered up like that and used in useful ways as well, and not just by your readers (though they will benefit the most). More importantly, your content is what attracts readers to your site. Any way to help users advertise for you and get to your site is a good thing. Microformats make it easier for your readers to not only use the information you post, but to use it in ways you don’t have to really know or anticipate. It’s a generic way to make your information compatible with anything capable of using it.

How does this help me with WordPress themes?

A lot of themes include code like this somewhere:

<p>- <a href="<?php the_author_url(); ?>"><?php the_author(); ?></a></p>


This is a simple byline. It would display -Otto for my posts, and link the word “Otto” to my homepage. But, wouldn’t it be nice if this were microformat enabled? If you have multiple authors, their post bylines would automatically become contacts in the page.

Examine this somewhat more complex code:


<p>- <span class="vcard">
<a class="url fn" href="<?php the_author_url(); ?>"><?php the_author(); ?></a>
<a style="display:none;" class="email" href="mailto:<?php the_author_email(); ?>"></a>
</span></p>


By using existing information, we’ve turned all author tags into hCard microformats. We even added a hidden email link that will add their email information into their vcards.

Themes can be microformat enabled easily. You can add contact information to author tags, for example. WordPress itself is already microformat enabled, to some degree. The rel=”tag” microformat is a good example. All “tags” are microformats. WordPress supports the XFN microformat on the Blogroll pages. Those checkboxes to identify contacts and friends and such are all XFN data that gets automatically added to blogroll links.

Microformat enabling your posts

So, let’s go a step further, and add microformats to the Loop itself. First, lets start with a very basic Loop, for demonstration purposes:


<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>">
<h3><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
Published on <?php the_time('Y-m-d H:i') ?>
<?php the_content('Read the rest of this entry »'); ?>
<p>-<a href="<?php the_author_url(); ?>"><?php the_author(); ?></a></p>
<p>Posted in <?php the_category(', ') ?></p>
</div>
<?php endwhile; endif; ?>
</div>


Whew! Even though I left a large amount out of this Loop, it’s still a large chunk of code. But examine it carefully, it’s not all that complex. It creates something simple: Your Posts. They look like this:

Title of Post
Published on 2007-09-01 12:00
This is the content of my sample post.
-Otto
Posted in Uncategorized, Sample Posts

Pretty straightforward, really. What we want to do is to make non-humans able to understand this content as well.

Why? What can browsers do with it? Well, there’s a lot of information there. It would be nice if, say, the browser gave the user an easy way to add your post to a social bookmarking site like del.icio.us. It would be nice if browsers could understand that content and syndicate it into a feed reader automatically.

Fortunately, we have just the thing for those: xFolk and hAtom.

xFolk enabling the Loop

xFolk is a microformat standard designed specifically for social bookmarking. You define something that has a description and a link, and optionally some tags. The microformat enabled browser can give you options to easily add the link to social bookmarking sites of various sorts, in one step. No copy pasting of the link or description or anything else.

xFolk is easy to create, you simply have to define the item as an xFolk entry and then mark where the link and the description are. Tags, if you have any, are automatically recognized as they will have rel='tag' in them, but we luck out there, because WordPress automatically adds the rel='tag' to our category links. So we get our categories as tags, for free. If you use a tagging plugin like Ultimate Tag Warrior, then those will show up as tags in the xFolk entry as well. The soon-to-be-released WordPress 2.3 will also have built in tag support.

Anyway, our post Loop is thus transformed into this:


<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" class="xfolkentry">
<h3><a class="taggedlink" href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
Published on <?php the_time('Y-m-d H:i') ?>
<div class="description">
<?php the_content('Read the rest of this entry »'); ?>
</div>
<p>- <span class="vcard"><a class="url fn" href="<?php the_author_url(); ?>"><?php the_author(); ?></a><a style="display:none;" class="email" href="mailto:<?php the_author_email(); ?>"></a></span></p>
<p>Posted in <?php the_category(', ') ?></p>
</div>
<?php endwhile; endif; ?>
</div>


The only thing I’ve added here are three classes:

• The post DIV gets the “xfolkentry” class, to signify that the post is an xFolk item.
• The permalink gets the “taggedlink” class, to point out what the link is.
• The post content gets a new DIV surrounding it, with a class of “description”. What better describes the post than the post itself? I could add a hidden excerpt here instead, if I wanted.
• Also, you may have noticed that I added our microformat enabled Author line from earlier. This is not strictly necessary, but it can’t hurt.

hAtom enabling the Loop

hAtom, on the other hand, is a microformat standard derived from the Atom feed standard. hAtom is a way to mark feed content directly in your page, without having to have a feed itself. There are converter programs that can read hAtom enabled sites and produce real Atom feeds from them. Some feedreaders even understand hAtom now and can read sites directly, without any feeds at all. And it’s always useful to allow your users to read in the method they choose. The more methods you have, the more potential readers there are.

So, to add hAtom support to our already xFolk enabled posts, I simply need to tag each element with the correct hAtom capable item. I do that like so:


<div id="content" class="hfeed">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" class="xfolkentry hentry">
<h3><a class="taggedlink entry-title" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
<abbr class="published updated" title="<?php the_time('Y-m-d\TH:i:s\Z') ?>">Published on <?php the_time('Y-m-d H:i') ?></abbr>
<div class="description entry-content">
<?php the_content('Read the rest of this entry »'); ?>
</div>
<p>- <span class="vcard"><a class="url fn" href="<?php the_author_url(); ?>"><?php the_author(); ?></a><a style="display:none;" class="email" href="mailto:<?php the_author_email(); ?>"></a></span></p>
<p>Posted in <?php the_category(', ') ?></p>
</div>
<?php endwhile; endif; ?>
</div>


So, what have we done here? A few things:

• First, we added an “hfeed” class outside the loop itself. This is important, because a “feed” is generally a bunch of items. The posts are entries within the feed.
• To those posts, we added the “hentry” class. Notice that we can have multiple classes on the same elements here. This is how we can combine xFolk and hAtom into the same set of posts. The posts will therefore be enabled for both types of microformats.
• An “entry-title” class is added to the title.
• An rel='bookmark' is added to the permalink.
• An “entry-content” class is added to the content of the post.
• The date gets special treatment. We surrounded the date information with an “abbr” element. The reason for this is that we need our automated readers to be able to understand the date information, and so we need a standardized date format. However, we don’t want to change the look of the content on our page. The abbreviation element is perfect for this, it lets us put the standardized date format in the title of the element, while retaining our normal date format for display. It also lets us add a “published” and “updated” class to the date, for the hAtom microformat. Very nice.

And that’s that. The posts are microformat enabled, both for xFolk and hAtom. You can view the resulting page using Operator or use an hAtom to Atom converter (or even a simple XSLT stylesheet) to see it turned into a feed. And all the authors on the page are now offering vCards to boot.

Upshot time

Microformats are an extremely useful thing to add to your themes. Because the nature of themes is that they repeat their content on several pages, adding microformats to them means that you can add them in one place and enable your entire site.

WordPress has direct support for some microformats, and the developers have expressed interest in furthering that support. So don’t be surprised if future versions include some microformat enabled tags automatically.

In the meantime, theme authors should keep these in mind when designing, they’re easy to add and provide potentially huge functionality, all behind the scenes. Feel free to experiment! Check out the Microformats Wiki and read up on the various microformats there. You’ll likely find microformats for things that you use all the time, but you didn’t know there was a proper way to describe it. Oh, and yes, the information on that wiki seems intimidating at first, but now you know that microformats are actually very simple and if you just cut through the techno-babble on the wiki, you’ll find that they’re easy to create as well.

---

This guest blogger post is by Otto of Nothing to See Here, techno-nerd and beer connoisseur. Otto can regularly be seen at various watering holes in Memphis, TN, unsuccessfully attempting to work out how to combine microformats and microbrewing.