WordPress is a powerful CMS, especially for blogging but what if you want to style something on a single page and not affect anything on other pages? There isn’t built-in way to do this so we need to use the platform that WordPress runs on by writing some custom PHP.
<?php if (is_home()) { ?>
<body id="home">
<?php } else if (is_category('articles')) { ?>
<body id="articles">
<?php } else if (is_category('offers')) { ?>
<body id="offers">
<?php } else if (is_category('general')) { ?>
<body id="general">
<?php } else if (is_page('about us')) { ?>
<body id="about">
<?php } else if (is_page('contact us')) { ?>
<body id="contact">
<?php } ?>
Above you can see a big if else statement that will assign and id to the <body> tag depending on what page or category the user is viewing. Now we can target specific pages for styling in the CSS.
body#offers p { color: red; }
body#about p { color: green; }
body#contact p { color: black; }
This is a very simple example but you can go more complex such as having different colours for a navigation bar within different sections or change layout on one page without affecting any other pages.
Tweet
Thanks. This is what I was looking for.
Ignore this comment, testing threaded replies on a new theme design for Inspect Element.
Actually, since WordPress 2.8, there actually is a built in way to do this.
Change your body tag to look like this:
[body [?php body_class(); ?] ]
The body_class function outputs a “class=’whatever’” piece, and the classes it outputs depend on where you are on the site.
For example, the front page gets “home”, other Pages get “page”, individual pages get page-id-## (where the ## is the id number of the Page), etc.
A full list of what gets what can be found here: http://wpengineer.com/wordpress-28-body_class-automatic_feed_links/
I’ll definitely check out that article, Otto; however, it would be highly inconvenient to have to style pages by id. Much handier to use is_page.
Which actually brings me to my real question:
will is_page apply to child pages as well? Or is there some sort of is_child(‘parentname’) function? Being able to style an entire “category” (not WP categories, but in the general sense of the word) of pages at once would be very handy for CMS.
I actually recently wrote an article that addresses this very thing. I wrote a small script that dynamically adds an id to the body element. It takes the same parameters as WP’s core body_class() function.
You can check the article out here:
http://darrinb.com/notes/2010/adding-a-custom-id-to-the-body-element-in-wordpress/
Thank you so much for this discussion.
@otto : I tried your trick and its working well
Thanks to all.