Add new class to body tag in wordpress

Created at 17-Mar-2021 , By samar

Add new class to body tag in wordpress

Through many examples, we will learn how to resolve the "Add new class to body tag in wordpress".

  • --PATH wp-content\themes\<yourTheme>\header.php
    <?php body_class('new-class'); ?>
    
    
    You can add a new class to the body tag in wordpress using body_class() function. You have to add this code to your body tag of the page or template file. It will display all classes with the new class which you pass to body_class() function. You can find body tag in header.php file as per new wordpress version 5.2 or you can use it to your own created template file.
  • --PATH wp-content\themes\<yourTheme>\header.php
    <?php body_class(['new-class', 'another-class']); ?>
    

    You can pass multiple classes to body tag in wordpress in array form when you want to add more than one class to your page or template. Your code will look like this after code implementation <body <?php body_class(['new-class', 'another-class']); ?>>.

  • --PATH wp-content\themes\<yourTheme>\functions.php
    add_filter('body_class', 'my_body_class');
    function my_body_class( $classes ) {
    	$classes[] = 'new-class';
    	return $classes;
    }
    
    You can add a new class to the body tag in wordpress using the body_class filter method. You have to pass the class name to the array $classes and return it. This code can be used in your theme's functions.php or within your plugin.
  • --PATH wp-content\themes\<yourTheme>\functions.php
    add_filter('body_class', 'my_body_classes');
    function my_body_classes( $classes ) {
        $classes[] = 'class-name';
        $classes[] = 'class-name-two';
        return $classes;
    }
    
    You can add multiple classes to the body tag in wordpress using body_class by filter method.
  • --PATH wp-content\themes\<yourTheme>\functions.php
    add_filter('body_class','my_body_classes');
    function my_body_classes( $classes ) {
    	if ( is_home() ) {
        	$classes[] = 'class-name';
            $classes[] = 'class-name-two';
        }
        return $classes;
    }
    
    Conditions can be used in your body_class filter method. You can add class to body tag as per your condition like if you want to add class to your home page then you can add class to home page using is_home() function. is_home() function returns true if the current page is homepage else it returns false. This class will not be added to your other inner pages or posts body tag.
  • --PATH wp-content\themes\<yourTheme>\functions.php
    function wc_add_body_class_desktop_view( $classes ) {
        if ( !wp_is_mobile() ) {
            $classes[] = 'desktop';
        } 
        return $classes;
    }
    add_filter( 'body_class', 'wc_add_body_class_desktop_view');
    
    You can add class to desktop view using wp_is_mobile() method. This method is very useful when you want to add class to the body as per different device's native name in user agent string. This function did not work on the viewport of devices.

Back to code snippet queries related wordpress

If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.

Buy Me A Coffee

Don't forget to share this article! Help us spread the word by clicking the share button below.

We appreciate your support and are committed to providing you valuable and informative content.

We are thankful for your never ending support.