Divi menu customization

The Divi theme is a popular WordPress theme that allows for easy customization, including customizing the menu. One way to customize the Divi menu is by adding a custom class to the menu items. This can be useful if you want to style specific menu items differently or add custom functionality to them.

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

Here’s an example of how you can use the nav_menu_css_class filter to add a custom class to a menu item:

function wpsnippets_add_custom_class_to_menu_item($classes, $item, $args) {
    // Add your custom class name here
    $custom_class = 'my-custom-class';

    // Add the custom class to the menu item's CSS classes
    $classes[] = $custom_class;

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

In this example, the wpsnippets_add_custom_class_to_menu_item function adds the custom class my-custom-class to each menu item. You can replace 'my-custom-class' with your desired class name.

By adding this code snippet to your theme’s functions.php file or a custom plugin, the custom class will be added to all menu items in your Divi theme. You can then use CSS to style the menu items with the custom class as needed.

This code snippet can be useful when you want to customize the appearance or behavior of specific menu items in the Divi theme. For example, you can use it to highlight certain menu items, add icons to them, or apply custom JavaScript functionality.

Examples

Example 1: Add a custom class to a Divi menu item

This use case demonstrates how to add a custom class to a specific menu item in the Divi theme. The code example below uses the nav_menu_css_class filter to add a custom class to the menu item with the ID of 123.

function wpsnippets_add_custom_class_to_menu_item($classes, $item, $args) {
    if ($item->ID == 123) {
        $classes[] = 'custom-class';
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'wpsnippets_add_custom_class_to_menu_item', 10, 3);

The code checks if the current menu item has an ID of 123, and if so, it adds the custom-class to the array of CSS classes for that menu item. Finally, the modified array of classes is returned.

Example 2: Change the link text of a Divi menu item

This use case demonstrates how to change the link text of a specific menu item in the Divi theme. The code example below uses the nav_menu_item_title filter to modify the link text of the menu item with the ID of 456.

function wpsnippets_change_menu_item_title($title, $item, $args, $depth) {
    if ($item->ID == 456) {
        $title = 'New Link Text';
    }
    return $title;
}
add_filter('nav_menu_item_title', 'wpsnippets_change_menu_item_title', 10, 4);

The code checks if the current menu item has an ID of 456, and if so, it replaces the original link text with ‘New Link Text’. Finally, the modified link text is returned.

Example 3: Remove a menu item from the Divi menu

This use case demonstrates how to remove a specific menu item from the Divi theme. The code example below uses the wp_nav_menu_objects filter to exclude the menu item with the ID of 789 from the menu.

function wpsnippets_remove_menu_item($items, $args) {
    foreach ($items as $key => $item) {
        if ($item->ID == 789) {
            unset($items[$key]);
        }
    }
    return $items;
}
add_filter('wp_nav_menu_objects', 'wpsnippets_remove_menu_item', 10, 2);

The code loops through each menu item and checks if it has an ID of 789. If a menu item with that ID is found, it is removed from the array of menu items. Finally, the modified array of menu items is returned.