Tag: Menus

Adding Classes to the Current Page Item in wp_nav_menu()

If you want to add a custom class to the current menu item in WordPress navigation, you’ve come to the right place. By default, WordPress adds classes like current-menu-item to highlight the active page in menus, but sometimes you need to add your own classes for styling or JavaScript targeting. This tutorial shows you how to add class to current menu item WordPress easily and cleanly.

Quick Fix: Add a Custom Class to the Current Menu Item

1. Hook into the nav_menu_css_class filter.
2. Check if the menu item is the current page.
3. Add your custom class to the array of classes.
4. Return the modified classes array.

This approach works perfectly in modern WordPress and can be added to your functions.php or a small custom plugin.

Why You Should Add a Custom Class to the Current Menu Item

• Custom Styling: Sometimes the default current-menu-item class isn’t enough for your CSS needs.
• JavaScript Targeting: Adding a unique class makes it easier to target the current menu item with scripts.
• Theme Compatibility: Some themes or page builders require specific classes for active states.
• Better Control: You can add multiple classes or change the class name to fit your project.

When to Use This Method

• You want to add a class beyond the default WordPress classes.
• You are building a custom theme or child theme and need precise control over menu item classes.
• You want to add JavaScript hooks or CSS animations to the current menu item.
• You are not using block-based navigation or want a PHP-based solution.

Updated Code for Modern WordPress

The best way to add a class to the current menu item is by using the nav_menu_css_class filter. Here’s a clean, modern example:

function add_custom_class_to_current_menu_item($classes, $item) {
    if (in_array('current-menu-item', $classes, true)) {
        $classes[] = 'my-custom-current-class';
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'add_custom_class_to_current_menu_item', 10, 2);

This code checks if the menu item already has the current-menu-item class and appends your custom class my-custom-current-class.

How to Add This via functions.php or a Small Plugin

To add this code, you can either place it in your theme’s functions.php file or create a small plugin.

Option 1: Add to functions.php

1. Open your active theme folder.
2. Locate and open functions.php.
3. Paste the following code at the end:

function add_custom_class_to_current_menu_item($classes, $item) {
    if (in_array('current-menu-item', $classes, true)) {
        $classes[] = 'my-custom-current-class';
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'add_custom_class_to_current_menu_item', 10, 2);

4. Save the file and refresh your site to see the changes.

Option 2: Create a Small Plugin

1. Create a new folder inside wp-content/plugins called custom-current-menu-class.
2. Create a file named custom-current-menu-class.php inside this folder.
3. Paste this code into the file:

<?php
/*
Plugin Name: Custom Current Menu Class
Description: Adds a custom class to the current menu item.
Version: 1.0
Author: Your Name
*/

function add_custom_class_to_current_menu_item($classes, $item) {
    if (in_array('current-menu-item', $classes, true)) {
        $classes[] = 'my-custom-current-class';
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'add_custom_class_to_current_menu_item', 10, 2);

4. Go to WordPress admin > Plugins and activate “Custom Current Menu Class.”
5. Check your menu on the front end.

Step-by-Step Test

1. Apply the code via functions.php or plugin as shown above.
2. Go to Appearance > Menus and ensure your menu is assigned to a theme location.
3. Visit your site’s front end and navigate to a page included in the menu.
4. Inspect the menu item using browser developer tools.
5. Look for the default current-menu-item class plus your custom class my-custom-current-class.
6. Test your CSS or JavaScript targeting the new class.

Block Themes & Gutenberg Notes

With the rise of block themes and Gutenberg’s Navigation block, the way menus are rendered can differ:

• Block Themes: The Navigation block outputs menus dynamically and may not use wp_nav_menu() filters.
• Gutenberg Navigation Block: Custom classes for current items are handled internally or via block settings.
• Workaround: For block themes, consider using wp_nav_menu_items filter or custom block styles.
• Classic Themes: The method described here works perfectly for PHP-rendered menus.

Common Pitfalls

• Class Not Appearing: Ensure your menu is properly assigned and the page is part of the menu.
• Wrong Hook: Use nav_menu_css_class, not wp_nav_menu_items for adding classes to individual items.
• Block Themes: This method may not work if your theme uses block-based navigation.
• Cache Issues: Clear any caching plugins or server cache to see changes immediately.
• Class Name Conflicts:

…