Adding extra classes in body tag using body_class filter in WordPress

The WordPress body class function body_class() works from WordPress 2.8 version onwards. This function gives the body element different classes and can be added, typically, in the header.php’s HTML body tag. This gives you option to style more effectively with CSS. The code will look like:

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

1. What body_class() Generates?
The body_class() function is quite similar to post_class() function that was introduced in WordPress 2.7. The only differences are the classes it generates. The body_class() function will generate the classes mostly based on where your viewer is on your site.

Following are the examples of the classes that is generated through body_class() function when your visitor come to your site
Homepage: If the site front page displays the blog posts index:
Homepage: If the site front page displays a static page:
Blog: If the blog posts index is displayed on a static page:
In Interviews Category:
In About us Page:
In Post:
In 404 Error Page:
For more detail on classes it generate, check our body_class() default value in WordPress.org Codex

Adding extra classes in body tag using body_class filter in WordPress
You can also extend the body_class with the use of filter in your functions.php file in your theme to match your design.
Syntax: In the following you can add the classname as per you need

/**
 * Adds classes to the array of body classes.
 *
 * @uses body_class() filter
 */
function textdomain_body_classes( $classes ) {
	
	$classes[] = 'classname';	
	
	return $classes;
}
add_filter( 'body_class', 'textdomain_body_classes' );

Now, let’s look at the body_class() filter uses in Catch Box Free WordPress Theme. In the following code you will notice code ! function_exists(), this is created to support modification through child theme. Then you will see the code $options = catchbox_get_theme_options();, this get the array of value from Theme Options panel. Then you will be the various condition loop used to add the classes. If there is just single author then it will add single-author class. Similarly, if the layout is content-sidebar, it will add content-sidebar class and for sidebar-content, it will add sidebar-content class and so on. This is all done by using the filter body_class, which call the function catchbox_body_classes() where you add in all the custom classes.

if ( ! function_exists( 'catchbox_body_classes' ) ) : 
/**
 * Adds classes to the array of body classes.
 *
 * @since Catch Box 1.0
 */
function catchbox_body_classes( $classes ) {
	$options = catchbox_get_theme_options();
	$layout = $options['theme_layout'];
	if ( function_exists( 'is_multi_author' ) && !is_multi_author() ) {
		$classes[] = 'single-author';
	}
	if ( $layout == 'content-sidebar' && !is_page_template( 'page-disable-sidebar.php' ) && !is_page_template( 'page-fullwidth.php' )  && !is_page_template( 'page-onecolumn.php' ) ) {
		$classes[] = 'content-sidebar';
	}
	elseif ( $layout == 'sidebar-content' && !is_page_template( 'page-disable-sidebar.php' ) && !is_page_template( 'page-fullwidth.php' )  && !is_page_template( 'page-onecolumn.php' ) ) {
		$classes[] = 'sidebar-content';
	}
	elseif ( $layout == 'content-onecolumn' || is_page_template( 'page-onecolumn.php' ) && !is_page_template( 'page-disable-sidebar.php' ) && !is_page_template( 'page-fullwidth.php' ) ) {
		$classes[] = 'content-onecolumn';
	}		
	elseif ( is_page_template( 'page-disable-sidebar.php' ) || is_attachment() ) {
		$classes[] = 'singular';
	}
	elseif ( is_page_template( 'page-fullwidth.php' ) || is_attachment() ) {
		$classes[] = 'fullwidth';	
	}	
	return $classes;
}
endif; // catchbox_body_classes

add_filter( 'body_class', 'catchbox_body_classes' );

1 thought on “Adding extra classes in body tag using body_class filter in WordPress

Leave a Reply

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