Unique Body ID’s for your Pages

Posted on: May 30, 2009 by Chris Coyier

There are many reasons you might want to get a unique ID for your tag. Let’s say you want your header elements to be a different color on your About page, you could style:

h3 { color: blue; }
body#about h3 { color: red; }

But how do you get that ID on the About page, but not on any other page? If you have your permalinks set up to show the page name, like http://yoursite.com/about/, you can use PHP to extract the “about” part of that URL.

Here is the magic:

<?php
	$url = explode('/',$_SERVER['REQUEST_URI']);
	$dir = $url[1] ? $url[1] : 'home';
?>

<body id="<?php echo $dir ?>">

Possibly Related Posts

Posted in: PHP
Tags: body, CSS, header, permalink
Discussion: 5 Comments

Thumb for Unique Body ID’s for your Pages

Let's talk it out, folks.

Chris Taylor said on June 16, 2009:

Nice tip.

I’ve also used this before which uses the current page’s slug as the body class.

ID); // get current post or page
    	$slug = $post_id->post_name; // define slug as $slug
		if (is_home()) {
            $slug = "news";
		} else {
		}
		?>
	
	<body class="">

Ian Rountree said on June 18, 2009:

Very slick! But would there be a way to make this more dynamic? For example, rather than creating specifically designed templates, serving up some choice php based solely on categories or post vs page? Red headers for news posts, blue for errata and so on?

#2
Jason said on June 22, 2009:

I’ve noticed that WordPress 2.8 (I don’t think the earlier versions had this?) has a php function call in the body tag called body_class();

The body_class() function calls get_body_class and concatenates all possible classes, e.g: home, blog, archive, date, search, paged, attachment, and error404… and a unique post / page id class like page-id-4 or postid-3. This is only a problem if you want to use unique identifiers the absolute correct way…with an id attribute as opposed to a class attribute.

Anyway, I like the solution Chris, more elegant than what I was using…which was to use php to lowercase the slug and replace white-space with underscores:
```
<body id="<?php $title = get_the_title();
$lowercaseTitle = strtolower($title);
echo str_replace(" ", "_", $lowercaseTitle); ?>">
```
#3
Jason said on June 22, 2009:

Also, one more thing. Probably cleaner to put your code in the functions.php file, and when developing locally I had to change url[1] to url[2] since my folder name gets put in front of the actual page title, http://localhost/site-name/page-name:
```
function body_id() {
	$url = explode('/',$_SERVER['REQUEST_URI']);
	// USE WHEN LIVE
	//$dir = $url[1] ? $url[1] : 'home'; 

	// USE WHEN LOCAL
	$dir = $url[2] ? $url[2] : 'home';
	echo 'id="' . $dir . '"';
}
```
and then call this in the header.php file:
```
<body <?php body_id(); ?> <?php body_class(); ?>>
```
#4
Jason said on July 10, 2009:

This can be even better, and avoids the little commented out bit that I wrote above if used the following way:

function body_id() {
       $url = explode(get_option('siteurl'), $_SERVER['REQUEST_URI']);
       $dir = $url[1] ? $url[1] : 'home';
       echo 'id="' . $dir . '"';
}

#5

Digging into WordPress