Imagine how much power you would yield over WordPress site designs if every page had its own unique body class.
You could switch the header logo for different categories. You could add different background images and animations for specific taxonomies. You could even change text justification based on the simultaneous occurrence of specific tags, categories and taxonomies.
Sounds like a dream world of a parallel universe.
The ability to target every element of a WordPress page without affecting all other pages at the same time is a lot of ego food for control freak web designers like me. The possibility of it gets my fingers tingling with excitement.
After spending half the day working on a WP e-Commerce site to get category slugs auto inserted into page body tags as CSS classes, I finally followed my first thought: find a WordPress plugin that does it.
Wish I’d paid attention to instinct earlier but I’m glad I spent the day experimenting because I learned a lot about the body_class() template tag.
A little history
I am using the Genesis theme to build a stylish WP e-Commerce site for one of my clients. She wants different page designs for specific product categories. The Genesis way to add the category tag as a body class is to add this to a child theme’s functions.php:
/** Add custom body class to the head */
add_filter( 'body_class', 'add_body_class' );
function add_body_class( $classes ) {
if ( is_category( 'custom-category' ))
$classes[] = 'custom-class';
return $classes;
}
Source: StudioPress.
The generic WordPress way to do it is to put this code into the active theme’s functions.php:
// add category nicenames in body class
function category_id_class($classes) {
global $post;
foreach((get_the_category($post->ID)) as $category)
$classes[] = $category->category_nicename;
return $classes;
}
add_filter('body_class', 'category_id_class');
Source: wpbginner.com
I could get the generic way of adding custom post classes to work for regular posts but not at all for WP e-Commerce product pages.
The Genesis method works well in custom page templates but failed, no matter where I stuck it, to work for generic single page listings. I tried several filters and custom loops but could not get it to work. You will be the first to know when I do because I’ll write a guide to it.
The solution that worked
A plugin I almost dismissed because it is over 450 days old. That sounded ancient until I resolved it to being only a few months over a year old.
The plugin for adding custom page and post classes to the body tag is called Body Class Enhanced for WordPress. It fills the body tag’s class=”” element with extra classes based on the tags, categories and taxonomy associated with a page.
All those extra body classes allow us to write custom CSS to target any page individually of all other pages and to target a group of pages in isolation from other pages.
If you ever need to automatically insert custom body CSS classes into your pages, install this plugin. There are no settings to configure. I recommend you use it with the Web Developer Firefox addon so you can test your code live.
A note of caution
They say power corrupts and absolute power corrupts absolutely. Well, having absolute power over the design of every page could well and truly absolutely corrupt your page designs. Wield this CSS power as humbly as a Jedi Night wields his lightsaber.
Resources
Body Class Enhanced for WordPress
I am delighted to learn WordPress and Genesis tricks and tips. Please leave comments below.
wpDiscuz