Using the WordPress Page Name as a Body Tag ID
This is my first tutorial. Ever. So please let me know if there is anything that needs improving or if you have any questions, comments, or suggestions. That said, I hope this helps someone out!
I’ve found that it’s often easier to work on a webpage with body tag ID’s. Luckily, you can add these automatically to every page in WordPress! Now if you need to style your Blog page elements differently than your Contact page, you can simply add the #Blog selector to any rules that apply specifically to your Blog page. All we need to do is add some code to your WordPress theme’s index.php file. Here we go:
To start, we need to pull in the page name. There’s a WordPress function for this:
$pagetitle = wp_title("","0");
<body id="<?php echo $pagetitle; ?>">
You can read all about wp_title() here. We have the separator character set to nothing (hence the empty pair of quotes) and because we’re placing this value into a variable, we are keeping the second parameter as zero. This keeps WordPress from automatically echoing the page title, and instead gives us a php string. (If that doesn’t make sense, don’t worry it’s not important to know exactly how the wp_title function works.) Unfortunately there’s a problem. The value returned by wp_title(“”,”0″) has a single whitespace preceding it. It’s an obnoxious bug specific to this WordPress function. I’ve tried many different combinations of parameters, but this bug persists. No problem, we’ll simply strip the whitespace off of the beginning of the string with ltrim(). So now we have:
$pagetitle = ltrim(wp_title("","0"));
<body id="<?php echo $pagetitle; ?>">
Alright, everything’s working fine, now, right? Wrong! We’ve got another problem. Let’s say you’re on a page called “What We Do”. Well if we look at our body id tag name on a page called “What We Do”, we’ll see that the id name now has spaces in it! This won’t do, as it will cause all kinds of problems for us when we try to style items that reside specifically on the “What We Do” page! So we’re going to need to cut this down to one word. Let’s strip the whitespace from the body id name. We’ll do this by using str_replace. We’ll replace each whitespace character with an empty character, effectively deleting it from the string. Here’s the code:
$pagetitle = str_replace(' ', '', ltrim($pagetitle));
<body id="<?php echo $pagetitle; ?>">
We’re not done yet though. I like to keep my id tag names lowercase, so let’s get rid of those pesky caps. We’ll convert the whole string to lowercase characters using strtolower():
$pagetitle = strtolower(str_replace(' ', '', ltrim($pagetitle)));
<body id="<?php echo $pagetitle; ?>">
Now we’ve got a nice, clean id tag name. It’s a single, lowercase name that reflects the page title. I know it seems like we’re finally done, but we’re not! What about the home page? Well in WordPress, your home page doesn’t return a string at all when you use the wp_title() function. So we’re going to need to account for that with a simple if statement:
$pagetitle = strtolower(str_replace(' ', '', ltrim($pagetitle)));
if (strlen($pagetitle) == 0) {
$pagetitle = 'Home';
}
<body id="<?php echo $pagetitle; ?>">
This if statement checks to see if we’re on the home page by counting the number of characters in the page name. If we’re on the home page, the wp_title() function won’t return anything, and the character count will be zero. If the character count is zero, we can set the $pagename variable to the name of our homepage. In my example, I’ve used the name ‘home’. But you can change it to whatever you want your home page to be called.
Alright, one more thing. You’ll notice that if you click on a specific blog post, the body tag id name will be the same as the name of the post. This throws a wrench in the gears because now any styles that we wrote specifically for the blog page won’t show up for the individual blog post! To fix this problem I recommend going to your ‘single.php’ file and wrapping the conent in a div with the same id name as your blog page. For example, if your blog id tag name is ‘blog’, then wrap your ‘single.php’ content in a div called ‘blog’. That way all of the styles that we wrote for the blog page will still apply to individual posts.
Well, that’s all! I hope this helps make your WordPress theme development quicker and easier!
Wow, looks like I’m the first to comment your first tutorial:)
Well, I wanted to say, that it was just what I needed. None of the other tutorials I read dealt with exactly all the problems I was facing with the use of body tag ID’s in wordpress.
And it’s very well written. Keep on like that!
Thanks a lot Fredka! Glad I could be of help! Always great when a tutorial serves its purpose!
Thanks for this. Keep writing and helping us out! Much appreciated.
Thanks for this! Was exactly what I was looking for.