A Quick WordPress Function to Add a Dynamic Body Id/Class to Your Theme

While working on a small personal WordPress project over the weekend I found myself wanting to control certain elements of my design on a per page basis. I personal like to try and keep things pretty simple, not to cluttered and keep the page elements pretty standard across the site I am working. Adding dynamic a dynamic body id/class function would allow me to do just that.

Please note that this Function can still be tweaked and used, however you may want to have a look at the codex as well as comb through Google for information on get_body_class in WP 2.8.

I found several very useful resources in researching this in relation to wordpress and decided after taking a crack at it on my own that I would share with you here, but please read each of these as they are equally as helpful:

Moving On

Let’s say for this example that I want to color code certain pages. On the index page would be the site wide color of blue, my single page links would be green, on the search page red and on the archive page yellow.

The Function

The first thing I am going to do is write the quick and easy function to generate a body id based on the page you are visiting. So I open up my themes function.php and insert something like this:


<?php
function mytheme_body_control() {
	if (is_home()) {
	echo 'id="home"';
	} elseif (is_single()) {
	echo 'id = "single"';
	} elseif (is_search()) {
	echo 'id="search"';
	} elseif (is_archive()) {
	echo 'id="archive"';
	}
}
?>

Adding the Function to the Theme

By creating the function in the function.php, the task of adding the id/class to the body tag is now very simple. Open the header.php file and:

<body <?php mytheme_body_control(); ?>>

The CSS

Now we can go about adding some CSS to styling the links on a per page basis:

a {
	color: #0000FF /*blue universal*/
}
#single a {
	color: #00FF00 /*green*/
}
#search a {
	color: #FF0000 /*red*/
}
#archive a {
	color: #FFFF00 /*yellow*/
}

Taking it Further

There is a wide variety of uses for this idea, for instance in my own theme I decided to take it a step further and generate a body class for each post for example:

body #single .my-recent-post

Something like this would give you the flexibility to style on a per post basis if you so desired. Building on the code from above I added something like this:

<?php
function mytheme_body_control() {
	global $post; 
	$postclass = $post->post_name;
 
	if (is_home()) {
	echo 'id="home"';
	} elseif (is_single()) {
	echo 'id = "single" class="' . $postclass . '"';
	} elseif (is_search()) {
	echo 'id="search"';
	} elseif (is_archive()) {
	echo 'id="archive"';
	}
}
?>

Now every time you publish a new a body class will be generated based on the post title.

There you have it, a very basic function for generating dynamic body classes in your WordPress theme.

Update to My Mistake

Thanks to Darren Hoyt for taking the time to contact me on this and correct my mistake. On each line after the function, is_single() for example, there should be no space after the word single and the start of the parenthesis and and no semicolon after the parenthesis.The corrected code should work perfectly. This is what happens when you don’t take time to proof read and preview outside of MarsEdit.