I love really smart CSS and am always on the lookout for a better way to do things. To that end I just love checking out the latest additions to CSS Zen Garden. This is a site that shows how amazingly you can take exactly the same HTML and create a completely different look and feel, based solely on different CSS. But there is one important matter…
Badly marked up HTML spells the death of CSS creativity. You’ll know what I mean if you’ve ever tried to mess around in MySpace. There is a reason why their HTML is devoid of classes and IDs, and why their CSS is somewhat cobbled… they don’t want you to be able to mess with their main page elements!
But CSS Zen Garden’s HTML is a good example of how to do it right, as is the website/blog of its creator, Dave Shea – Mezzoblue. Now speaking of that (and getting to the point of this post!), I noticed that Dave’s gone with a pretty funky colour scheme approach, where he stays with a particular colour scheme for a few months and then changes to a new one, based on the colours of a picture he chooses for the header. Great idea, and the design is really nice too.
So being a WordPress user, I wondered how I might achieve something similar, but purely in CSS (Dave passes a querystring parameter to his CSS file, which I assume is dynamically generated.) And this led me to something I’ve played around with before that’s very powerful: adding classes to the Body tag.
If you’re going to get smart about CSS, adding classes to your Body tag can add amazing power to what you can achieve in your CSS, since the body tag is the parent element of everything that is displayed on the page. So it follows that any class you add to the body tag is information you have at hand for any CSS styling you apply to any other HTML element on the page. Think about that for a minute.
How can this make WordPress templates smarter?
Great question, dear Padwan Padawan. For my purposes I’d like to be able to change the appearance of any page element, purely in CSS, based on what kind of webpage my WordPress blog is displaying. Along the lines of the “is_functions()”, I’d like to know when I’m on the homepage, a search results page, a single post, etc. Then I’m free to change the header image, or the page background, or perhaps change the dimensions of the sidebar, or whatever…
But I’d like to go further. I’d like a certain different look to pages related to one of, say, three different categories. Or I’d like all posts from December thru February to have a snowy/winter background theme (for you Northern Hemisphere-ites!).
So to cut a long story short, I created my first (yay!) WordPress plugin that lets you do all of that, and whatever your imagination would like to do, thanks to the simple addition of classes to the Body tag. (Jumping ahead, I reckon this would make a very logical addition to the WordPress core, but that’s something you can fight for or against in the comments.)
What does this plugin do?
ClassyBody adds contextually-relevant classes to your body tag. That’s it! What you do with this added power (and I do mean power) is only limited by your CSS skills. Look out for the next version of my site design, where I am planning to get into this a fair bit…
Since ClassyBody only adds classes to your Body tag, you can safely install this plugin without the fear that it will mess up your existing design, unless – by chance – you’re already adding classes to your Body tag. But if not, have no fear firing up this plugin. Its power will only come to the fore when you start messing with your CSS and taking advantage of it.
ClassyBody v1.0 conditionally adds the following classes to your Body tag:
| Class | Condition |
|---|---|
| home | Your blog’s homepage. |
| page | Any static page. |
| page-[ID] | Any static page (eg. page-4). |
| post | An individual (single) post. |
| post-[ID] | An individual (single) post (eg. post-71). |
| category | A category archive page. |
| cat-[ID] | A category archive page (eg. cat-12). |
| archive | A dated archive page. |
| [Month] [year] | A given month’s archives or a single post (eg. March 2006). |
| search | A search (results) page. |
| error | A 404 (“page not found”) error page. |
Why not do this in PHP (like some templates do it)?
Read my lips: PHP for “logic”, CSS for presentation. This is why ClassyBody uses minimal PHP processing (just once) to populate the opening Body tag with classes, and then leaves the rest up the CSS. It’s all that’s needed, assuming you’re prepared to put in a little effort with your CSS. No new PHP variables needed, no repeated function calls, no filling up WordPress template files with more and more PHP. (This is for me all about a cardinal “mantra” I try to stick to: clean HTML with semantic markup, minimal PHP in the template files, as much of the presentation as possible in CSS. Never perfect, but this is the aim.)
Examples
The following examples are very simple and assume the naming convention of the WordPress Default theme’s CSS.
Winter-themed posts. Want all the posts you wrote in Winter to automatically have, say, a snowy-background image? Try something like this (remembering to create and upload the image in question!):
/* a snow theme for winter posts */
body.December, body.January, body.February {
background-image: url('images/snowy-background.jpg');
}
Of course, if you’re Down Under like me, change the months accordingly.
Different header images. Want to have a special header image for each of the different sections of your blog? Try something like this:
/* the homepage */
body.home #header {
background-image: url('images/home-header.jpg');
}
/* static pages */
body.page #header {
background-image: url('images/page-header.jpg');
}
/* individual posts */
body.post #header {
background-image: url('images/post-header.jpg');
}
/* category archive pages */
body.category #header {
background-image: url('images/category-header.jpg');
}
/* dated archive pages */
body.archive #header {
background-image: url('images/archive-header.jpg');
}
/* search (results) pages */
body.search #header {
background-image: url('images/search-header.jpg');
}
/* 404 error pages */
body.error #header {
background-image: url('images/error-header.jpg');
}
Customise a specific category, post or page! You may not want to, but ClassyBody gives you the power to do it. For every category archive listing, and for every individual post, the ID is displayed as a class, in the form cat-[ID], post-[ID] or page-[ID]. This means you can change the appearance of any HTML element on any specific post, page or category listing. Just add the specific customisations to your CSS in the right places.
A live demo – sort of!
I have ClassyBody running on this site, although I have yet to take advantage of it, in CSS. But you can at least see by viewing the source of any page, what classes are being added to the Body. This may be the quickest way for you to see what is added and for it to make the most sense. Make sure to look at an individual (single) post page, as well static pages and a category archive listing.
(Note: If you use this plugin extensively on your blog, let me know and I can add your blog here as an example. Happy to do that for good exampled of usage!)
Is anyone else talking about classes in the Body tag?
Yes, and it’s been talked about for a long time. 37 Signals had a post about it, as did A List Apart, and Eric Meyer was talking about something vaguely similar in 2001!. But to the best of my knowledge there certainly is no WordPress plugin for this, or the promotion of this approach for WordPress templates in general.
Calling all WordPress theme designers…
My personal hope is that more and more WordPress themes will be released and/or retrofitted for this plugin, and that theme designers will take the opportunity afforded by this plugin to get more creative with colours, backgrounds and the CSS customisation of the different kinds of pages in WordPress. Ultimately I’d hope to see this kind of functionality built into WordPress core, even though it’s a relatively simple bit of PHP and can be hacked into header.php easily enough, even without my plugin (if you so desire).
Installation & Usage
This is a plain vanilla plugin and installs in the normal way:
- Download the latest version of ClassyBody.
- Change the extension of the downloaded file from
.txtto.php. - Upload the renamed file into your
/wp-content/plugins/directory. - Activate the plugin.
- Replace the opening Body tag in your active theme’s header.php file with:
<body class="<?php classybody(); ?>"> - You’re done. Now go fiddle with your CSS!
Version History
- Version 1.1.20070202 (2 Feb. 2007). Added custom class feature using custom fields for posts and pages. Read this post for details.
- Version 1.0.20070106 (6 Jan. 2007). Removed extra CR-LFs after closing PHP tag. Think they were causing errors for Jaynee (below) and others. Hope they’re fixed now. Sorry folks. Silly error on my part.
- Version 1.0.20070104 (4 Jan. 2007). Initial public release.
70 Comments
you were wondering... I believe in rewarding commenters!
Hi Alister,
I love you man!! No Seriously! A designer who is thinking about CSS is a designer close to my heart. I am always preaching that CSS is the only way to code!!
Great Post MAte
This is basically what the Sandbox theme does, which came out back in August of 2006.
I actually wrote a crude version of a similar plugin the July before (Dynamic Semantic Classes but with Andy enhanced this to include classes for posts and comments.
So yep, it’s a great idea.
Nice! You definitely make a convincing argument for adding this to a site. I’m going to try it out tonight and see what happens. Thanks for the plugin.
This is awesome.
But I just thought I would mention…
“Great question, dear Padwan.”
If you’re going to make Star Wars in-jokes to a bunch of geeks, you’d better spell the reference right.
It’s “Padawan”
Kidding aside, this is a seriously cool. The thing I love about CSS is that the simplest things can be sooo powerful.
@Stephen – Of all the things to misspell!! I stand corrected and am making the change RIGHT NOW!
Thanks for the good feedback too, everyone.
I’d love to use it, but I get the following error message when I activate the plugin:
Warning: Cannot modify header information – headers already sent by (output started at /home/myname/public_html/wp-content/plugins/classybody.php:41) in /home/myname/public_html/wp-includes/pluggable-functions.php on line 272
what am I missing?
@Jaynee – good question! I had a similar error appear a few times here and there, but never on the public side, only on a few admin pages (which I couldn’t work out). I’ll fiddle for a while and see if I can reproduce it further… stay posted for a fix if needed (or advice – either way).
@Jaynee – Show’s how little PHP I do… I left a few carriage returns after the closing PHP tag! That’s a bad no-no, but I’ve fixed it. Anyone experiencing issues should grab the latest version or just edit their file to remove the extra (blank) lines after the closing PHP tag, which looks like
?>(there should be absolutely NOTHING after that tag!).All fixed! It loaded up fine once I took out those extra carriage returns. Now I just need to figure out how I want to configure my stuff! I can’t wait and will let you know when I’ve got it up.
Hey Al,
Thought you may be interested in the new marketing sherpa marketing report. Didnt know if you were on their list so here is the link to download it if you want:
http://wisdom.marketingsherpa.com
Its not too bad for a free download
Shaun
Thanks mate. I’m having a look now…
This is exactly what I have been looking for. For my first website, I had to learn Flash (for an intro) then CSS for designing the pages..I ended up building three external CSS files to run three separate pages (one with side navigation) and managed to figure out the necessary hacks to make the site look as I wanted (www.killingjanefonda.com)…then I decided to blog….I know zip about PHP, have the desire to constantly change themes, but i have been only 10% successful in modifying any theme to suit my preference. I’ll be back to comment on this plugin once I apply it to my site (cllucas.com)
You. YOU! This is beautiful. Well done.
hi together
where have i to put in “”>”
here is a part of my current header.php-file
/”>
“>Home
THANKS FOR HELP!
does not work with copy the header.php file in. why?
Thanks for the Plug-In Alister. Will have a look
Brilliant. I am in awe. I am not sure how I could have missed this post. This technique will be perfect for a site I am building where I want to retain the same overall look but need to distinguish between two or more distinct sections.
Brilliant plug-in! I’m glad I stumbled across this – I can’t wait to give it a try on my mom’s environmental blog (love your idea of the “winter/summer” style changes – that’s what I’ll try first!). Thanks for sharing this with the rest of us geeks who aren’t yet capable of writing our own plugins – maybe someday I’ll write one worthy of sharing but in the meantime I appreciate yours.
Great stuff. I normally use a custom body class to override the original theme’s CSS globally, but this takes it to another level. It will make my categories so much easier to customize.
can i have the code inserted depending on what category your in ? i’m trying to change out header images but also some headers have flash animations…..can i use the flash embed code with you plugin ?
Does WP automatically know what category is which or which post I want the style on or do I need to add something to the individual posts (e.g. an id )?
@jj – the code, once inserted, always outputs the added classes to the BODY tag. However that should be no issue to you, as nothing happens with that unless you write CSS declarations to take advantage of it. And no, it will sit fine alongside flash stuff.
@j boulanger – WP does know what categories are associated with each post. My plugin fetches this information and turns it into classes in the BODY tag. You don’t need to add an ID or anything, that’s all taken care of between WP and my plugin.
- Alister
world class plugin.I think you read my mind about CSS classification in WP.Great keep it up
Awesome plugin, Alister! I just came across this plugin through someone else and I can see the possibilities are endless to give a blog it’s unique look!
hello Alister,
any chance you could update your plugin so it detects author pages too? something like: http://www.alistercameron.com/author/alister ?
I love this plugin! It’s very powerful!
I have a question/problem that I was hoping you could solve, however.
I’m trying to get categories to appear in the body class for single posts (as you have on this very page) but I can’t get it to work. Any ideas?
Thanks!
I’ve been playing with a blog redesign lately, and got thinking about this..
Ended up sharing it with a few bloggers around the place.
This is a great plugin!
I’ve been using a class on my body tag for the last few years on static sites mainly for navigation effects, banner and headings…stuff like that. But now you’ve inspired me to get it into my blogs.
I have a new theme all ready to go, I’ll try to get this in there so I can release it with some customization power.
Thanks for this Alister.
Keep up the good work! 10q
hi there. any chance that this plugin could also work on tag pages like here? http://pacura.ru/tag/friends/ I want to style the tag page differently.
I mean it has templates, but I find it hard to use css if your plugin does not work with this, so I can’t use pagename neitehr page id to identify this page.
Also some plugins just use a “virtual page” as output, like the now reading plugin does here: http://pacura.ru/library/ – this library “page” is not a real page, making it a little hard to style
Great plugin! I have been looking for this to overhaul my wordpress site for some time, and have banged my head on the wall for days trying to figure out how to do this.
Will this work with 2.5.1 I am assuming?
Thanks tons!
I think more powerful would be to set the body class name this way (for nested categories):
echo( (is_category()) ? “category cat-” . get_category_parents( intval(get_query_var(‘cat’)),false,’ cat-’,true ) . ” ” : “” );
In this case we have all parent categories names in class name too (separated by space). It’s very usefull for more flexible css (=
Great plugin – thanks.
One tiny thing to note, the plugin does not account for *tag based searches*.
Simple enough to fix, I just added:
echo( (is_tag()) ? "tag" : "" );to function classybody() in classybody.php
Hope that helps
Ian
It’s a very nice little plugin! Works well just adding the functions to functions.php too instead of in the plugins directory… not to mention easy to tweak for added versatility. Thanks a bunch!
Hi there,
Know anyone which plugin to use if I want only the first part (first paragraph) of the article to be displayed? If someone want to read more there will be a “read more” link…
On my blog right now is displayed all of article content and I don’t want this…
I’m talking about the latest 10 articles displayed on the first page of my blog.
I’m using WordPress.
Can anyone help?
Vic, you will be pleased to know this is fairly easy.
In your WordPress (2.5) theme editor, found here:
http://www.yourdomainname.com/wp-admin/theme-editor.php
click the link for the “Main Index Template”, and search for…
the_content…replacing it with…
the_excerptThat’s all there is to it!
Hope that helps.
-Alister
Hey Alister, I’ve stumbled upon your site, because you saved my problem how to change body id’s. Very kind of you;). Let’s hope it’s 2.5 compatible.
I really appriciate your work. I am using it at http://www.yogameditationpower.com.
Warning: Cannot modify header information – headers already sent by (output started at /home/myname/public_html/wp-content/plugins/classybody.php:41) in /home/myname/public_html/wp-includes/pluggable-functions.php
I got this too..is something with the session
@Joc. You need to be sure you’ve not added any carriage return at the end of the file, or at the start of it. Classybody must not output anything except via function calls. If, at the time it is read by PHP, it so much as returns a single carriage return, it will cause an error. Easy solution is to remove any and all carriage returns outside of the PHP code.
hey first of I LOVE YOUR PLUGIN!!!!! this has enabled me to do soooo many cool things … one addition i have a suggestion of ..
add tags
i added
echo( (is_tag()) ? “tags” : “” );
to your classybody() function and it work like a charm
Re: Geoff’s comment…
Has anyone gotten it to work by just putting the code into functions.php? I tried it with and without changing the body tag, but to no avail (without it did nothing, with it caused an error).
I’d love to avoid using another plugin, if possible…
Great idea, but there’s a bug when I use custom fields: it accumulate the values for all pages/posts instead of calling a specific value for each post.
any fix?
Never mind my last comment; I just pulled the code I needed from the Sandbox theme instead. Ta da…
Thanks a lot for the post. I ma going to try it right away and post my feed back soon.
I was thinking of doing just this, and was happy to find you’ve already created a plugin for it.
Has it caught on at all? I wonder if we could get this into the WordPress core.
Hey Alister… I can tell these posts are a year old or so, and perhaps I've come across this plugin a little late – but I still wanted to state my appreciation of it… THANKS!
I've been trawling to find something which will display the links in the "recent news" sidebar of my blog in a color according to its category. For example, if the post is a member of the *green* category, the link to it is in green; if its a member of the *blue* category then the link to it is shown in blue, and so on…
Am I barking up the right tree in trying to accomplish this with your fabulous plugin or not?
Many thanks
Tim
i think wp team will be contact you and discuss with you since you have lot input to the wp core.
just tried adding this: <code>echo( (is_attachment()) ? "attachment " : "");</code> and it works perfectly
at least I can't find any problems…
It´s a pity. My CSS skills do not reach to make such changes!
Is this mean we could change our body class based on page, single, archive and else ?
I made the mistake of upgrading to WP 2.7 and now Classy Body doesn’t work any more.
Is there a fix or a workaround you can recommend please?
Thanks
TB
I am trying to encase this plugin into an if exist statement, so in case I turn off all plugins for debugging, this plugin will not throw an error. I tried:
<?php if (function_exists('classybody')) {but that only partially works. When I do it like this and the plugin is activated, it will print out i.e. home on my homepage !?print '';
} else {
print '';
} ?>
anyone can help here please?
sorry the code got chopped off, see here: http://pastebin.com/f2d96edd7
What a great plugin!
Anybody get this to work with permalinks though? or am i missing something?
please help!
Great idea, but there’s a bug when I use custom fields: it accumulate the values for all pages/posts instead of calling a specific value for each post.
any fix?
Hmm, that would be a little bit like what Alister wrote about Knuttz recently. I am not sure of the easiest way to leverage it.. maybe an invisible category “hot”. It might also have some use combined with Alister’s Classy Body Plugin so that not only can you have a different look for a category, almost like a seperate blog, but also display the top posts in that section. Note:- I haven’t tested these plugins yet
Hey,
Really like your plugin! Its FAB! Have one question though. I am wanting my posts to inherit the category syle that it is placed under. Is there any way to do this?
Thanks
Stacey
works like a friggin charm. thank you, this just made my wordpress site!
I have t say CSS is really wonderful thing . But I doot think I have enough patience to learn . I have given up for several times ! But Your work seems wonderful , Maybe I will learn again !
Great plug-in, I really appreciate the information.
Great plugin man, i really appreciate your work, thanks!
This is a great help for me when it comes to creatively doing a word press site. It also helps how to smartly plug-in that adds up into the body tag through CSS.
When is the next version being released?
I think wordpress is brilliant. In the past for every little piece of coding people were hiring programmer and the scores were pretty high. WP made it so easy!
Installed plugin, but I am getting “Bullets” inserted before my navigation words when I click on individual posts. Any ideas?
Thanks, Stephen
The short answer, Stephen, is that this plugin really doesn’t serve a purpose any more, if you are up-to-date with WordPress, which now has this “capability” built-in.
See this blog (as an example) which explains it:
http://www.blogtap.net/using-the-wordpress-body_class-function-to-apply-custom-css-based-on-conditions/
My point is, why use a plugin when you’ve now got a core function?
Now, as to the bullets, it may be that your CSS is messing up due to some of the body classes my plugin adds.
Cheers,
-Alister
Sweet site, super design , really clean and employ genial .
I have been learning CSS . Just cant wait to come up to the level of you guys,
Hey Alister, I’ve stumbled upon your site, because you saved my problem how to change body id’s. Very kind of you;)
55 Trackbacks/Pingbacks
Posted -1928 years ago
Posted -1928 years ago
Posted -1928 years ago
Posted -1928 years ago
Posted -1928 years ago
Posted -1928 years ago
Posted -1928 years ago
Posted -1928 years ago
Posted -1928 years ago
Posted -1928 years ago
Posted -1928 years ago
Posted -1928 years ago
Posted -1928 years ago
Posted -1928 years ago
Posted -1928 years ago
Posted 6 years, 4 months ago
adding class to body…
new found wordpress plugin: ClassyBody. very powerful. and damn smart.
tags:
……
Posted 6 years, 4 months ago
[...] WordPress Plugin: ClassyBody Add a class to the body tag of your WordPress blog depending on various parameters such as single page, page, post, category etc. (tags: wp-plugins plugin wordpress css webdesign) [...]
Posted 6 years, 4 months ago
[...] Alister’s Blog [...]
Posted 6 years, 4 months ago
[...] ClassyBody Add a class to the body tag of a WordPress blog depending on various parameters such as single page, page, post, category etc. You could make your single pages look different or a single post have a festive theme with modification of the CSS. [via wltc] (tags: wordpress) [...]
Posted 6 years, 4 months ago
[...] plan to exploit my ClassyBody plugin to add spice and variety to different sections/categories of the [...]
Posted 6 years, 4 months ago
[...] same thinking is behind my first WordPress plugin, my WordPress mod_rewrite contributions, and my Habari logo idea… do you get [...]
Posted 6 years, 3 months ago
[...] have updated my ClassyBody WordPress plugin to v1.1 with the addition of ad-hoc custom CSS [...]
Posted 6 years, 3 months ago
[...] ClassyBody adds contextually intelligent CSS classes to your BODY tag, giving the more high-powered designers out there much greater control of the CSS of a given WordPress page. [...]
Posted 6 years, 3 months ago
[...] ClassyBody añade nuevas funciones para la gestión de estilos para diseñadores de plantillas en WordPress. [...]
Posted 6 years, 3 months ago
Posted 6 years, 3 months ago
Posted 6 years, 3 months ago
[...] ClassyBody adds contextually intelligent CSS classes to your BODY tag, giving the more high-powered designers out there much greater control of the CSS of a given WordPress page. [...]
Posted 6 years, 3 months ago
Posted 6 years, 3 months ago
Posted 6 years, 3 months ago
Posted 6 years, 2 months ago
Posted 6 years, 2 months ago
Posted 6 years, 2 months ago
[...] it generates exactly the kind of HTML that a CSS junkie like me drools over. You may recall my ClassyBody plugin of a few months ago. This plugin was trying to do in one tag (the BODY tag) what Sandbox does right [...]
Posted 6 years ago
Posted 5 years, 9 months ago
Posted 5 years, 8 months ago
Posted 5 years, 6 months ago
[...] As I said, I’ll ask Ben to weigh in below in the first comment section with his thoughts. You can find out more about Alister at his site here and the Classy body plugin Alister refers to in the clip is here. [...]
Posted 5 years, 4 months ago
[...] WordPress Plugin: ClassyBody (tags: wordpress plugin css) [...]
Posted 5 years, 4 months ago
[...] tela gerada pelo WordPress e, assim, facilitar a criação do CSS. O You Are Here é baseado no plugin ClassyBody de Alister Cameron. Porém, o plugin dele criava as identificações baseado no ID, e isso muitos vezes gerava alguns [...]
Posted 5 years, 3 months ago
Posted 5 years, 3 months ago
[...] Classy Body [...]
Posted 5 years, 3 months ago
Posted 5 years, 2 months ago
Posted 5 years ago
Posted 4 years, 8 months ago
Posted 4 years, 8 months ago
Posted 4 years, 7 months ago
[...] ClassyBody – A very powerful plugin that hooks simple CSS classes to the body tag. You can modify the look and feel of every part of your site with these hooks very easily. [...]
Posted 4 years, 6 months ago
Posted 4 years, 4 months ago
Posted 4 years, 3 months ago
Posted 4 years, 3 months ago
Posted 4 years, 2 months ago
Posted 4 years ago
Posted 3 years, 7 months ago
Posted 2 years, 9 months ago
Post a Comment