Body Tag

Body Class Tricks For WordPress Sites

One of the most useful tags that WordPress supplies in styling a site is the <body <?php body_class(); ?>> tag. It supplies you with 38 or so tags that can be applied dynamically to any page in your WordPress site based on what page the visitor is viewing. You can read up on exactly what’s included by default on the Codex page.

Today I’d like to show you a few functions that I often use to enhance the body class tag and make it more useful for me.

Which Browser The Visitor Is Using

Not all browsers are created equally. Webkit based (think Chrome and Safari) browsers render text and form elements differently from Gecko browsers (think Firefox) and that doesn’t even take into consideration the awful mess that is Internet Explorer. In particular, I’ve had issues getting absolutely positioned form elements to line up properly between Firefox and Chrome. If you’re using a percentage based responsive design, you’ll also notice that the browsers don’t round numbers the same which can cause some layout ugliness. I found a solution to help with these problems at Perishable Press.

function organizedthemes_browser_body_class($classes) {
global $is_gecko, $is_IE, $is_opera, $is_safari, $is_chrome;

if($is_gecko) $classes[] = 'gecko';
elseif($is_opera) $classes[] = 'opera';
elseif($is_safari) $classes[] = 'safari';
elseif($is_chrome) $classes[] = 'chrome';
elseif($is_IE) $classes[] = 'ie';
else $classes[] = 'unknown';

return $classes;
}
add_filter('body_class','organizedthemes_browser_body_class');

I modified the original function a bit so it would fit my needs. What this does is place a new class inside the body tag for Firefox (gecko), Opera (opera), Safari (safari), Chrome (chrome), Internet Explorer (ie) and everyone else (unknown). To use this, paste the code above inside your functions.php file above the closing ?>

Here is a recent situation I had where the submit button on a newsletter sign up form was one pixel taller in Firefox than in Chrome.

Chrome and Firefox Body Class Example

The top two pictures show how the sign up box looked originally in Chrome (left) and Firefox (right). The Firefox button was just a bit too tall. So with our new browser body class we used this CSS to address the problem:

#newsletter input.button {
position: absolute;
top: 0;
right: 3px;
width: 78px;
border: none;
text-transform: uppercase;
font-size: 12px;
background-color: #cdcdcd;
cursor: pointer;
padding-top: 3px;
padding-bottom: 3px;
}

.gecko #newsletter input.button {
padding-top: 2px;
}

I designed the button with the top snippet that works everwhere except in Firefox where it just needs 2 pixels of padding on the top instead of 3. By adding the gecko class before the selector I can target based on browser. Quite a handy trick.

Add Category Name To Single View

By default the body_class adds the category name when you’re viewing an archive, but it doesn’t add the category name when you’re viewing a single post. This can be an easy to way to apply styling to every post that belongs to a category just by adding a bit of styling to your CSS file. Here is the filter you’ll need to add to your functions.php file. Like the above snippet, add it before the closing ?>.

function organizedthemes_category_single($classes) {

if (is_single() ) {
global $post;
foreach((get_the_category($post->ID)) as $category) {
$classes[] = $category->category_nicename;
}
}

return $classes;

}
add_filter('body_class','organizedthemes_category_single');

I found this one in a WordPress Support Forum article. Now if you’d like all the posts inside a category called “News” to have a silver background, you can use something like this in your CSS:

body.news.single {
background-color: #ccc;
}

Now when you’re viewing a single post in the category of “News” the body background will be silver. You can use that same principal to adjust layouts, add background images or even CSS3 animations. Quite a useful snippet.

Add Class From Theme Options Page

I’m a big fan of the WordPress Options Framework because it works, is easy for me to set up and more importantly it is easy for my customers to use too. In the spirit of “make decisions, not options” it’s nice to include a few pre-built color schemes for your WordPress theme. You could use conditional statements to load a secondary stylesheet, but often that’s a bit overboard plus it causes an additional file to be requested and loaded. That can slow down your site just a bit.

As an alternative, you can add a body class that is created from a Options Framework selection. Here is the function I use for that:

function organizedthemes_body_scheme($classes) {

// add color scheme to classes
$classes[] = of_get_option('scheme','');

// return the $classes array
return $classes;
}
add_filter('body_class','organizedthemes_body_scheme');

What this does is take the value of the option that I’ve specified, in this case “scheme” is the option ID, and applies it to the body_class tag. Say I’d like the theme to have a light and a dark scheme that people can use. I include those in my options and when the user selects “light” my body class looks like this:

<body class="home blog logged-in chrome light">

Now to target items for the light style in my CSS, I just need to use a selector like this:

body.light {
background-color: #ebebeb;
}

Obviously you’ll want to change more items than that, but that can show you how to get started. One caveat. If you are going to be using lots of background images in your new styles, it’s best to use a separate stylesheet so the images for every possible style aren’t loaded, but only the ones required for that style.

So these are a just a few options for the body_class function that’s part of WordPress. If you’ve found a helpful use for this function, share it with us in the comments below.

10 Comments

Vedat February 23, 2015

PErfect! Thank you…

Reply

Alex Adekola June 2, 2014

Thanks…this definitely helped me out.

Reply

Shelli Dawdy April 2, 2014

Bill,
Thank you for taking the time to write this article, incredibly helpful.

Your first example, regarding browsers, it’s really got me thinking. I’ve been fiddling around with what I find to be some of the trickiest things, @media queries, and just find myself frustrated.

Wouldn’t the same logic apply somehow, to say, iOS, Android, etc?

Like I said, it’s got me thinking, thanks.

Reply

    Bill Robbins April 3, 2014

    I’m glad it was helpful Shelli. There is a project on Github that allows for specific mobile device detection at https://github.com/serbanghita/Mobile-Detect

    It might give you what you need to target various mobile devices separately from one another. I haven’t tried it out, but it might be worth a shot.

    Reply

Pieter Goosen February 14, 2014

Thanks for the info. Will definitly use this in my website.

Reply

How to do damn near anything with WordPress – Stephanie Leary October 9, 2012

[…] Body class tricks […]

Reply

This Week In WordPress: Apr 30, 2012 | Max Foundry April 30, 2012

[…] Handy WordPress Body Class Reference Options abound in this handy reference from Organized Themes. Creating a function to detect browsers and add a special class is definitely one of the finer nuggets in the post. Especially helpful for pesky cross-browser sizing issues. […]

Reply

Brian Krogsgard March 22, 2012

Nice examples, Bill. I just used one similar to yours for adding the category to the body class, except it can be applied for any taxonomy, and similarly controlled with conditionals.

Pretty handy if you want to make color or logo changes (which is what I’m doing) on a per-post or archive basis depending on the term it relates to.

http://snippi.com/s/sv7qw2d

Reply

    Bill Robbins March 22, 2012

    Thanks for sharing Brian. With all the custom taxonomies flying around these days that’ll be quite useful.

    Reply

Leave a Reply to Pieter Goosen Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get all themes with lifetime updates for 95 USD.View All Promotions
+ +