apply_filters( ‘body_class’, string[] $classes, string[] $css_class )

User Contributed Notes

1. Skip to note 5 content

   Drew Jaynes 9 years ago

   You must log in to vote on the helpfulness of this noteVote results for this note: 4You must log in to vote on the helpfulness of this note

   Add New Classes

   You can add additional body classes by filtering the ‘body_class’ hook.

   To add the following to the WordPress Theme functions.php file, changing my_class_names and class-name to meet your needs:

   // Add specific CSS class by filter.
   
   add_filter( 'body_class', function( $classes ) {
   	return array_merge( $classes, array( 'class-name' ) );
   } );
2. Skip to note 6 content

   Maarten Menten 6 years ago

   You must log in to vote on the helpfulness of this noteVote results for this note: 3You must log in to vote on the helpfulness of this note

   Following function adds CSS classes that may be useful

   function my_body_class( $classes )
   {	
   	$include = array
   	(
   		// browsers/devices (https://codex.wordpress.org/Global_Variables)
   		'is-iphone'            => $GLOBALS['is_iphone'],
   		'is-chrome'            => $GLOBALS['is_chrome'],
   		'is-safari'            => $GLOBALS['is_safari'],
   		'is-ns4'               => $GLOBALS['is_NS4'],
   		'is-opera'             => $GLOBALS['is_opera'],
   		'is-mac-ie'            => $GLOBALS['is_macIE'],
   		'is-win-ie'            => $GLOBALS['is_winIE'],
   		'is-gecko'             => $GLOBALS['is_gecko'],
   		'is-lynx'              => $GLOBALS['is_lynx'],
   		'is-ie'                => $GLOBALS['is_IE'],
   		'is-edge'              => $GLOBALS['is_edge'],
   		// WP Query (already included by default, but nice to have same format)
   		'is-archive'           => is_archive(),
   		'is-post_type_archive' => is_post_type_archive(),
   		'is-attachment'        => is_attachment(),
   		'is-author'            => is_author(),
   		'is-category'          => is_category(),
   		'is-tag'               => is_tag(),
   		'is-tax'               => is_tax(),
   		'is-date'              => is_date(),
   		'is-day'               => is_day(),
   		'is-feed'              => is_feed(),
   		'is-comment-feed'      => is_comment_feed(),
   		'is-front-page'        => is_front_page(),
   		'is-home'              => is_home(),
   		'is-privacy-policy'    => is_privacy_policy(),
   		'is-month'             => is_month(),
   		'is-page'              => is_page(),
   		'is-paged'             => is_paged(),
   		'is-preview'           => is_preview(),
   		'is-robots'            => is_robots(),
   		'is-search'            => is_search(),
   		'is-single'            => is_single(),
   		'is-singular'          => is_singular(),
   		'is-time'              => is_time(),
   		'is-trackback'         => is_trackback(),
   		'is-year'              => is_year(),
   		'is-404'               => is_404(),
   		'is-embed'             => is_embed(),
   		// Mobile
   		'is-mobile'            => wp_is_mobile(),
   		'is-desktop' 		   => ! wp_is_mobile(),
   		// Common
   		'has-blocks'           => function_exists( 'has_blocks' ) && has_blocks(),
   	);
   
   	// Sidebars
   	foreach ( $GLOBALS['wp_registered_sidebars'] as $sidebar ) 
   	{
   		$include[ "is-sidebar-{$sidebar['id']}" ] = is_active_sidebar( $sidebar['id'] );
   	}
   
   	// Add classes
   
   	foreach ( $include as $class => $do_include ) 
   	{
   		if ( $do_include ) $classes[ $class ] = $class;
   	}
   
   	// Return
   
   	return $classes;
   }
   
   add_filter( 'body_class', 'my_body_class' );
3. Skip to note 7 content

   Drew Jaynes 9 years ago

   You must log in to vote on the helpfulness of this noteVote results for this note: 1You must log in to vote on the helpfulness of this note

   Remove Classes

   Remove an existing body class by un-setting the key from the $classes array.

   // Removes a class from the body_class array.
   
   add_filter( 'body_class', function( $classes ) {
   	if ( isset( $classes['class-to-remove'] ) ) {
   		unset( $classes['class-to-remove'] );
   	}
   	return $classes;
   } );
4. Skip to note 8 content

   Noruzzaman 9 months ago

   You must log in to vote on the helpfulness of this noteVote results for this note: 0You must log in to vote on the helpfulness of this note

   The body_class filter allows you to modify the array of classes applied to the tag. This can be useful for styling pages differently based on their context.

   Open functions.php: Go to your theme directory and open functions.php. This file is where you add custom functions and hooks.

   add_filter( 'body_class', 'custom_body_class', 10, 2 );
   
   function custom_body_class( $classes, $css_class ) {
       // Example condition 1: Add class for home page
       if ( is_home() ) {
           $classes[] = 'home-page';
       }
   
       // Example condition 2: Add class for single posts
       if ( is_single() ) {
           $classes[] = 'single-post';
       }
   
       // Example condition 3: Add class for pages using a specific template
       if ( is_page_template( 'custom-template.php' ) ) {
           $classes[] = 'custom-template';
       }
   
       // Example condition 4: Add class for logged-in users
       if ( is_user_logged_in() ) {
           $classes[] = 'logged-in';
       }
   
       // Example condition 5: Add class based on user role
       if ( current_user_can( 'administrator' ) ) {
           $classes[] = 'admin-user';
       }
   
       return $classes;
   }

   Understanding the Conditions

   1. is_home() : Adds the home-page class if the current page is the home page.

   2. is_single() : Adds the single-post class if the current page is a single post.

   3. is_page_template() : Adds the custom-template class if the page is using a specific template.

   4. is_user_logged_in() : Adds the logged-in class if the user is logged in.

   5. current_user_can() : Adds the admin-user class if the current user has the ‘administrator’ role.