Use Body ID/Class to Control Wordpress Page Elements
Long before Wordpress came along, it was considered smart CSS to attach an ID or class to the <body> tag of your webpages. For the homepage layout, you might use:
<body id="home">
For interior pages layouts, you’ll want a separate ID, plus a class which controls the styling of individual pages:
<body id="interior" class="about-us">
This technique can be powerful for turning sidebars on and off, dynamic menu highlighting, color coding, smart navigation — plenty has already been published on the advantages.
The Problem
Wordpress allows for conditionals and custom Page templates, but that often requires the manual creation of extra templates and PHP statements. Wouldn’t it be nice to control page elements through one single css document and one single Page template?
The Solution
This week I did some experimenting and put together a conditional that checks for homepage vs. interior page, and for the latter, creates a class name based on the page slug. Open “header.php” and replace the <body> tag with this:
<body <?php if (is_home()) { ?>
id="home"<?php } else { ?>
id="interior" class="<?php echo $post->post_name; ?>"<?php } ?>>
For me, this bit of code (which I wish came default) is another link in the chain toward exploiting Wordpress’s potential as a CMS.
Popularity: 1% [?]
Note: if you’ve set your homepage to be static and Wordpress gets confused by the if is_home conditional , here is a solution
What an amazing way to give more flexibility to the styles of different sections and pages in WordPress! This could be a way to also style category pages, tag pages, and any other page on a WordPress site. I love it!
I think it’s worth to mention that sandbox theme (http://www.plaintxt.org/themes/sandbox/) actually has its own function to add various classes to body tag. It adds so many things (author name, tag, category) as the class name, so it’s very flexible but might also be an overkill for most common themes.
But it’s really awesome to learn. Thanks for the article :)
I concur on the Sandbox mention. Semantic classes + CSS = very powerful design capabilities. “Overkill” is relative–you don’t have to use all the tools in the toolbox, but having them there allows you to do a lot more when you need to, without re-inventing the wheel. And, bonus–consistency in semantics so you don’t have to waste brainpower on the semantic aspect of classes when you approach a new design.
Thanks, this was just what I was looking for. You rock.
Great concept, Darren - thanks.
Quick question: What if you wanted to base your classes not on individual post titles, but by category? Would you alter the code to say ‘category’ in the two places where it now says ‘post’?
@Adam: this should work.
<body <?php if (is_home()) { ?>
id="home"<?php } else { ?>
id="interior" class="<?php single_cat_title(); ?>"<?php } ?>>
Thanks, Darren - that’s perfect. I’ll give it a shot.
Bummer - it’s not working… I just get this in the code:
I searched through the Codex, and this definitely looks like the best shot… other php calls work inside the Loop, but I tried a few anyway (didn’t work, of course).
Any other thought on how to get the category name to show up?
(I suppose I could just use the original code, and then deal with a bunch of page templates, but oy! I’d much rather take advantage of your body class/id magic here…)
whoops - let’s try this:
or,
(one of those should display well…)
Sorry ’bout all this… just pretend there are tag markers on either side of this:
body id=”interior” class=”"
Strange, the code I pasted still works fine on my end.
Wow, that is strange… I’ll keep trying. Thanks anyways, though - it’s a brilliant idea, and I could still use it (sort of) by making unique page templates for each category, and using the dynamic info for the CSS…
Not an ideal solution, but a solution nonetheless.
Well, I got something to work that didn’t include a bunch of craziness… I simply used four lines of in_category(x) variables in the body tag, and told it to output a particular id for each one.
Then, in the CSS, I did like you said, and gave each body#thingy a different chunk o’ CSS, and it works like a charm.
From what I found by Googling, your solution is the only one that prevents us from having to use multiple page templates or CSS files… and for that, I’m very grateful.
Thanks again, Darren.
Yep, multiple conditionals always do the trick too ;)