Creating Unique Styles for WordPress Pages
Saturday, March 6th, 2010 Tags: PHP, Wordpress
In WordPress 2.8, there is one small but very useful feature, both for WP web developers, and for bloggers. This is an opportunity to change the appearance of any individual page or group of pages without the need to write either the functions/conditions on php or install plugins. All you need to do is simply add your desired style to your css file.
How does it work?
In WordPress 2.8 has been added to the function body_class(). It works like so
<body <?php body_class(); ?>>
So, we just need to apply such function to the body.
If your theme is adapted for WordPress 2.8, this feature is probably already present in the code. In case you can’t find that function, it's enough to search for
<body>
tag in header.php file of your theme and replace it with
<body <?php body_class(); ?>>
Usage
What do we get from using this function? It’s very simply; we get a <body&rt; tag with additional classes, such as:
<body class="home blog"&rt;
or
<body class=" single postid-1001 parent-page-id-0 page-template-default"&rt;
What does this give us? Let’s look at some examples.
Adding to your website’s css file:
.postid-3 #respond{
display: none;
}
Will kill comments form from post with id=3, just leaving comments.
.home{
background: #f00;
}
Only make the background of the home page in red.
.page h2{
font-size: 30px;
}
Increases the size of the header only on the pages (not blog entries) of the site.
Anyway, these are just simple examples. Using this feature you can make almost any changes in the CSS file for a single page or page group.
Documentation
Below you can see a full list of body classes that can be used for custom styling (just apply desired styles to them). That long list lets us know that style can be applied to almost any page, even to the third page of a search results, even to the tag, even to the author.
- rtl
- home
- blog
- archive
- date
- search
- paged
- attachment
- error404
- single postid-(id)
- attachmentid-(id)
- attachment-(mime-type)
- author
- author-(name)
- category
- category-(name)
- tag
- tag-(name)
- page
- page-parent
- page-child parent-pageid-(id)
- page-template page-template-(template file name)
- search-results
- search-no-results
- logged-in
- paged-(page number)
- single-paged-(page number)
- page-paged-(page number)
- category-paged-(page number)
- tag-paged-(page number)
- date-paged-(page number)
- author-paged-(page number)
- search-paged-(page number)
For WordPress huge fans and those who wants more, there is an opportunity to add their custom classes to body_class via a standard WordPress way:
<?php
add_filter('body_class','my_body_classes');
function my_body_classes($classes, $class) {
// add 'my-class' to the $classes array
$classes[] = 'my-class';
// return the $classes array
return $classes;
}
?>
There is no official documentation for body_class() at the moment, but as usually happens in WordPress, the function is made very simply and wisely. So, it is not difficult to understand it. A little more details can be found in the body_class() function’s code.
Thank you and good luck! 
If you enjoyed this article, you might consider subscribing to our rss feed to stay updated with all the latest tips and articles!
Article Sponsored by:
Expert guidance on designing a great theme for one of the most popular, open-source blog systems available for the Web today! This book can be used by WordPress users or visual designers (with no server-side scripting or programming experience) who are used to working with the common industry-standard tools like PhotoShop and Dreamweaver or other popular graphic, HTML, and text editors. Regardless of your web development skill-set or level, you'll be walked through the clear, step-by-step instructions, but familiarity with a broad range of web development skills and WordPress know-how will allow you to gain maximum benefit from this book.
ABOUT THIS AUTHOR
6 Comments
subscribe comments feedTrackbacks/Pingbacks
Leave a Reply
Popular Series
Related Posts
Great article mate.
Thanks Aerendyl, really glad you enjoyed it!
thanks, this is great. just yesterday i was thinking about if this would work in any way!
This will prove to be handy soon, thanks for the nicely laid out info on what is possible.