Get Total Control Over Your Page Styles With CSS
33A 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?
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!
I like this. I’ve been using the same feature out of Sandbox for a while, and it definitely adds more options… but for clients, who don’t need that level of sophistication, this could work great.
Same, I use the same feature for one of my blog with more options (like post id, tags…). Code here (for one month)
Ultimate tutorial ! Thanks for sharing. It really gives total control for styling every singe WordPress page. And it is very easy to implement, with only 2 small modifications…
@Web Design Beach
exactly, two small mods and as a result full control over styling of each page/post.
Other methods are working similar, but may use to many php calls.
CSS a good thing to learn!
Thank you!!
This is a really awesome trick!
I have read discussions about giving an id to the body those aren’t really dealing with WordPress
this piece of little code just does it magically
This is a great little tip. Thanks for sharing.
Thank you, I want to change text color, today I know how to made change! Youк blog is very nice and usefull. Follow you on twitter.
Hi, this is a great tip, but somehow I’m still not convinced of using WordPress as a total CMS.
Now that make a little more sense, I was always tempted to create a new header.php calling a separate style sheet. The the page template using this header. This would give you a new look but it’s very long winded.
Wow! This is great. It’s huge time saving. Thanks
Nice tutorial. Would love to apply to my WordPress pages like About Me and Contact Page.
Sounds like a good use for it to me. They’re some of the most important pages on your blog, worth giving them some special attention I guess. :D
Hey, nice piece of code. Can I ask which version of WordPress it works on? I am using 2.8, and it works very effectively on my front-end, but unfortunately breaks the back end CMS beyond usability.
Is there a specific area in the function file in which to include the first block of php?
Thanks
Wine Gums so the action immediately struck me as out of character. ,
This is really a helpful tutorial for those who are still new in designing web pages. Like me, I’m still new in blogging and this is very helpful for me to improve my blog and add some spice on it.
I am very interested in your article, thank you!
Great post there Pippin. Posts like these are why I love this site.
I appreciate the work that your are doing!!!!!
I appreciate the work that your are doing!!
I usually do go through the spam filter, so even the simple fact you have a Gravatar will help any future comments of yours stand out for me
paste the following code into it
Excellent article. It’s always been a pet peeve of mine that all my WP pages always looked nearly identical despite their having different purposes or functions. I’ll be putting this to use right away, you can be sure of that!
CSS is very useful and the tips that were given is very relevant and effective to use. However, some might not like this.
This is really great! WordPress themes plus a personalized way, that would result to the most personalized web site ever. Thanks for sharing.
Excellent article. Thanks !!! ^^
Does this no longer work? I’m using wp3.1, and I can’t get this to work. Is it broken in 3.1?
Tons of appreciation for your great work, thanks
Informative article, thanks
Thanks for your great article..
شكرا جزيلا هذا ما كنت أبحث عنه,
You can modify and see the entire css file with the Firebag or other plugin. Opera browser is able to let you to inspect the website elements too.
I have a background in graphic design but for some reason I couldn’t figure out the best way to have a unique look on each page of my website. Thank you for this tutorial, I just tried it out and it worked great!