DiggingIntoWordPress

by Chris Coyier & Jeff Starr

Unique Body ID’s for your Pages

Posted by on

There are many reasons you might want to get a unique ID for your <body> tag. Let’s say you want your header elements to be a different color on your About page, you could apply a bit of CSS via your theme’s stylesheet (i.e., style.css). For example, you could target the About page with something like this:

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://example.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 ?>">

5 Responses

  1. Nice tip.

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

  2. Ian Rountree 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?

  3. 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); ?>">

  4. 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(); ?>>

  5. 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 . '"';
    }

Comments are closed. Contact us with any critical information. Thank you!

Code is poetry