Adding Custom Class In WordPress Menu Items

WordPress, let’s you create menu as needed for your site and assign it to the required menu location provided via theme on your site. But what about, what if you want to modify 1 specific menu item or a range of menu item in your site? Is it possible within WordPress? Well, it is possible and here we will learn about adding custom class in WordPress menu items to achieve it. So, let’s move ahead and learn about how to do it for your site, shall we?

How to create menu and assign it to the required menu location provided via the theme?

For it, ie, creating menu in your site, you need to visit Appearance->Menus section. Now, you can create new menu from Create A New Menu button option available at top section. After that, you can add the menu items from the left hand side, where there are checkboxes available for selecting menu items as needed.

After the selection of those menu items, you can drag and drop the menu items as needed under the Menu Structure section. Now, after the menu selection has been done as needed, you can assign the menu to the available menu location, which is under the Menu Settings section in the same page and save the changes.

You can learn more here on Creating And Assigning A New Menu In WordPress.

Adding custom class in WordPress menu items

WordPress, by default hides many options available for the menu. However, we can easily enable it as needed for our site. For it, in the top right corner, you can see the Screen Options button. Now, after clicking on it, you can see many checkboxes available there.

Here, in order for the custom class addition, you need to just put the checkmark on the checkbox option available as CSS Classes. After it is checked, when you go about editing the menu in your site, you will see new text box option available there named as: CSS Classes (optional).

In that very text box available mentioned above, just add the required class and save the changes. But, what if you want to assign 2 classes for 1 menu item? Well, for it, just separate the class with a white space and 2 custom class is assigned to that menu.

Here, in the above screenshot, we have marked the required places for same. So, you can tally those as mentioned above to add custom class in your menu.

Output of adding custom class in WordPress menu items

Now, if you have added the above CSS class in any of the menu then, you can take that class as selector to that menu and apply custom CSS for that menu only. Here, we will apply some CSS code for that menu as for example below:

.background--red {
    background: red;
}

After, it is being applied to, you will see the similar result as below screenshot for your site too:

Here, in the above screenshot, we have applied the CSS via Inspect Element feature of the browser. You can learn more on this here about Apply Custom CSS Code In Your Site Via Inspect Element.

You may also want to read:

1. How To Open WordPress Menu Items In New Tab/WIndow
2. How To Create Meta Box In WordPress
3. Display Author Bio Without The Use Of Plugin
4. XML Sitemap Support For Custom Post Type Using JetPack
5. Enable More HTML Buttons In Post Editor

Conclusion

If you have followed up the tutorial properly and now can easily do the adding custom class in WordPress menu items within your WordPress site then, we can say that you are now more familiar on this than before. However, if you are still confused on the same and want to know more about it then, do drop the comment below in the comment box and we will follow it up.