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.
6:59 pm
Note: if you’ve set your homepage to be static and Wordpress gets confused by the if is_home conditional , here is a solution
9:19 am
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!
10:26 pm
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 :)
4:22 pm
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.
9:39 pm
Thanks, this was just what I was looking for. You rock.
4:54 pm
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’?
9:48 pm
@Adam: this should work.
<body <?php if (is_home()) { ?>
id="home"<?php } else { ?>
id="interior" class="<?php single_cat_title(); ?>"<?php } ?>>
9:29 am
Thanks, Darren – that’s perfect. I’ll give it a shot.
3:32 pm
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…)
3:34 pm
whoops – let’s try this:
or,
(one of those should display well…)
3:35 pm
Sorry ’bout all this… just pretend there are tag markers on either side of this:
body id=”interior” class=”"
9:16 pm
Strange, the code I pasted still works fine on my end.
9:38 am
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.
12:42 pm
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.
1:19 pm
Yep, multiple conditionals always do the trick too ;)
5:32 pm
Okay, I know I’ve already overcommented on this post, but I had to come back and say this…
I’m using this code on every project I do now.
There seems to always be a good reason to use it, and it’s saving my bacon left and right. New possibilities in design are opening up to me the more I use it and think about it, and I love it. This rocks.
Thanks, Darren.
5:42 pm
Thanks Adam! I’m always thrilled when a small tweak of code can offer flexibility and control in a variety of scenarios; it’s one of the beauties of CSS + Wordpress. I’ve got a few other examples I’m going to post soon, hopefully.
10:01 am
Sweet – can’t wait.
7:17 am
Wow, I just love this blog layout you have here. And the content is even better. I still consider myself pretty much a new user when it comes to the complicated blogging stuff even though I have been blogging for quite some time now. Thanks for laying it out for me!
12:45 am
Sorry in advance for the long post…
Alright, I have been doing a lot of google-ing and can’t seem to find an answer to my problem. I am using your php snippet to class each page of a site I’m working on in wordpress (http://www.kaymccarthyot.com/staging/wordpress/aboutkay). It works great.
However, my site structure is 6 main level pages, and some of those have sub level pages. I want the sub level pages to be classed the same as its parent page. I write my css to call certain styles based on the body class obviously, but with this current code snippet, it is classing the sub level pages as its page name. The problem: if my client wants to add a sub level page via the admin, I would have to go into the css and add the styles for that page based on the body class. This all results in a not very dynamic site if I have to add styles anytime the client wants to add a sub page. Basically, I want them to be able to add a page, assign it to a parent section, and have it classed according to its parent. Hopefully that all makes sense….any ideas or tips? I am not very well versed in php, so I don’t know where to begin to write something, I just know how to implement the snippets I need. Any help would be greatly appreciated!
If this helps…I am dynamically calling the parent page title to display in my sidebar using this:
post_parent);
echo $parent_title;
?>
This calls the title of the parent page and displays it, obviously. I figured there is some way to apply the same idea to the body class. I could use this bit of code, but since it is calling the parent page title, if the parent page is more than one word (i.e. ‘Building Blocks’) it creates a class of which is unusable in the css because of the space. There must be some way I can call the parent page name, instead of the title……okay, I’m finished now. Thanks for your help!