How to Style Active Page Link in WordPress Menu


It’s sometimes a nice idea to highlight the current WordPress page in a website’s main menu, and fortunately WordPress makes this very simple. By default, WordPress will automatically add the ‘current-menu-item’ class to the current menu item, so just need to apply a style to this. For example, if you wanted to add a bottom border to the current menu item, just add the following code to your stylesheet:


ul li.current_page_item a {
 border-bottom: 2px black solid;
}

Note that I’ve actually applied this to the ‘a’ tag within the menu item, but you could just as easily apply the style directly to the ‘li’ tag by using the following:


ul li.current_page_item {
 border-bottom: 2px black solid;
}

That’s it!