Microformats and WordPress Themes

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.

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.

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.

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:

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.

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.

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:

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.

30 Comments

Wow! I’ve been too intimidated by Microformats to really dig into them as deep as I should have. You make this sound so easy.

I agree with you that WordPress Themes and the core programming will probably include these in the near future. I know that the Sandbox WordPress Theme designers worked overtime to incorporate microformats into their very successful and powerful Theme.

Yes, microformats are quite easy, and Sandbox did indeed add a significant number of microformats into their theme. However, there’s lots of room for additions and with Firefox 3.0 coming soon, having microformats already in your site puts you a step ahead of the game.

Although I personally dislike the Sandbox for other reasons, it is worth noting that it is being included in WordPress 2.3 (or possibly 2.4, not sure on versioning there) as one of the default packaged themes.

Also, check out my own site for a live example of a heavily microformat enabled blog. I’ve added pretty much every microformat to it that I can think of, and if you run the Operator addon in Firefox, you’ll be able to see most (not all) of them. As well as do useful things with them.🙂

For one thing, I actually do post my address on my own site, and in a mailto link. Check it out yourself on my site: http://ottodestruct.com

For another, it is not irresponsible to suggest posting your email address, because not posting it doesn’t prevent spam.

The idea that not posting your address will prevent you from receiving spam is a complete and total myth. You will get spam regardless of whether or not you post your email address. It’s a simple fact, set up any email account: it will receive spam.

Post your email address all you want. It makes no difference in the amount of spam you get. Really.

I receive less spam on addresses that have never been posted in any form, than on addresses that do. unfortunately, even things like the archive of the wp-hackers list show up in search results with only minimal obfuscation.

I’ve had plenty of email addresses swallowed whole by the deluge of spam. I’ve learned where and when the spam starts. sure, you’ll always eventually get spam. posting a mailto: link opens the gate all the way, right from the getgo.

If you use public email in any way at all, then you need to have a decent spam filtering solution. This is just a given these days. I use Google Accounts on my own domain, so their filtering (same as GMail’s filtering) works quite well and does the job of eliminating spam from my view. Yes, you’ll get spam, but really, you’re going to get it anyway. Having a decent filtering system works better than trying to hide behind an obscure address.

Oh, and you need to look closer, because yes, my email address is indeed added to every post on my own site. It’s hidden from the browser, but it is there and as a microformat. The generated code looks like this:

yes, i use google’s hosted apps as well. like akismet, they’re not perfect. if i need to go dumpster diving, it’s much easier if there are less than 50 spams in there. my catchall address usually dumps spam before i see it.

Playing with Operator today, I discovered the User Scripts section, and its ability to add more recognized microformat types to the plugin. This helped in seeing the validity of a few more microformats on my own site that I wasn’t sure about. So be sure to check out the user scripts page and download the extra 5 or 6 scripts that provide new formats.

I signed up for both a Hotmail account over a year ago and a Gmail account 6-months ago… neither have seen ONE spam.

My Yahoo! account that was posted in many forums… got tens of thousands of spams before I pulled the plug.

So please, people, don’t post your email address in forums and use Javascript encryption, web forms, images, or other techniques to hide your email address on your own site(s).

When signing up for anything, use an email address you won’t mind throwing away if you have to. I create numerous email addresses for this purpose mostly on the theory that if someone’s database is compromised, I won’t have to reprint all my stationery, etc.

Yet I get little spam because I’m very cautious who I give my email address too.

Christoph: All that work of creating throwaway addresses seems like a heck of a long way to go just to avoid implementing an effective spam filter. Once your email gets onto the spam lists just once, then it’s there. After that, it makes no real difference.

Just use a quality spam filtering solution and be done with it. Why put all that effort into multiple addresses and such?

Much like Dvorak, I get no spam. Well, actually, I get tons of spam, but I never see any of it or have to deal with it in any way. That’s what a quality spam filter does.

if you’re not going to tell people (in the original post) what “quality spam filter”s to use, telling them to post their email address in the clear IS exactly as dangerous as i said.

you are more tech-savvy than your audience. that’s why they need you to explain stuff like this to them. it’s irresponsible to then skip out on the consequences of your tutorial. might as well be telling people to format c:\

Beware the accessibility implications of abusing “abbr” in this way (see Web Standards on Accessibility for ABBR ) – issues the microformats community have yet to adequately acknowledge, much less address.

bakazero: The main effect of using an invalid address in your microformat is that it won’t work. The idea here is to present machine readable items. If you have a faked email in your microformat, then when people try to use that microformat to, say, add your vcard to their email program, then they’ll have to manually edit things. Javascripts built on microformats (coming soon, in Firefox 3) won’t understand it and won’t work, etc.

If you don’t want to put in an email address, then just don’t put it in. Don’t just put a broken one in. Or better yet, put a real one in and then use a decent spam solution like GMail for filtering your spam out.

I want a span like hProduct or ProductTitle. The problem is that I cannot tweak the css. I want the text to be highlighted and tried .hProduct{……} in my style.css and nothing happend. Why?
I use self-hosted wordpress!

Triple check that you have something set for hProduct or whatever in the WordPress Theme. If you don’t, it won’t change as it must be there in order for the CSS to change things. If it is present in the Theme template files, then try adding a parent like #content .hProduct {…} to really drill down to specifically what you want to change. Are you using a Child Theme or changing the core WordPress Theme?

Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog that automatically tweet my newest twitter updates.
I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this. Please let me know if you run into anything. I truly enjoy reading your blog and I look forward to your new updates.

[…] been thinking on using Microformats on this blog for a while after reading Lorelle’s post about this topic on her blog. Although implementing microformats on wordpress theme can be considered as an […]

[…] Microformats and WordPress Themes « Lorelle on WordPress 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. (tags: wordpress microformats webdesign blogging hcard vcard microformat theme code) No Comments, Comment or Ping […]

[…] Microformats and WordPress Themes: Ever wonder about what microformats are? Otto of Nothing to See Here introduced us to them and how to use and incorporate them into our blogs so browsers and other online services can take advantage of these “address forms” and other embedded information. If you don’t know what these are now, you will have to get to know them soon. Start early. […]

[…] to your WordPress blog, you should have a read at this article on Lorelle on WordPress titled Microformats and WordPress Themes. I’ll also try writing about some more Microformats in the coming few days. Share and […]

[…] Microformats and WordPress Themes by Lorelle gives me some glimpse of idea that the Microformats will be great assets for the web designer or a web developer to build the website. It will be a great SEO technique when the Search Engine implemented it to analyzing a website point. […]

[…] the location of your default icon, or use a blank default. If you’re using Sandbox, or any other hCard-enabled wordpress theme, you can insert this inside <div class=”vcard”>, for added microformat-y […]

[…] Microformats and WordPress Themes: Ever wonder about what microformats are? Otto of Nothing to See Here introduces us to them and how to use and incorporate them into our blogs so browsers and other online services can take advantage of these “address forms” and other embedded information. If you don’t know what these are now, you will have to get to know them soon. Start early. […]

[…] Microformats and WordPress Themes: Ever wonder about what microformats are? Otto of Nothing to See Here introduces us to them and how to use and incorporate them into our blogs so browsers and other online services can take advantage of these “address forms” and other embedded information. If you don’t know what these are now, you will have to get to know them soon. Start early. […]

[…] your web pages readable by not only people, but computers are able to make sense of your page also. Microformats are extremely useful when applied to themes. You can add them to one place and enable your whole […]

[…] your web pages readable by not only people, but computers are able to make sense of your page also. Microformats are extremely useful when applied to themes. You can add them to one place and enable your whole […]