How to add a custom body class in WordPress

by

For frontend styling, it’s often useful to target elements based on a class of the <body> element.

Learn how to add your own custom body class, or remove existing ones in this blog post.

What are body classes?

Body classes are the CSS class names added to the <body> HTML element, these classes can then be used to apply CSS styling and formatting.

By default, WordPress does a good job of including a number of body classes related to the page, in addition to custom body classes your installed theme/plugins may have added, here is an example of some classes which can get included:

<body class="home page-template-default page page-id-8 wp-custom-logo wp-embed-responsive post-image-aligned-center sticky-menu-fade right-sidebar nav-float-right separate-containers header-aligned-left dropdown-hover">

The above example was taken from the homepage, as you can see WordPress is already including the home class which can be used to target elements specifically on the homepage. There is also the page template, page id, etc. The page-id-xxx is useful to target an individual page.

But what if you want to add your own custom body class, maybe based off some conditionals?

You can do this by adding custom PHP code via a code snippets plugin, or into your theme’s functions.php file. Learn how to add a code snippet in WordPress.

Adding a custom body class

To add your own custom body class, you make use of the body_class filter hook included in WordPress.

This filter hook allows you to filter the list of CSS body class names for the current post or page.

Here is an example of how to add a test-class:

function customprefix_add_body_class( $classes ) {

	$classes[] = 'test-class';

	return $classes;

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

The result of this code is that the <body> now includes a class of test-class:

<body class="home page-template-default page page-id-8 logged-in admin-bar no-customize-support wp-custom-logo wp-embed-responsive test-class right-sidebar nav-float-right separate-containers header-aligned-left dropdown-hover">

Note that I have used customprefix_ in the function name (on the function itself and where it is set on the add_filter), change this to your own custom prefix, the reasoning behind using a custom prefix is documented here.

Conditionally adding a custom body class

You’ll notice with the above code that the body class is added on every page, usually you’d want to only include it conditionally, an example could be that you only want the body class included in December, so you can target that class to add some Christmas CSS styling to the website.

Another example would be that you are building a WooCommerce plugin and you want to include a specific body class if it is the product page and a custom product option from your plugin is enabled.

Here are some examples of how to conditionally add a custom body class in WordPress:

function customprefix_add_body_class( $classes ) {

	// Add body class if it is December

	if ( 12 == gmdate( 'm' ) ) {

		$classes[] = 'test-class';

	}

	return $classes;

}
add_filter( 'body_class', 'customprefix_add_body_class' );
function customprefix_add_body_class( $classes ) {

	// Add body class if it is a WooCommerce product page, and your_custom_meta is set to on

	global $post;

	if ( is_product() ) {

		$product = wc_get_product( $post->ID );

		if ( !empty( $product ) ) {

			if ( 'on' == $product->get_meta( 'your_custom_meta', true ) ) {

				$classes[] = 'test-class';

			}

		}

	}

	return $classes;

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

By adding conditionals around where the body classes are set, you can get a class to be included/excluded depending on any logic you require.

Removing a body class

To remove a body class, you can do so by using this code, in this example if there is a test-class included in the <body> it will remove it.

function customprefix_remove_body_class( $classes ) {

	if ( !empty( $classes ) ) {

		foreach ( $classes as $class_key => $class ) {

			if ( 'test-class' == $class ) {

				unset( $classes[$class_key] );

			}

		}

	}

	return $classes;

}
add_filter( 'body_class', 'customprefix_remove_body_class', 20 );

If you aren’t seeing a class removed, this maybe because the class is getting added on a higher priority than the remove function above. In the example I pass a priority of 20 to add_filter, generally custom body classes will be added on the default 10 priority, and therefore the remove function should occur afterwards. However, some plugins may add body classes at a higher priority, so consider raising the priority accordingly as required.

More on the body_class filter hook

The examples above use the body_class filter hook included in WordPress. I recommend you read the associated documentation for this for further information.

Leave a comment