Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
December 31, 2020 11:49 pm

Adding to the Body Class in WordPress


In this short tutorial, we look at the WordPress body class and how we can manipulate it using core API calls.


Specifically, we cover adding body classes, removing body classes, conditionally adding body classes and some use cases.


The tutorial uses some simple PHP—if you're not confident using the WordPress programming language, try our free beginner's course on Learning PHP for WordPress to get up to speed.


Learn PHP for WordPress


Once you've mastered the essentials, why not get to grips with the WordPress programming language in my free course on learning PHP for WordPress? I'll give you an overview of what PHP is and how it's used for WordPress programming and creating themes and plugins.



The Body Class: What Can It Be Used For?


The body class in WordPress is a class or series of classes that are applied to the HTML body element. This is useful for applying unique styles to different areas of a WordPress site as body classes can be added conditionally.


WordPress contains a number of default body classes which are covered in this article.



Adding to the Body Class


There are a few methods available to us for adding new body classes within WordPress. This tutorial is going to cover adding the body class within a theme (usually defined in header.php) using the body_class function and adding classes using a filter.


Editing the Theme: Passing a Body Class Value


This is a really simple way to add body classes and is especially useful if you are creating a theme. The body class is normally included in a theme using the following code:


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


To add your own class to this, you can pass an argument in to the function, like so:


<body <?php body_class( 'my-class' ); ?>>


This would add a body class of my-class on each page of your WordPress site.


Default Static and Dynamic Body Classes in WordPress


Classes are usually added to any element to target them either for styling using CSS or for manipulating their content using JavaScript.


The body_class() function in WordPress makes this very easy for us by automatically adding a bunch of appropriate classes to the body tag of our website.


One such example would be the logged-in class that is added to the body tag if a logged in user is viewing the page. The class logged-in will not be added to the body if a logged out user is viewing the page.


Similarly, other classes like category, archive, search and tag etc. are added automatically to the body tag if the user is viewing a specific type of page. This allows you to style the contents of a page selectively depending on its type.


The body_class() function also adds a bunch of classes the can be used to target things like archive pages of a specific tag or category. For example, lets say your website has some posts filed under the category "tutorial" and other posts filed under "tip". If you visit the archive page for the tutorial category, you will see that its body tag also contains classes like category-tutorial. These dynamic classes allow you target pages and posts for very specific styling.


If you were planning to add some class to the body tag in order to target these kinds of posts and pages, it might just be better to use the classes added by default. All such classes added by WordPress are mentioned here in WordPress documentation.


Adding Multiple Body Classes


There may be times when you want to add more than one body class. This can be achieved using a simple array:


<body <?php body_class( array( "class-one", "class-two", "class-three" ) ); ?>>

This takes all of the classes in the array, and passes them to the body_class function.


Conditionally Adding a Body Class


You may also want to conditionally add a body class. This is easy with some simple PHP. This example uses the WooCommerce conditional method of is_shop() :


<?php if ( is_shop() ) { body_class( 'is-woocommerce-shop' ); } else { body_class(); } ?>


Note: WooCommerce already adds a class based on this, so note that this is purely an example.


What the above code is doing, is checking that the first function is returning true, if it is true then the body class has is-woocommerce-shop added to it; otherwise, if it's not true then just the default body class is being displayed.


Adding a Body Class by Filter


It's possible to use a WordPress filter to add a body class, too. This method keeps the theme code cleaner and is particularly useful if you want to add a body class from a plugin. This code can either go in your themes functions.php or within your plugin.


add_filter( 'body_class','my_body_classes' );
function my_body_classes( $classes ) {

    $classes[] = 'class-name';
    
    return $classes;
    
}

This adds a class (or classes, depending on your implementation) to the array and returns the entire array.


Adding Multiple Body Classes by Filter


To add more classes to the filter, just add another line that adds another value in to the array:


add_filter( 'body_class','my_body_classes' );
function my_body_classes( $classes ) {

    $classes[] = 'class-name';
    $classes[] = 'class-name-two';
    
    return $classes;
    
}

Conditionally Adding a Body Class by Filter


Conditions can also be used in a filter. Taking the same example that we used earlier, we can achieve the same effect:


add_filter( 'body_class','my_body_classes' );
function my_body_classes( $classes ) {

    if ( is_shop() ) {
    
        $classes[] = 'class-name';
        $classes[] = 'class-name-two';
        
    }
    
    return $classes;
    
}

Adding a Body Class Based on the Page Template


By default, WordPress adds a body class for your page template, but if you are a front-end developer and have naming conventions for your CSS then you may want to change this.


As an example, a page template called "halfhalf" would have a body class of page-template-page-halfhalf-php - not great.


So let's add a new class, using a filter and a WordPress conditional tag:


add_filter( 'body_class','halfhalf_body_class' );
function halfhalf_body_class( $classes ) {

    if ( is_page_template( 'page-halfhalf.php' ) ) {
        $classes[] = 'halfhalf-page';
    }
    
    return $classes;
    
}

This will add the body class halfhalf-page if the page template is page-halfhalf.php.


Removing a Body Class


It's unlikely that you will want to remove a body class, as you are not forced to use them and they add very little to your markup. That said, it is possible to do this using the same body_class filter.


add_filter( 'body_class', 'remove_body_class' );
function remove_body_class( $classes ) { 

    $remove_classes = ['custom-class', 'archive'];
    $classes = array_diff($classes, $remove_classes);
    
    return $classes;    
}

The easiest and fastest way to remove one or more classes from the body tag is to define an array of classes that you want to remove. After that, simply calling the array_diff() function will return a new array that contains the full list of classes after removing the classes we specified.


You won't have to loop through the entire array and unset the classes one at a time. In our case, we removed the classes custom-class and archive from the body tag.


That's All Folks!


In this small tutorial we have covered two methods of adding to the WordPress body class:



  1. By using the body_class function within a theme,

  2. And by using a filter.


We have also covered adding body classes conditionally and removing classes, should you ever need to do so in future development.


Learn More About WordPress From Envato Tuts+


Envato Tuts+ is a great platform for picking up new skills. Our team of instructors has made tutorials, guides, and courses across many topics including WordPress and web design. If you want to dive further into these topics start with the articles below:



If you're a visual learner, check out our YouTube channel! It's filled with helpful video tutorials and guides for WordPress and web design. Check out our playlists and explore our channel. You can also watch this video to get going:



This post has been updated with contributions from Monty Shokeen. Monty is a full-stack developer who also loves to write tutorials, and to learn about new JavaScript libraries.



 



Original Link: https://webdesign.tutsplus.com/tutorials/adding-to-the-body-class-in-wordpress--cms-21077

Share this article:    Share on Facebook
View Full Article

TutsPlus - Code

Tuts+ is a site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites.

More About this Source Visit TutsPlus - Code