How to Highlight the Current Page or Menu Item in WordPress

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.

boring style

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:

changed background color

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:

no change

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;”>now changed

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.

2 Comments on “How to Highlight the Current Page or Menu Item in WordPress”!

  1. Hello Bhagwad;

    I have been trying for my menu item to remain highlighted once a person goes through it, but not luck yet. I am using the MH magazine theme and under css I typed the code you provide us but nothing changes. Please advise

  2. Please use both below css script because I have used and its working fine.

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

    Hope above two script will work, have any query, please let me know.

    Amzad

Leave a Reply

This Website is Hosted by

Powered by RamNode

Disclosure: We receive a compensation from some of the companies whose products or services are presented on our website.