I've been following with great interest Andy Skelton and Scott Allen Wallick's posts on semantic CSS. At first I was really thrown by their use of "semantic." "The meaning of words?" I thought. "What does that have to do with CSS?"
It turns out that semantics is all about meaning and changes in meaning, usually (but not always) as it applies to language. Yeah, ok, that does make a little more sense. Anyway! They're trying to flesh out a new model for WordPress templates that would provide a much higher level of customizability than most designs currently floating around out there.
Although the entire idea has tremendous potential, the one aspect of this that interests me most is the possibility of distinct styles for individual posts based on that post's category. I've had this particular feature implemented on this blog for over a week. So far all I've done with it is specify subtle background images for the "geekery" category, and only on the red "Eat at The Fish's" skin.
Interested in seeing how it's done? No? Tough luck, I'm writing about it anyway.
Implementation requires three fairly minor changes. First, you need to add a custom function to your theme's functions.php (if you don't have a functions.php, you'll need to create one):
function post_category_class() {
foreach ( ( get_the_category() ) as $cat ) {
echo ' ' . $cat->category_nicename;
}
}
This function will generate the category slug names as output suitable for CSS classes.
Next you need to call the function in the WordPress loop. Your theme will probably have a line of code similar to this:
<div class="post" id="post-<?php the_ID(); ?>">
Which would generate output like this:
<div class="post" id="post-514">
After you've inserted the new function call into your template like this:
<div class="post<?php post_category_class(); ?>" id="post-<?php the_ID(); ?>">
Simply and elegantly, every post will now automatically have a category-related class attached. Like this:
<div class="post geekery" id="post-514">
Finally, you'll need to add style rules to make certain categories stand out. Here are mine:
.geekery {
background:url('/images/styles/eatatthefishs/geekery.gif') top right no-repeat;
}
.geekery .entry {
background:url('/images/styles/eatatthefishs/geekery2.gif') bottom right no-repeat;
}
And huzzah! New styles just for "geekery" posts. If you intend to implement this type of setup on your WordPress blog, note that you'll probably want to insert that new function call into every template page that contains the WP loop (e.g., Search Results, Archives, Single Post, etc.) Not all themes have all template files, so your results will vary.
As I said, the only thing I've done with this so far is to specify those two subtle background images. Because this method will apply the category slug as a class for every category to which a post is assigned, there's the very real possibility of overstyling a post. For example, if I specify a border for the News category and a larger font for the A/V category, a post filed in both categories would have both a border and the larger font. Since a few of my catch-all posts are filed into many categories, too many styles would easily make for cluttered eyesores.
I like the clean simplicity of my template now, so I'm only implementing modest styles as they occur to me. Since the blue "Tossed My Salad" skin is available mostly as a retro throwback, that skin probably won't see any new styles at all.
