bodyids1

A WordPress site is made up of lots of different types of pages. The home page, post pages, category pages etc. So what if you could control how each of these looked individually?

You could create different template files for each, but that’s time consuming and makes it difficult to easily update across your whole website.

In this article, we’ll show you how you can set the tag to have a different ID depending on the type of page, and then how you can use CSS to style the page any way you like because of that. No more template editing needed in the future!

Modify The Theme Files

Open up your theme’s functions.php file (Or create one if your theme doesn’t already have it. Just save a blank document with that name!), and paste the following code into it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<?php 
function anytheme_body_control() { 
global $post; 
$postclass = $post->post_name;
if (is_home()) { 
echo 'id="home"'; 
} elseif (is_single()) { 
echo 'id="single" class="' . $postclass . '"';
} elseif (is_page()) { 
echo 'id="page" class="' . $postclass . '"';
} elseif (is_category()) { 
echo 'id="category"';
} elseif (is_404()) { 
echo 'id="error"';
} elseif (is_search()) { 
echo 'id="searchme"'; 
} 
} 
?>

Now, open up your theme’s header.php file. Read through it to find where it says . Replace this with:

1

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

Your New Body IDs

Different pages on your site will now have different body IDs, depending on what type of page they are.

Home page: 

<body id="home">

Post (example post with title “Test Post”): 

<body id="single" class="test-post">

Page (example Page with title “Test Page”): 

<body id="page" class="test-page">

Category: 

<body id="category">

404 Error : 

<body id="error">

Search Results Page: 

<body id="searchme">

Styling With CSS

The idea is that you take the CSS rules you already have, copy them, then add the body ID in front so that you can overwrite the previous rules for these pages. This works because of CSS Specificity, if you want to read more about it.

To take an example, lets say you have the following code in your stylesheet for displaying post titles:

1

.post h1 {font-size:24px; line-height:30px; color:#000000;}

But on your search pages, you’d like to make the size of the headers smaller (So it’s easier for people to scan down a longer list of headlines). You would leave the previous rule exactly as it is, but add this somewhere beneath it:

1

#searchme .post h1 {font-size:16px;line-height:20px;}

Taking it Further: Page Markers in Your Navigation

Let’s say you have a set of links to the main pages of your site in the header. The code for those links might look something like this:

1
2
3
4
5

<ul>
<li class="home"><a href="http://site.com/home">Home</a></li>
<li class="about"><a href="http://site.com/about">About</a></li>
<li class="contact"><a href="http://site.com/contact">Contact</a></li>
</ul>

You will then have rules in your CSS stylesheet to set up how these look. Now, we want to change the font color of the link to red if the user is already on that page.

Using our new Page classes, it’s simple. You just prefix the appropriate class to a new CSS rule for each link. That gives us this new CSS to add:

1
2
3

#home li.home a:visited {color:#ff0000;}
.about li.about a:visited {color:#ff0000;}
.contact li.contact a:visited {color:#ff0000;}

And there you have it. A very basic example of course, but you have the idea!

It’s a simple technique, but it gives you a massive amount of control. The best example of this in action is milo’s own site (Where she’s using this exact same code of course!).

Have a look at her home page, a category page, and a single post page. They’re all completely different! What will you do with your site?

milo WordPress Hacks Series: The code in these posts was written entirely by Milo, a web designer from Oxford, Britain. Check out her website for free WordPress themes and her blog, or follow her on Twitter!

Enjoy this post? You should follow me on Twitter!