Menu
I am creating custom Wordpress theme using a starter theme _Underscores and Bootstrap.
I would like to modify wp_nav_menu so that it assigns the current menu item .active class instead of the default .current-menu-item. I need this in order to use .active class from Bootstrap.
Here is what I have (extra stuff comes from WP so please scroll to the right):
<ul id="menu-main-menu" class="nav navbar-nav"> <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-13 current_page_item menu-item-14"><a href="">item1</a></li> <li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12"><a href="">item2</a></li> </ul> And here is what I need:
<ul id="menu-main-menu" class="nav navbar-nav"> <li id="menu-item-14" class="active menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-13 current_page_item menu-item-14"><a href="">item1</a></li> <li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12"><a href="">item2</a></li> </ul> I would prefer to achieve this without modifying ../wp-includes/nav-menu-template.php and without using JS.
UPDATE: I found the answer just before posting this question, but since I had a rather hard time finding it, posting this as a QA to hopefully save someone some time.
287
Within WordPress, navigate to the Appearance > Customize screen, then click on Menus. If you don't have a menu set up yet, you can simply select Create New Menu to get started. You'll be given the option to name your menu and choose where it will appear.
To do this go to Appearance >Menus and start creating a new menu. Give the menu the title “Secondary Menu”, select “My Custom Menu” for a location and then hit the “Create Menu” button. Finally add some items to the menu (for example Menu item 1, Menu item 2, Menu item 3) and then save the menu.
Step 1 – From the WordPress dashboard navigate to Appearance > Menus. Step 2 – Click on Screen Options and tick the CSS Classes checkbox. Step 3 – Click on the menu item that needs to be highlighted. Step 4 – Add CSS class to the menu item and save the changes in the menu.
Now, you see a class named #nav ul li .active this is not yet added to any of the navigation items. To add it, we need to add some jQuery to our project, that will check the page URL that the user or visitor is viewing, and compares with the one on the menu item. If they mach, it’ll add the .active class to that menu item.
“WP Add Active Class To Menu Item” is open source software. The following people have contributed to this plugin. Translate “WP Add Active Class To Menu Item” into your language. Interested in development?
This can be accomplished by adding an “active class” or “current class” to the menu item that links to the page on which the visitor or user is. To do this, we’ll create a css navigation menu. With a few links in it just for demonstration.
Incase your WordPress Theme doesn’t support it yet, you can add the following script to your functions.php and use the .active CSS Class to style the current navigation item.
Just paste this code into functions.php file:
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2); function special_nav_class ($classes, $item) { if (in_array('current-menu-item', $classes) ){ $classes[] = 'active '; } return $classes; } More on wordpress.org:
.active class to active menu item
158
To also highlight the menu item when one of the child pages is active, also check for the other class (current-page-ancestor) like below:
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2); function special_nav_class ($classes, $item) { if (in_array('current-page-ancestor', $classes) || in_array('current-menu-item', $classes) ){ $classes[] = 'active '; } return $classes; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
