Generated Semantic Classes

I’ve been working with Scott Allan Wallick on a WordPress theme he calls Minimalist Sandbox. One of the things we’re trying to do is create a rich semantic markup pattern that will make it easier to customize the blog with CSS alone.

For example, take the <body> tag. We know whether is_home or is_post or is_page by the time we render this tag, so why not drop some of this context into the body’s class? The distinction between “home” and “post” and “page” is simple and powerful. It utterly destroys the old widecolumn/narrowcolumn classes. A full-blown class list such as “wordpress author archive author-andy” also gives each author the ability to style their archives differently with just a bit of CSS.

We can do similar things to the post div class list: “post publish author-andy category-asides category-funny” gives you tremendous power to shape your blog’s presentation with CSS. You could have a different style for certain categories or authors, attach a headshot to each of an author’s posts, use :before selectors to congratulate visitors on their wise choice of browsers…

What’s more, this makes your semantic data accessible to javascript. You could use the classnames to place relevant ads in posts, collapse posts of a certain category according to the visitor’s cookies, attach category-targeted link submission buttons…

There are all manner of tricks you can play when you have the right information in the right place. If you think of any other information that could enhance the semantic value of a theme’s markup, drop a note right here.