Unique Body ID’s for your Pages
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 some styles 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 the current permalink URL.
Here is the magic:
<?php
$url = explode('/',$_SERVER['REQUEST_URI']);
$dir = $url[1] ? $url[1] : 'home';
?>
<body id="<?php echo $dir ?>">That will output (say we’re on the “About” page):
<body id="about">
About the author
Jeff Starr is a professional web developer and book author with over 15 years of experience. Jeff works with WordPress every day, designing themes, developing plugins, and securing sites. His books include Digging Into WordPress, WordPress Themes In Depth, and The Tao of WordPress.
5 responses
-
Chris TaylorNice tip.
I’ve also used this before which uses the current page’s slug as the body class.
-
Ian RountreeVery 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?
-
JasonI’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); ?>"> -
Jason
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(); ?>> -
Jason
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 . '"'; }
