EJS logo

Wordpress tutorial:how to apply a dynamic body class or ID

Article illustration for Wordpress tutorial: how to apply a dynamic body class or ID

I spent most of yesterday building a site for a friend and found myself falling in love with Wordpress all over again in the process. A highlight of the day’s work (which saw me using Wordpress more as a standard CMS rather than a blog engine) was finding a really easy way of dynamically applying a class or ID to the <body> tag.

Now, I’m not a PHP guy at all, so I like to use it in the simplest way possible to get the results I need, and – in my limited knowledge of the language – I’ve found this to be one of the easiest tricks that can potentially lead to some really powerful stuff. If you’re going to apply a class name dynamically, you might as well do it to the <body> , because – thanks to CSS’ descendant selectors – you can pretty much alter anything on the page, as everything sits inside this tag.

The story behind it

What I wanted to do was give each page on the site a unique class so that I could reference it in my CSS (important for hover / selected states when using sprite-based navigation). I’d actually been doing it for ages – but in a very long, round-the-houses fashion – by checking each page’s ID number and then assigning styles where necessary. It’s not bad but I hated all that styling sitting in header.php when I wanted to keep every bit of CSS in my stylesheet. It was just plain messy.

A quick Google search for wordpress dynamic body class brings up an article on Scott Allan Wallick’s site that talks about his excellent Sandbox theme. While all well and good, I wasn’t using Sandbox on this project so I wanted something I could easily put into my own theme (based on Starkers). I then found a post by Darren Hoyt that seemed to detail the technique I wanted. I pasted in the code and it worked like a dream.

But…

PHP only really looks neat if you adhere to the line breaks (as Darren does), but that made lots of unnecessary whitespace when the values were printed to the page… and that makes a pedantic loser like me very unsettled. :p Plus the extra code dealt with adding both a class and an ID, as well as checking if the page was an ‘interior’ one or not. I didn’t need anything like this complexity, so I re-ordered the code for exactly what I was after.

So here you go

<?php if (is_home()) { ?> <body class="news"> <!-- The default body class is "news" --> <?php } else { ?> <body class="<?php echo $post->post_name; ?>"> <!-- An alternative body class is defined, based on the page title --> <?php } ?>

In English: if the page is the ‘home’ page, the first option is printed; if the page is anything other than ‘home’, it’s given a class based on the page slug. In the site I was building, that meant things like “films”, “about”, “links”, etc; in other words, simple, semantic class names.

Note: In this case I’m writing a class but you could equally use it to create an ID. Similarly, with two ‘options’, you could include more stuff within the &lt;body&gt; tag if you wanted. For instance, you could print an ID as well as a class and then reference the ID in your CSS to override other styles, like so:

<?php if (is_home()) { ?> <body id="overrideEverything" class="news"> <!-- The default body class is "news" --> <?php } else { ?> <body class="<?php echo $post->post_name; ?>"> <!-- An alternative body class is defined, based on the page title --> <?php } ?> <style> body#overrideEverything p { color:red } </style>

In fact, there are loads of things you can do with this very simple bit of code. Like I say, I’m no PHP expert, so if you know of an easier way to do this, please feel free to share. It was just one of many things I learned yesterday that I know I’ll be using again and again in the future. I hope it helps you too!