GeoDirectory

Add WordPress Custom Body Class

Paolo

WordPress Add Class to Body

In many cases, the auto-generated classes are not sufficient and we may need to add some custom classes.

To add custom classes, we will use the WordPress filter:

  1. body_class

Below we will show you snippets of the most requested examples.

But first a little introduction to explain to beginners more about Body Classes.

WordPress Custom Body Classes are something any WordPress developer will need to deal with, sooner or later.

Using a plugin for this would be overkill because in most cases all we need are a couple of lines of code.

So, how do we add WordPress Custom Body classes?

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 on which page is visited, WordPress will output specific classes.

1) For the default “Hello World” post, 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 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.

When copying the following snippets into your functions.php file, new custom body classes will appear on your website markup.

We will be using the body_class filter.

Adding a WordPress custom body class

function my_custom_body_class($classes) {<br />
// add 'my-class' to the default autogenerated classes, for this we need to modify the $classes array.<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
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 WordPress custom body classes

function my_custom_body_classes($classes) {<br />
// add 'my-class' and 'my-class-2' to the default autogenerated classes, for this we need to modify the $classes array.<br />
$classes[] = 'my-class';<br />
$classes[] = 'my-class-2';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom classes via body_class filter<br />
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 on one particular page where we want to add some custom style via CSS?

Adding a WordPress custom body class to a specific page

This can be done in several ways:

1) Add a custom body class using the page ID

function my_custom_body_class_id($classes) {<br />
// add 'my-class' only to page with ID 1.<br />
if ( is_page( '1' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_id');

This will be the result on the page with id 2, while all other pages 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 a custom body class using the page slug

function my_custom_body_class_slug($classes) {<br />
// add 'my-class' only to page with slug contact-form.<br />
if ( is_page( 'contact-form' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_slug');

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

3) Add a custom body class using the page title

function my_custom_body_class_title($classes) {<br />
// add 'my-class' only to page with title Contact Form.<br />
if ( is_page( 'Contact Form' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_title');

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

4) Add a custom body class using the page template

function my_custom_body_class_template($classes) {<br />
// add 'my-class' only to pages using my custom template.<br />
if ( is_page_template( 'my-custom-page-template' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
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. All other pages 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 WordPress custom body class to a category or tag archive

1) Categories

function my_custom_body_class_category($classes) {<br />
// add 'my-class' only to the my-category archive.<br />
if ( is_category( 'my-category' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_category');

2) Tags

function my_custom_body_class_tag($classes) {<br />
// add 'my-class' only to the my-tag archive.<br />
if ( is_tag( 'my-tag' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
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 a custom body class to the single page of every post in the category my-category or with the tag my-tag.

We will use in_catgeory and has_tag functions.

1) Categories (both archive and single page)

function my_custom_body_class_in_category($classes) {<br />
// add 'my-class' to the my-category archive and single posts of the category.<br />
if ( in_category( 'my-category' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
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) {<br />
// add 'my-class' to the my-tag archive and single posts with that tag.<br />
if ( has_tag( 'my-tag' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
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.

Adding the Category name as WordPress custom body class in each post

If you wish to add the category nice name as a custom body class to each post, you will need the following snippet: 

function my_custom_body_class_category_in_single($classes) {<br />
     if (is_single() || is_category()) {<br />
       global $post;<br />
       foreach((get_the_category($post->ID)) as $category) {<br />
         $classes[] = $category->category_nicename;<br />
       }<br />
     }<br />
     return $classes;<br />
   }<br />
add_filter('body_class','my_custom_body_class_category_in_single');

For example, if you are visiting a post of the category “Travel” the above snippet will add the body class Travel so that you can style posts of each category differently.

Adding a WordPress custom body class when visited from a mobile device

We can easily do so using the wp_is_mobile function. 

function my_custom_body_class_mobile( $classes ) {<br />
    if ( wp_is_mobile() ) {<br />
        $classes[] = 'mobile';<br />
    }<br />
    return $classes;<br />
}<br />
add_filter( 'body_class', 'my_custom_body_class_mobile' );

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

GeoDirectory

GeoDirectory adds its custom body classes. Every GeoDirectory page for example will have the body class: geodir-page.

If the advance search and/or the custom post type add-on are installed, the classes: geodir_advance_search and 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.

For example in Places, there will be post-type-archive-gd_place.

In the 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 a time when other custom body classes could be needed. Let’s give some examples:

1) Add a custom body class to the location page

// add extra class via body_class filter<br />
add_filter('body_class', 'gd_location_custom_body_class');</p>
<p>function gd_location_custom_body_class($classes)<br />
{<br />
if (geodir_is_page('location')) {<br />
$classes[] = 'gd-location';<br />
}<br />
// return the modified $classes array<br />
return $classes;<br />
}

the same conditional tag 

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

2) Add a custom body class to the listing preview page

// add extra class via body_class filter<br />
add_filter('body_class', 'gd_preview_custom_body_class');</p>
<p>function gd_preview_custom_body_class($classes)<br />
{<br />
if (geodir_is_page('preview')) {<br />
$classes[] = 'gd-preview';<br />
}<br />
// return the modified $classes array<br />
return $classes;<br />
}

3) Add a custom body class on detail page for different price packages

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

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

add_filter('body_class','gd_search_cpt_custom_body_class');</p>
<p>function gd_search_cpt_custom_body_class($classes) {<br />
if (isset($_GET['stype']) == 'gd_place') {<br />
$classes[] = 'search_gd_place';<br />
}<br />
return $classes;<br />
}

WooCommerce

1) Add a custom body class to all WooCommerce pages

function my_custom_body_class_woo($classes) {<br />
// add 'my-class' to all woocom pages.<br />
if ( is_woocommerce() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo');

2) Add a custom body class to the Shop page only

function my_custom_body_class_woo_shop($classes) {<br />
// add 'my-class' only to the shop page.<br />
if ( is_shop() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_shop');

3) Add a custom body class to the Product Category page

function my_custom_body_class_woo_cat($classes) {<br />
// add 'my-class' only to the product category archives.<br />
if ( is_product_category() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_cat');

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

function my_custom_body_class_woo_cat_a($classes) {<br />
// add 'my-class' only to a specific product category archive.<br />
if ( is_product_category( 'my-category' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_cat_a');

5) Add a custom body class to the Product page

function my_custom_body_class_woo_prod($classes) {<br />
// add 'my-class' to product pages.<br />
if ( is_product() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_prod');

6) Add a custom body class to a specific Product page

function my_custom_body_class_woo_prod_a($classes) {<br />
// add 'my-class' only to the my-product single page.<br />
if ( is_product( 'my-product' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_prod_a');

There are plenty of other WooCommerce conditional tags such as

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

Adding WordPress 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 pages you will need this:

function my_custom_body_class_bbpress($classes) {<br />
// add 'my-class' only to bbpress page.<br />
if ( is_bbpress() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
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 ) {</p>
<p>foreach ( $classes as $key =&amp;amp;gt; $value ) {<br />
if ( $value == 'my-class' ) unset( $classes[ $key ] );<br />
}</p>
<p>return $classes;</p>
<p>}<br />
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!