Alister Cameron // Blogologist

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.

mezzoblue.com

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:

  1. Download the latest version of ClassyBody.
  2. Change the extension of the downloaded file from .txt to .php.
  3. Upload the renamed file into your /wp-content/plugins/ directory.
  4. Activate the plugin.
  5. Replace the opening Body tag in your active theme’s header.php file with:
    <body class="<?php classybody(); ?>">
  6. 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.

wordpress, plugin, wordpress plugin, body tag, css, stylesheets, wordpress themes, web design, theme design, mezzoblue, csszengarden

18 Comments

Note: Commenter website links are not no-followed, in case
you were wondering... I believe in rewarding commenters!

  1. ovidiu
    Posted 7 years, 6 months ago // Permalink

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

    anyone can help here please?

  2. ovidiu
    Posted 7 years, 6 months ago // Permalink

    sorry the code got chopped off, see here: http://pastebin.com/f2d96edd7

  3. Mark
    Posted 7 years, 5 months ago // Permalink

    What a great plugin!

    Anybody get this to work with permalinks though? or am i missing something?

    please help!

  4. Posted 7 years, 5 months ago // Permalink

    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?

  5. Posted 7 years, 4 months ago // Permalink

    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

  6. Stacey
    Posted 7 years, 2 months ago // Permalink

    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

  7. Posted 7 years, 1 month ago // Permalink

    works like a friggin charm. thank you, this just made my wordpress site!

  8. Posted 6 years, 3 months ago // Permalink

    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 !

  9. Posted 6 years ago // Permalink

    Great plug-in, I really appreciate the information.

  10. Posted 6 years ago // Permalink

    Great plugin man, i really appreciate your work, thanks!

  11. Posted 5 years, 11 months ago // Permalink

    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.

  12. Posted 5 years, 10 months ago // Permalink

    When is the next version being released?

  13. Posted 5 years, 9 months ago // Permalink

    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!

  14. Stephen
    Posted 5 years, 8 months ago // Permalink

    Installed plugin, but I am getting “Bullets” inserted before my navigation words when I click on individual posts. Any ideas?

    Thanks, Stephen

  15. Alister Cameron
    Posted 5 years, 8 months ago // Permalink

    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

  16. Posted 5 years, 4 months ago // Permalink

    Sweet site, super design , really clean and employ genial .

  17. Posted 5 years, 4 months ago // Permalink

    I have been learning CSS . Just cant wait to come up to the level of you guys,

  18. Posted 4 years, 3 months ago // Permalink

    Hey Alister, I’ve stumbled upon your site, because you saved my problem how to change body id’s. Very kind of you;)

7 Trackbacks/Pingbacks

  1. […] custom coding, but it can be done. In fact, this plugin my Alister Cameron makes it even easier – WordPress Plugin: ClassyBody […]

  2. […] an account? Log in and claim this comment. what about adding some of the features of this plugin: http://www.alistercameron.com/2007/01/04/wordpr… this plugin is brilliant in my opinion. reply  edit  reblog  flag […]

  3. […] using WordPress with the simpleviewer en classybody plugin. For (X)HTML-editing I prefer 1stpage from evrsoft but most of the time I find myself in Notepad. […]

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

  5. […] pripravovaný WordPress 2.8 ? //možno s týmto modulom by sa vyrieÅ¡ila otázka kompatibility: http://www.alistercameron.com/2007/0…in-classybody/ __________________ WordPress po slovensky! http://www.wp.skO […]

  6. […] ClassyBodyhttp://www.alistercameron.com/2007/01/04/wordpress-plugin-classybody/ […]

  7. […] this plugin is very handy and similar to the new functionality of wp 2.8: http://www.alistercameron.com/2007/01/04/wordpress-plugin-classybody/ […]

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*

    • www.medialayer.net
    • madmimi.com
    • splash.oiopublisher.com
    • marketsamurai.com
    • Advertise Here

  • My Posts in Your In-box!

    Enter your email address here for instant updates in your inbox, whenever I post something new.
    Your email address is in safe hands. Relax!
© Copyright 2007 Alister Cameron. All Rights Reserved Theme // Sitemap // RSS