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:
If you are a coding ninja looking for a quality design, then Clean Cut is for you. Clean Cut is a modern psd template for sale on ThemeForest created by Drew Douglass of Dev-Tips. Clean Cut is perfectly suited for software or web applications.
ABOUT THIS AUTHOR
9 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.
Hello Nick,
I am QA Analyst, and l found this post very useful to our company’s Web Designer.
Thanks For sharing this information.
Hey, thanks for the information.
I was looking for this.
Just to be sure, if i need to style a page with id 98, adding the following code to the custom style sheet should do the job right?
.pageid-98 #content {
padding: 10px 10px 10px 15px;
}
or is it something different?
I tried the above code but did not work.
I tried with other classes you have provided as well.
Any help ?
I really favored %BLOGTITLE%. Place your business in on the finish line by using keywords which will get your website noticed on the internet, Bing or Yahoo search results!