WordPress has both a body_class function and a body_class filter (hook).

The body_class function is used in themes to add the classes autogenerated by WordPress, to the body tag of your website.

This is how it is added to the header.php file of your theme:

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

Depending which page is visited, WordPress will output specific classes.

1) For the “Hello World” dummy post, created by WordPress when installing your blog, the body classes are:

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-sidebar customize-support">

2) The body classes of the sample-page are:

<body class="page page-id-2 page-template-default logged-in admin-bar no-sidebar customize-support">

3) The body classes of the category archive pages are:

<body class="archive category category-uncategorized category-1 logged-in admin-bar no-sidebar hfeed customize-support">

4) The body classes of the author archive page are:

<body class="archive author author-admin author-1 logged-in admin-bar no-sidebar hfeed customize-support">

5) The body class of the home page (assuming you have one)

<body class="home blog logged-in admin-bar no-sidebar hfeed customize-support">

The 5 examples provided above, are common to most default themes and these are taken from the new Twenty Sixteen theme, when the admin user is logged in. When logged out, the classes will be slightly different.

Classes in HTML are used to style a web page via CSS and in many cases, the auto-generated classes are not sufficient and we may need to add some custom class.

To add custom classes, we will use the body_class filter.

The following snippets, if added to the functions.php file of your active theme, will add custom body classes to your website, using the body_class filter.

Adding a custom body class

function my_custom_body_class($classes) {
	// add 'my-class' to the default autogenerated classes, for this we need to modify the $classes array. 
	$classes[] = 'my-class';
	// return the modified $classes array
	return $classes;
}

// add my custom class via body_class filter
add_filter('body_class','my_custom_body_class');

This will add the new class : “my-class” to the body tag of all pages of your website.

<body class="home blog logged-in admin-bar no-sidebar hfeed my-class customize-support">

What if I need to add more than 1 class?

Adding 2 or more custom body classes

function my_custom_body_classes($classes) {
	// add 'my-class' and 'my-class-2' to the default autogenerated classes, for this we need to modify the $classes array. 
	$classes[] = 'my-class';
	$classes[] = 'my-class-2';
	// return the modified $classes array
	return $classes;
}

// add my custom classes via body_class filter
add_filter('body_class','my_custom_body_classes');

This will be the result:

<body class="home blog logged-in admin-bar no-sidebar hfeed my-class my-class-2 customize-support">

What if i want to add a body class only in one particular page where we want to add some custom style via css?

Adding a custom body class to a given page

This can be done in several ways:

1) Add custom body class using the page ID

function my_custom_body_class_id($classes) {
	// add 'my-class' only to page with ID 1. 
	if ( is_page( '1' ) )
        $classes[] = 'my-class';
	// return the modified $classes array
	return $classes;
}

// add my custom class via body_class filter
add_filter('body_class','my_custom_body_class_id');

This will be the result on the page with id 2, while all other page will not have the custom class.

<body class="page page-id-2 page-template-default logged-in admin-bar no-sidebar my-class customize-support">

2) Add custom body class using the page slug

function my_custom_body_class_slug($classes) {
	// add 'my-class' only to page with slug contact-form. 
	if ( is_page( 'contact-form' ) )
        $classes[] = 'my-class';
	// return the modified $classes array
	return $classes;
}

// add my custom class via body_class filter
add_filter('body_class','my_custom_body_class_slug');

This will add the custom class “my-class” on the page with slug contact-form, while all other page will not have the custom class.

3) Add custom body class using the page title

function my_custom_body_class_title($classes) {
	// add 'my-class' only to page with title Contact Form. 
	if ( is_page( 'Contact Form' ) )
        $classes[] = 'my-class';
	// return the modified $classes array
	return $classes;
}

// add my custom class via body_class filter
add_filter('body_class','my_custom_body_class_title');

This will add the custom class “my-class” on the page with title Contact Form, while all other page will not have the custom class.

4) Add custom body class using the page template

function my_custom_body_class_template($classes) {
	// add 'my-class' only to pages using my custom template. 
	if ( is_page_template( 'my-custom-page-template' ) )
        $classes[] = 'my-class';
	// return the modified $classes array
	return $classes;
}

// add my custom class via body_class filter
add_filter('body_class','my_custom_body_class_template');

This will add the custom class “my-class” on the page using the template my-custom-page-template, while all other page will not have the custom class.

We can also add the custom class to a category or tag page, both via ID or category/tag slug.

Adding a custom body class to a category or tag archive

1) Categories

function my_custom_body_class_category($classes) {
	// add 'my-class' only to the my-category archive. 
	if ( is_category( 'my-category' ) )
        $classes[] = 'my-class';
	// return the modified $classes array
	return $classes;
}

// add my custom class via body_class filter
add_filter('body_class','my_custom_body_class_category');

2) Tags

function my_custom_body_class_tag($classes) {
	// add 'my-class' only to the my-tag archive. 
	if ( is_tag( 'my-tag' ) )
        $classes[] = 'my-class';
	// return the modified $classes array
	return $classes;
}

// add my custom class via body_class filter
add_filter('body_class','my_custom_body_class_tag');

This will only add the custom body class in the archive page of the category my-category and tag my-tag. We can also add custom body class to the single page of every post in the category my-category or with the tag my-tag using in_catgeory and has_tag functions.

1) Categories (both archive and single page)

function my_custom_body_class_in_category($classes) {
	// add 'my-class' to the my-category archive and single posts of the category. 
	if ( in_category( 'my-category' ) )
        $classes[] = 'my-class';
	// return the modified $classes array
	return $classes;
}

// add my custom class via body_class filter
add_filter('body_class','my_custom_body_class_in_category');

2) Tags (both archive and single page)

function my_custom_body_class_has_tag($classes) {
	// add 'my-class' to the my-tag archive and single posts with that tag. 
	if ( has_tag( 'my-tag' ) )
        $classes[] = 'my-class';
	// return the modified $classes array
	return $classes;
}

// add my custom class via body_class filter
add_filter('body_class','my_custom_body_class_has_tag');

These last 2 examples will add the custom class in both the archive page and the single page.

Custom body classes can also be added to 1 or all pages created by a plugin (depending on the plugin).

GeoDirectory

GeoDirectory adds it’s own custom body classes. Every GeoDirectory page for example will have the body class: geodir-page.

If the the advance search and/or the custom post type add-on are installed, the classes: geodir_advance_search geodir_custom_posts will be added respectively.

Example of a GD Home page:

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-sidebar customize-support">

In listings pages (custom post type or category archive) you will find a different class for each Custom Post Type used, for example in Places there will be : post-type-archive-gd_place.

In listing details page you will also find a different class for each Custom Post Type used, for example in Places there will be : single-gd_place.

However there could be time when other custom body classes could be needed. Let’s make some examples:

1) Add custom body class to the location page

// add extra class via body_class filter
add_filter('body_class', 'gd_location_custom_body_class');

function gd_location_custom_body_class($classes)
{
    if (geodir_is_page('location')) {
        $classes[] = 'gd-location';
    }
    // return the modified $classes array
    return $classes;
}

the same conditional tag

geodir_is_page()

can be used for any gd page, for example for the preview page:

2) Add custom body class to the listing preview page

// add extra class via body_class filter
add_filter('body_class', 'gd_preview_custom_body_class');

function gd_preview_custom_body_class($classes)
{
    if (geodir_is_page('preview')) {
        $classes[] = 'gd-preview';
    }
    // return the modified $classes array
    return $classes;
}

3) Add custom body class in detail page for different price pacakges

 // add extra custom class via body_class filter
add_filter('body_class','gd_price_custom_body_class');
function gd_price_custom_body_class($classes) {
global $post; 
if ( $post->package_id == 1) {
    $classes[] = 'price-1';
}
elseif ( $post->package_id == 2) {
    $classes[] = 'price-2';
}
else {}
    // return the modified $classes array
    return $classes;
}

4) Add custom body class in search page for different CPT searched

add_filter('body_class','gd_search_cpt_custom_body_class');

function gd_search_cpt_custom_body_class($classes) {
if (isset($_GET['stype']) == 'gd_place') {
$classes[] = 'search_gd_place';
}
return $classes;
}

WooCommerce

1) Add custom body class to all WooCommerce pages

function my_custom_body_class_woo($classes) {
	// add 'my-class' to all woocom pages. 
	if ( is_woocommerce() )
        $classes[] = 'my-class';
	// return the modified $classes array
	return $classes;
}

// add my custom class via body_class filter
add_filter('body_class','my_custom_body_class_woo');

2) Add custom body class to the Shop page only

function my_custom_body_class_woo_shop($classes) {
	// add 'my-class' only to the shop page. 
	if ( is_shop() )
        $classes[] = 'my-class';
	// return the modified $classes array
	return $classes;
}

// add my custom class via body_class filter
add_filter('body_class','my_custom_body_class_woo_shop');

3) Add custom body class to the Product Category page

function my_custom_body_class_woo_cat($classes) {
	// add 'my-class' only to the product category archives. 
	if ( is_product_category() )
        $classes[] = 'my-class';
	// return the modified $classes array
	return $classes;
}

// add my custom class via body_class filter
add_filter('body_class','my_custom_body_class_woo_cat');

4) Add custom body class to a specific Product Category page

function my_custom_body_class_woo_cat_a($classes) {
	// add 'my-class' only to a specific product category archive. 
	if ( is_product_category( 'my-category' ) )
        $classes[] = 'my-class';
	// return the modified $classes array
	return $classes;
}

// add my custom class via body_class filter
add_filter('body_class','my_custom_body_class_woo_cat_a');

5) Add custom body class to the Product page

function my_custom_body_class_woo_prod($classes) {
	// add 'my-class' to product pages. 
	if ( is_product() )
        $classes[] = 'my-class';
	// return the modified $classes array
	return $classes;
}

// add my custom class via body_class filter
add_filter('body_class','my_custom_body_class_woo_prod');

6) Add custom body class to a specific Product page

function my_custom_body_class_woo_prod_a($classes) {
	// add 'my-class' only to the my-product single page. 
	if ( is_product( 'my-product' ) )
        $classes[] = 'my-class';
	// return the modified $classes array
	return $classes;
}

// add my custom class via body_class filter
add_filter('body_class','my_custom_body_class_woo_prod_a');

There are plenty of other WooCommerce conditional tags such as

  • is_product_tag() for tag archives
  • is_cart() for the shopping cart page
  • is_checkout() for the check out page
  • is_account_page() for the customer account pages

You can find them all here: https://docs.woothemes.com/document/conditional-tags/

Adding custom body classes to pages generated by other plugins

The same can be done for any plugin offering conditional tags. For example you can find the conditional tags of bbPress here: https://codex.bbpress.org/bbpress-conditional-tags/

an example?

1) add a custom body tag to all bbpress page you will need this:

function my_custom_body_class_bbpress($classes) {
	// add 'my-class' only to bbpress page. 
	if ( is_bbpress() )
        $classes[] = 'my-class';
	// return the modified $classes array
	return $classes;
}

// add my custom class via body_class filter
add_filter('body_class','my_custom_body_class_bbpress');

You will find conditional tags for buddypress too and most of the best plugins out there.

Removing Body Classes

While you can add something via filters, you can also remove it:

function remove_body_class( $classes ) { 
 
    foreach ( $classes as $key =&amp;amp;gt; $value ) {
        if ( $value == 'my-class' ) unset( $classes[ $key ] );
    }
     
    return $classes; 
     
}
add_filter( 'body_class', 'remove_body_class' );

Are you having trouble adding or removing body classes from your WordPress website? Ask for a specific example in a comment down below and I will do my best to provide it!

2 thoughts on “Add Custom Body classes

  1. I’d love to add a custom body class to bring the week numbers – eg w01 to w53
    With each body class I’d bring a diferent (weekly!) image in the header.

    I’ve been try variations on the following which worked in a previous theme, but not in twenty sixteen – any ideas? Thanks!

    /* Adds ‘week’ id body-class */
    add_filter( ‘2016-br_body_class’, ‘my_body_class’ );
    function my_body_class( $class ) {
    global $wp_query;

    $time = time() + ( get_option( ‘gmt_offset’ ) * 3600 );
    $class .= ‘ w’ . gmdate( ‘W’, $time );

    if ( is_page() && $wp_query->post->post_parent )
    $class .= ‘ parent-‘ . $wp_query->post->post_parent;

    return $class;
    }

    • Hi and sorry for the late reply. As far as I know “2016-br_body_class” is not a valid hook.

      You should use “body_class” only.

      Let us know if that helped.

      Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

Share This