Changing the world. One blog(ger) at a time.

WordPress Plugin: ClassyBody

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.

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!):

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!)

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).

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

@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!).

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)

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.

@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.

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.
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 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.

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?

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 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?

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')) {
print '';
} else {
print '';
} ?> 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 !?

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

55 Trackbacks/Pingbacks

WP Plugin: ClassyBody WP 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. In other words, it gives you the power to control the look and feel of your blog using CSS but dependent on the condition

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

Comment Analysis contains a suite of functions which examine the comments on your blog. Category Overload provides an alternate administrative interface for managing categories in WordPress. Docs and download. 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. FirstRSS and SideRSS will let you insert an RSS feed into a template with only one

easy to add Most popular posts by month, all time, categories, etc. WordPress Stats – Tracks views, pageviews, referrers and clicks. It shows what people clicked on as well as search terms. You need a WordPress.com API key to activate this. StylingClassyBody- 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. File Icons – Adds icons to links via CSS.

t have passion and purpose, greater productivity wonâ€™t help you! – 14,132 Views The 100% guaranteed way to get a front page story on Digg! – 12,811 Views How to grow your blog by over 2000 per cent in one month! – 9,196 ViewsWordpress Plugin: ClassyBody- 8,229 Views

company. I wanted page specific styling on the static pages so that I could have: A banner on the index and not on sub-pages Different CSS Rules to apply on static pages More specificity for my CSS So more research yielded theClassy Bodyplugin which gives me the ability to style the site according to the type of content being displayed. Class Condition home Your blogâ€™s homepage. page Any static page. page-[ID] Any static page (eg. page-4).

next Prime Minister caught on camera eating ear wax – 25,925 views If you donâ€™t have passion and purpose, greater productivity wonâ€™t help you! – 19,074 views The 100% guaranteed way to get a front page story on Digg! – 15,683 viewsWordpress Plugin: ClassyBody- 14,175 views How to grow your blog by over 2000 per cent in one month! – 12,830 views

[…] 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) […]

[…] Are you looking to control the look and feel of your blog using CSS?. Alister Cameron has released a plugin “ClassyBody” for WordPress. You can very safely and easily install “ClassyBody” without any fear of messing your existing design. You can find the complete details at Alister Cameron`s blog […]

[…] ClassyBody WordPress Plugin adds CSS styles to your WordPress Theme’s HTML body tag for each type of page view you may use on your WordPress blog. For instance, if you would like your category pages to look a specific way when generated, you can style a “look” for the page from the category or cat-ID# CSS style. […]

[…] 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 […]

[…] I’m trying not to have to run parallel installs of WP if I don’t have to. Oli on May. 14, 2007 Have a look at this. BinaryMoon on May. 14, 2007 I would stick the dog based stuff in a separate category. Then install this plugin […]

[…] 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. […]

[…] useful plugin I found in a while (btw. this function will be integrated in wp 2.8 as far as I know) http://www.alistercameron.com/2007/0…in-classybody/ I’d appreciate an answer to these suggestion and thx for the great […]