Owning a website becoming expensive?

No more! In our library, you will find the best premium WordPress plugins and themes for a fraction of the cost of the original prices. Browse Our Library

How to Add Classes to the Body Tag, Menu Links, and Widgets in WordPress

How to Add Classes to the Body Tag, Menu Links, and Widgets in WordPress

WordPress classes are the easiest way to style or target a specific page, post, or element on our website.

When working with WordPress, high chance that at one point or another, you’ll need to know how to add a custom class to different parts of your website.

Because often we’re using CSS rules to style our website, it will be very beneficial to know how to add a class to WordPress elements.

By default, most WordPress themes are adding various classes to pages, posts, or menu items. Yet, sometimes we found it not enough and we would also like to add our own classes.

In this lecture, we will learn how to add classes to many parts of your WordPress website with or without a plugin.

Why Add a Body Class?

When we built our website, we needed to group a bunch of pages together in order to style them in the same way.

When we started to use our CSS rules, we came to a conclusion that styling multiple pages by their page ID class is not smart for two main reasons:

  1. The page ID class does not match between the local environment and production.
  2. The CSS rule was too long
.page-id-2, .page-id-3, .page-id-4 {
    background-color: grey;
}

It made more sense to give all the pages the same class and target them by it. Further, it also made it more simple to add more pages in the future.

How to Add a Body Class in WordPress

Add a body class with a plugin

From your WordPress dashboard, navigate to Plugins -> Add New, search, and install Custom Body Class.

Add a wordpress body class with a plugin

Once activated, navigate to the edit screen of any page or post that you would like to add a class to.

After that, click on the new option that was added to your document sidebar on the bottom right side called Page classes or Post classes.

Enter your desired class and update the page.

Add a custom body class to any page post or custom post type

After updating the changes, revisit your page or post and inspect it to make sure the new class was added successfully.

The new body class was added to the page

Add a body class using a function

Alternatively, you can also add a body class to any WordPress page, post, or custom post type using a function instead of a plugin.

We recommend you use the functions below in your functions.php file of your child theme or a custom plugin.

add_filter( 'body_class', 'pfwp_add_custom_class' );
function pfwp_add_custom_class( $classes ) {
    if ( is_page([8, 10]) ) {
        $classes[] = 'example';
    }
    return $classes;
}

The code above added a custom class to two pages. Page ID 8 and Page ID 10.

Function contain page id

Certainly, make sure to change the ID number of the pages in the code above to your desired page IDs. Click here to learn how to find the ID number of any page or post.

Add a body class inside the template

Another great way to add a class or multiple classes to your body tag is bypassing the custom classes into the body tag itself.

In most WordPress themes, you can find the opening body tag inside the header.php file.

Again, it’s better to edit the files of the child theme so you won’t lose the changes in the next theme update.

Navigate to Appearance -> Theme Editor and click on the header.php file from the files list on the right.

There, look for the opening body tag. In most cases it will look like that:

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

Now, add your custom body class as an argument to the function like so:

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

To add multiple body classes, use an array inside the function like so:

<body <?php body_class(array('new-class-1', 'new-class-2')); ?>>

Conditionally add the body class to a page template

When creating a custom page template, you may find the need to add a body class based on the template name.

For example, on our website, we needed to add a custom class to the page template changelog-template.php that we created for our changelog page.

To add the custom class to our template, we used this function:

add_filter( 'body_class','pfwp_add_class_page_template' );
function pfwp_add_class_page_template( $classes ) {
 
    if ( is_page_template( 'template-name.php' ) ) {
        $classes[] = 'custom-class';
    }
     
    return $classes;
     
}

Make sure to replace the template-name.php with your template name.

Add Class to a Menu Item

Adding a class to the WordPress menu item is easier than you think because you can do it without using any plugin or a function.

Moreover, WordPress allowing us to add a menu item class by default but the option is hidden.

In order to add a class to any WordPress menu link, we will first need to enable that option.

Firstly, inside your WordPress dashboard, navigate to Appearance -> Menus.

After that, click on the Screen Options at the top right corner and check the CSS Classes box.

Enable css classes to wordpress menu items

Secondly, click on the menu item of whom you would like to add a class.

You will see the new CSS Classes option where you’ll need to enter your desired class.

Add a class to menu link

Thirdly, after adding the class, save the menu, revisit your website, and inspect the menu element to make sure the class was added successfully.

The classes was added to the menu item

Add a Class to a Widget

To add a class to a WordPress widget we will use a simple plugin that will allow us to do just that.

Therefore, navigate to Plugins -> Add New, search and install and search for Widget CSS Classes.

Add a class to wordpress widget with a plugin

Once you activated the plugin, navigate to Appearance -> Widgets and expand the widget that you would like to give a class.

You will see the new CSS Classes box where you can enter as many classes as you wish.

WordPress add css class to widgets

If you would like to enter multiple classes, separate between each class with space.

Conclusion

Hopefully, in this tutorial, you’ve learned how simple it is to add classes to various parts of your WordPress website.

For better clarification on this topic, make sure to watch our video at the top of this page.

Let us know if you have any questions by leaving a comment down below.

Also, make sure to subscribe to our YouTube channel and like our page on Facebook.

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

PluginsForWP

PluginsForWP is a website specializing in redistributing WordPress plugins and themes with a variety of knowledge about WordPress, internet marketing, and blogging.

Leave a Reply