With manual menus you may need to add a CSS class to the current menu item that is active, below is a jQuery solution, that utilizes the URL of the page to match the link and add the CSS.
(function($){
$(function() { // Document Ready
activeMenu();
});
// Functions
// @link https://stackoverflow.com/questions/4866284/jquery-add-class-active-on-menu
function activeMenu() {
var url = window.location.pathname,
// create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
// now grab every link from the navigation
$('.menu a').each(function(){ // Swap to your menu CSS Class or ID
// and test its normalized href against the url pathname regexp
if(urlRegExp.test(this.href.replace(/\/$/,''))){
$(this).addClass('current'); // Add CSS Class 'current' to active link tag
}
});
}
})(jQuery);
Enqueue the script and target your menu to where you need the current active menu item to have the CSS class.










3 comments
Yan BERN
Hi, for the ‘li’ element, we need to walk the DOM to test the href attribut.
jQuery(‘.menu li’).each(function(){
if(urlRegExp.test(this.childNodes[0].href.replace(/\/$/,”))){
jQuery(this).addClass(‘current-menu-item’);
}
Yan
Rowlan
Hi,
Is there a way to apply the .addClass(‘current’) to the ‘li’ and not the ‘a’?
Great method BTW.
Neil Gowran
Change the jQuery selector to be
$('.menu li')