Styling WordPress Menu Items Separately WordPress Menu CSS Classes

Creating a WooCommerce site is a fulfilling experience especially when you have to create a WooCommerce theme from scratch. One of the most common issues that you come across when styling your WooCommerce site it the need to add icons on menu or style it differently.

Table of Contents

Joe

Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.

Style Menu Items with a Filter

Recently, we I was winding up on a WooCommerce site, I needed to style menu items separately. I wanted the appearance of the home menu item to be different from the other menu items.

Ideally, I would have to add classes to the menus and style each menu item with CSS. I wrote the following WordPress filter to add classes to the menu items:

/**

 * Menu classes filter

 */

function njengah_nav_menu_class($classes, $item){

     if( strtolower($item->title) == "home" ){

             $classes[] = "home-icon";

     }

     return $classes;

}

add_filter('nav_menu_css_class' , 'njengah_nav_menu_class' , 10 , 2);

If you would like to use this filter to add WordPress menu CSS classes to your theme, you need to open the function.php file in your theme and paste this code.

A word of caution, you should be very careful when editing your WordPress theme files. Always ensure you have a backup before you update.

It is advisable you add these filter to the child theme function.php file. If your theme does not have a child theme, you should consider creating one.

Alternative Way to WordPress Menu CSS Classes

If you are not comfortable tinkering with the WordPress theme files, there is another ingenious way you can add classes to the menu. On your WordPress dashboard menu, click on Appearance > Menu