Add a Custom CSS Class to a Menu Item

Adding a custom CSS class to a menu item in WordPress can be useful when you want to style specific menu items differently from the rest. This allows you to apply custom styles to individual menu items using CSS.

To add a custom CSS class to a menu item, you can use the nav_menu_css_class filter hook. This filter allows you to modify the CSS classes applied to each menu item.

Here’s an example code snippet that demonstrates how to add a custom CSS class to a menu item:

function wpsnippets_add_menu_class( $classes, $item, $args ) {
    // Add your custom CSS class here
    $classes[] = 'custom-menu-class';

    return $classes;
}
add_filter( 'nav_menu_css_class', 'wpsnippets_add_menu_class', 10, 3 );

In the code snippet above, we define a custom function wpsnippets_add_menu_class that accepts three parameters: $classes, $item, and $args. The $classes parameter contains an array of CSS classes applied to the menu item. We add our custom CSS class 'custom-menu-class' to the $classes array using the array push syntax $classes[] = 'custom-menu-class';. Finally, we return the modified $classes array.

To use this code snippet, you need to add it to your theme’s functions.php file or a custom plugin file. Once added, the 'custom-menu-class' will be added as a CSS class to the menu item. You can then target this class in your CSS to apply custom styles to the specific menu item.

Remember to replace 'custom-menu-class' with your desired CSS class name.

Examples

Example 1: Add a Custom CSS Class to a Menu Item

This use case demonstrates how to add a custom CSS class to a specific menu item in WordPress.

function wpsnippets_add_menu_class( $classes, $item ) {
    if ( $item->title == 'Home' ) {
        $classes[] = 'custom-class';
    }
    return $classes;
}
add_filter( 'nav_menu_css_class', 'wpsnippets_add_menu_class', 10, 2 );

In this code example, we define a custom function wpsnippets_add_menu_class that takes two parameters: $classes (an array of CSS classes) and $item (the menu item object). We check if the menu item’s title is ‘Home’, and if it is, we add the ‘custom-class’ to the $classes array. Finally, we return the modified $classes array.

Example 2: Add a Custom CSS Class to Multiple Menu Items

This use case demonstrates how to add a custom CSS class to multiple menu items in WordPress.

function wpsnippets_add_menu_class( $classes, $item ) {
    $target_menu_items = array( 'Home', 'About', 'Contact' );
    if ( in_array( $item->title, $target_menu_items ) ) {
        $classes[] = 'custom-class';
    }
    return $classes;
}
add_filter( 'nav_menu_css_class', 'wpsnippets_add_menu_class', 10, 2 );

In this code example, we define a custom function wpsnippets_add_menu_class that takes the same parameters as before. Instead of checking for a single menu item, we define an array $target_menu_items that contains the titles of the menu items we want to add the custom class to. We use the in_array function to check if the current menu item’s title is in the $target_menu_items array, and if it is, we add the ‘custom-class’ to the $classes array.

Example 3: Add Different Custom CSS Classes to Different Menu Items

This use case demonstrates how to add different custom CSS classes to different menu items in WordPress.

function wpsnippets_add_menu_class( $classes, $item ) {
    if ( $item->title == 'Home' ) {
        $classes[] = 'home-class';
    } elseif ( $item->title == 'About' ) {
        $classes[] = 'about-class';
    } elseif ( $item->title == 'Contact' ) {
        $classes[] = 'contact-class';
    }
    return $classes;
}
add_filter( 'nav_menu_css_class', 'wpsnippets_add_menu_class', 10, 2 );

In this code example, we define the same custom function wpsnippets_add_menu_class as before. However, instead of adding the same class to multiple menu items, we use conditional statements (if, elseif) to add different classes based on the menu item’s title. For example, if the menu item’s title is ‘Home’, we add the ‘home-class’ to the $classes array. Similarly, we add ‘about-class’ for the ‘About’ menu item and ‘contact-class’ for the ‘Contact’ menu item.