How to Highlight the Current Page or Menu Item in WordPress

All WordPress websites have menus, but they’re not equally important for everyone. Blogs for example tend to use them mainly for archival purposes so that visitors can quickly view the broad categories of articles. But WordPress has far outgrown its blogging roots and is now a full-fledged publishing platform even for regular business sites. For these properties, a navigation menu is far more important containing crucial links for contacts, product categories, privacy policies, and other company information. In such a case, it really helps to give the viewer an indication of where they are in the current hierarchy.

Lots of WordPress themes do this by highlighting the menu item when the corresponding page is being displayed. If your theme already does this, great. But if it doesn’t, or if you’re dissatisfied with the state of highlighting and wish to mix it up a bit, this article is for you. Let’s look at two distinct possibilities – styling all current menu items, and styling only the pages.

Styling the Current Page Item

As a test case, I’ve created a static front page and put it on my WordPress blog navigation menu. You can see in the screenshot below that it is styled a bit by default – that is, it’s white as opposed to gray.

While it stands out from the rest of the menu items, it’s perhaps not as eye-catching as we’d like it to be. Of course this is entirely a matter of preference and will vary from site to site, but let’s try and spice it up a bit by changing the background color so that it’s more visible. To do this, WordPress already provides us with a class called “current_page_item”. This class is automatically applied to every page menu item that is currently displayed. So using the Google Chrome developer tools, we create a simple rule to change the background color of the “current_page_item” class to blueviolet. Here’s the code:

.current_page_item {
    background-color: blueviolet;
}

And these are the results:

Depending on your specific theme, you can choose to replace blueviolet with any color of your choosing. Keep in mind however that this is applicable only for pages and not posts or any other kind of menu item. This distinction between pages and other types of content reflect the fact that the former are more likely to be used in standalone websites instead of blogs when navigation is a more critical element.

But in case you wish to style all menu items – and not just those related to pages – WordPress has yet another class up its sleeve which we can use.

Styling ALL Menu Items – Not Just Pages

You can see below that the above code doesn’t work for other items like a blog category for example:

Instead of that, we use a class called “current-menu-item” so that we can instruct WordPress to highlight all current menu items. Similar to the above, the code for that looks like this:

.current-menu-item {
    background-color: blueviolet;
}

This time, you can see that the “Book Reviews” category has also been styled even though it’s not a page.

<

p style=”text-align: center;”>

Don’t forget to preview the effects of your custom CSS code by first testing it in the developer tools of whichever browser you’re using. For Chrome, you can take a look at this guide I’d written earlier on how to preview font changes before applying them.

Using these two pieces of code, you can provide complete navigational awareness for your audience so that they know exactly where they are at all times.