WordPress: ClassyBody Plugin

ClassyBody plugin adds contextually-relevant classes to the body tag of your WordPress blog, and gives you the power to control the look and feel of your blog using CSS. You could make your single pages look different or a single post have a festive theme with modification of the CSS. In other words —”it change the appearance of […]

ClassyBody plugin adds contextually-relevant classes to the body tag of your WordPress blog, and gives you the power to control the look and feel of your blog using CSS. You could make your single pages look different or a single post have a festive theme with modification of the CSS.

In other words —”it change the appearance of any page element, purely in CSS, based on what kind of webpage Wordpress blog is displaying. Along the lines of the “is_functions()”, it let you know when you’re on the homepage, a search results page, a single post, etc. Then you can change the header image, or the page background, or perhaps change the dimensions of the sidebar, or whatever…”

ClassyBody v1.0 conditionally adds the following classes to your Body tag:

ClassCondition
homeYour blog’s homepage.
pageAny static page.
page-[ID]Any static page (eg. page-4).
postAn individual (single) post.
post-[ID]An individual (single) post (eg. post-71).
categoryA category archive page.
cat-[ID]A category archive page (eg. cat-12).
archiveA dated archive page.
[Month] [year]A given month’s archives or a single post (eg. March 2006).
searchA search (results) page.
errorA 404 (”page not found”) error page.

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 */<br />body.December, body.January, body.February {<br />&nbsp;&nbsp; background-image: url(&rsquo;images/snowy-background.jpg&rsquo;);<br />&nbsp;&nbsp; }

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 */<br />body.home #header {<br />&nbsp;&nbsp; background-image: url(&rsquo;images/home-header.jpg&rsquo;);<br />&nbsp;&nbsp; }

/* static pages */<br />body.page #header {<br />&nbsp;&nbsp; background-image: url(&rsquo;images/page-header.jpg&rsquo;);<br />&nbsp;&nbsp; }

/* individual posts */<br />body.post #header {<br />&nbsp;&nbsp; background-image: url(&rsquo;images/post-header.jpg&rsquo;);<br />&nbsp;&nbsp; }

/* category archive pages */<br />body.category #header {<br />&nbsp;&nbsp; background-image: url(&rsquo;images/category-header.jpg&rsquo;);<br />&nbsp;&nbsp; }

/* dated archive pages */<br />body.archive #header {<br />&nbsp;&nbsp; background-image: url(&rsquo;images/archive-header.jpg&rsquo;);<br />&nbsp;&nbsp; }

/* search (results) pages */<br />body.search #header {<br />&nbsp;&nbsp; background-image: url(&rsquo;images/search-header.jpg&rsquo;);<br />&nbsp;&nbsp; }

/* 404 error pages */<br />body.error #header {<br />&nbsp;&nbsp; background-image: url(&rsquo;images/error-header.jpg&rsquo;);<br />&nbsp;&nbsp; }

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.

Installation:

This is a plain vanilla plugin and installs in the normal way:

  1. Download ClassyBody, and rename file from .txt to .php.
  2. Upload the file to wp-content/plugins/ folder.
  3. Goto WordPress Admin, and activate the plugin from the plugins page.
  4. Replace the opening Body tag in your active theme’s header.php file with:
    &lt;body class="&lt;?php classybody(); ?&gt;"&gt;

Alister's Blog

WordPress, ClassyBody Plugin