My Favourite WordPress functions – body class & browser detection

My Favourite WordPress functions – body class & browser detection

The body_class() Function

From WordPress 2.8, themes were able to take advantage of the body_class() function to place location-specific classes on the opening tag, usually located in the header.php file of most themes.

<body class="home blog">

Notice, those are two separate classes, either of which you can use as a selector.

However, if you are on a particular post, the body tag might look like this:

<body class="single postid-64">

And if you are currently looking at a page, then body_class() will generate something like this:

<body class="page page-id-3 parent-page-id-0 page-template-default">

Essentially, body_class() will generate dynamic CSS classes based on the type of content, and under what circumstances, you are currently browsing. For instance, if you are a registered user, and are currently logged in, body_class() will generate a logged-in class on the body tag.

The following is a full list of possible body classes – see WPEngineer.com:

  • rtl
  • home
  • blog
  • archive
  • date
  • search
  • paged
  • attachment
  • error404
  • single postid-(id)
  • attachmentid-(id)
  • attachment-(mime-type)
  • author
  • author-(user_nicename)
  • category
  • category-(slug)
  • tag
  • tag-(slug)
  • page
  • page-parent
  • page-child parent-pageid-(id)
  • page-template page-template-(template file name)
  • search-results
  • search-no-results
  • logged-in
  • paged-(page number)
  • single-paged-(page number)
  • page-paged-(page number)
  • category-paged-(page number)
  • tag-paged-(page number)
  • date-paged-(page number)
  • author-paged-(page number)
  • search-paged-(page number)

How To Add body_class() to My Theme

This is actually the easy part. Assuming you are running WordPress 2.8 (currently in beta, soon to be released), all you have to do is add a new template tag. You’ll need to locate which template file generates the opening <body> tag. This is usually the header.php file.

After you’ve located the <body> tag, just change it to this:

<body <?php body_class(); ?>>

Save the file (and upload to your server, if necessary), and you’re done!


Browser Detection

As with being able to style dynamic pages in wordpress using page classes. You can go one step further and style specifically to each browser – if required – usually when you are coding a very complex design that you want to be pixel perfect in all browsers.

Add the following code to your functions.php file:

add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
	global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

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

	if($is_iphone) $classes[] = 'iphone';
	return $classes;
}

The Result

The final result will look something like this, if you view the source code of your page:

 
<body class="home blog logged-in safari">

How to Use the Browser Body Class

Now that we have the <body> tag outputting a class for the browser we’re using, we can use CSS to target particular styles to elements being viewed in certain browsers. For instance, let’s say this was my default link style:

 
a {
	color: blue;
	text-decoration: underline;
}

Now, let’s make the links a different color when a user views the site in FireFox:

 
.gecko a {
	color: red;
	text-decoration: underline;
}

Notice, all I had to do was prepend the browser class-selector to the style, and now, any time someone using FireFox visits my site, all their links will be red, instead of blue.

One of the most useful applications I’ve discovered is the ability to target Internet Explorer with certain styles. It’s great to be able to just apply slightly different styles to certain elements in order to account for the many bugs in Internet Explorer.


Conclusion

Adding this code to the tag in your header.php file will add extra robustness to your site when targeting CSS selectors to styles and browser inconsistencies.

The resulting code will look something like this when you view source:

<body class="home page page-id-130 page-template page-template-homepage-php logged-in chrome">

This simple line of code has saved me so much time, and hopefully will save your time too!

WordPress cheatsheet

Needing a little help with your WordPress development?

Try this useful cheat sheet, always helpful for reference, allowing you to learn more about wordpress development at the same time.

There’s also a load more here -www.speckyboy.com/14-essential-wordpress-development-and-design-cheat-sheets/

Browse the Site