Add Body Class To Your WordPress Theme

Wordpress allows you to dynamically add CSS classes to the body tag of your WordPress theme.

This will allow you to completely change the look and style of your theme.

All you have to do is add the following into your functions.php page.

/** Add custom body class to the head */
add_filter( 'body_class', 'add_body_class' );
function add_body_class( $classes ) {
   $classes[] = 'custom-class';
   return $classes;

Now you need to make sure that that you have the following method in your body tag.

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

The above method will allow you to output the classes returned in the add_body_class.

Add Category Name To Body Class

If you want to style each individual category page differently to the others you can do this by adding a body class of the category name to the body tag.

To do this you need to use the same technique as above but do something different on just category pages.

// add category names in body class
function get_category_name_body_class($classes) {
    global $post;
    foreach((get_the_category($post->ID)) as $category)
        $classes[] = $category->cat_name;
    return $classes;
add_filter('body_class', 'get_category_name_body_class');

Add Class For Different Browsers

If you want to add a CSS class for different browsers then you can use the following code snippet to add the different browsers in the body tag.

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;
Back to top

Fastest WordPress Hosting With WPEngine

Stunning speed, powerful security, and best-in-class customer service. At WP Engine.

Risk free for 60 days