How to Highlight a Menu Item in WordPress

A navigation menu is an essential part of any website, as it helps users find and access the content they are looking for. However, it can be easy for users to get lost or confused, especially if they are new to your site. One way to help users navigate your site more easily is by highlighting the menu item that corresponds to the page they are currently viewing. But how can you highlight a menu item in WordPress? For this tutorial, we’ve asked the expert WordPress team to help us show you three different methods to do this. No matter which method you choose, following this tutorial will help you create a more user-friendly and visually appealing navigation menu for your WordPress site. So, let’s get started!

Why should you highlight a menu item in WordPress and how to do it?

There are several reasons why you might want to highlight a menu item in WordPress. Firstly, highlighting a menu item can help your site’s visitors quickly and easily navigate to the page they are looking for. By drawing attention to the current menu item, you can help users understand where they are on your site and what content is available to them.

Person using a smartphone and looking at an e-commerce market
Highlighting a menu item in WordPress can improve the user experience, enhance the visual appeal of your site, and make it easier for your visitors to find the content they are looking for.

Secondly, highlighting a menu item can also improve the overall aesthetics of your site by helping to create a cohesive and visually appealing navigation menu. By using color, font, or other styling techniques to highlight the current menu item, you can create a more polished and professional look for your site. Plus, the process is as simple as when hiding unnecessary menu items in WordPress.

How to highlight a menu item in WordPress?

In this guide, we will cover three different methods for highlighting a menu item in WordPress:

  1. Using the CSS current-menu-item Class
  2. Using the highlight_menu_item Function
  3. Highlight a menu item in WordPress using a theme customizer
Laptop with a coding page on it located on a white desk
There are plenty of simple ways to highlight a menu item in WordPress.

But before we begin, it’s important to note that the method you choose will depend on your specific needs and the tools you have available. Also, do remember that this is not something you have to do on your own, especially if you’re a WordPress beginner. In fact, you can have this as a part of your customized website maintenance and have professionals handle it for you. But if you want to learn how to do this on your own, let’s dive in and take a closer look at each of these methods.

Method 1: Using the CSS current-menu-item Class

To highlight a menu item in WordPress, you can use the current-menu-item class in your site’s CSS. This class is automatically added to the menu item that corresponds to the page the user is currently viewing. To use this method:

  1. Access your site’s CSS file and add some styling to the current-menu-item class, like this:.current-menu-item {
    background-color: #333;
    color: #fff;
    }
  2. Edit the menu.php file in your theme and add the current-menu-item class to your menu’s HTML, like this:<ul>
    <li class=”current-menu-item”><a href=”#”>Home</a></li>
    <li><a href=”#”>About</a></li>
    <li><a href=”#”>Contact</a></li>
    </ul>

This will highlight the current menu item whenever a user navigates to one of the pages in the menu. Overall, using the current-menu-item class in your CSS is a simple and effective way to highlight a menu item in WordPress.

Method 2: Using the highlight_menu_item Function

To highlight a specific menu item in WordPress, you can also use the highlight_menu_item function. This function allows you to highlight a menu item based on the page the user is currently viewing. To use this method:

  1. Add the highlight_menu_item function to your site’s functions.php file or a custom plugin:function highlight_menu_item($menu_id, $menu_item_id) {
    if (is_page($menu_item_id)) {
    $menu_item = wp_get_nav_menu_item($menu_item_id);
    $menu_item->classes[] = ‘current-menu-item’;
    }
    }
  2. Call the highlight_menu_item function in your theme or plugin, like this:add_action(‘wp_nav_menu_items’, ‘highlight_menu_item’, 10, 2);
  3. Pass the ID of the menu and the ID of the menu item to highlight as arguments when calling the function, like this:highlight_menu_item(‘primary-menu’, ‘about’);

This will highlight the specified menu item whenever a user navigates to the corresponding page.Using the highlight_menu_item function is a more flexible way to highlight a menu item in WordPress. This is because it allows you to specify which menu item to highlight rather than relying on the current-menu-item class.

Method 3: Using theme customizer to highlight a menu item in WordPress

If you’re using a non-block-enabled theme, you may be able to highlight a menu item using the theme customizer. Here’s a step-by-step guide on how to do this:

  1. Go to Appearance » Customize in your WordPress dashboard and launch the theme customizer.
  2. Click on the ‘Menus‘ tab.
  3. Click on the gear icon in the top right corner to display advanced properties.
  4. Check the ‘CSS Classes‘ box.
  5. Scroll down to the ‘Menus‘ section and click on the menu whose menu items you want to highlight.
  6. Select the menu item you want to highlight.
  7. Expand the menu item to display some options and click into the ‘CSS Classes‘ field.
  8. Write ‘highlighted-menu‘ in the field. This CSS class can be added to multiple menu items to highlight them all.
  9. Go to the ‘Additional CSS‘ tab in the theme customizer and paste the following CSS code:/* Highlighted menu */
    .highlighted-menu {
    background: #FFB6C1;
    border-radius: 35px;
    padding: 0px 20px;
    line-height: 50px;
    }
Man smiling while sitting on a chair and looking at his laptop
Highlighting menu items on your WordPress website will help you improve user experience.

If your theme doesn’t have an ‘Additional CSS’ field in the theme customizer, you may need to check the theme settings to find out how to add custom CSS. If you can’t find it, you may want to contact the developer or add it using the WPCode plugin.

The bottom line

We hope our article helped you learn how to highlight a menu item in WordPress. As you can see, all three methods we’ve presented in this article are pretty straightforward and suitable even for WordPress beginners. However, if you’re not comfortable with poking around this part of your website on your own, you can always reach out to WordPress pros and let them take care of this for you. And they’ll do so much more than that – they’ll ensure your website is always running smoothly and efficiently.

 

404 error404 pageabove the foldadvanced cssAIDA modelakismet pluginbacklinks auditbehavior patternbounce ratebrowser compatibilitybulk deletecaching pluginscall-to-actionchild themecode snippetcolor schemecomment sectioncompetitors' backlinkscontact formconversion ratecreate child themeCTA buttoncustom pagecustom themedead linksdefault configurationdigital marketingdomain authorityeasy manageedit main pageediting toolsemail marketingengaging contentFAQ pluginsfilter spamfix site errorfolder structurefree pluginsfriendly toneGoogle analyticsgoogle rankingsGravity Forms pluginguest postingHeadless WordPressHow toimage optimizationincrease readabilityindex errorsinfluencer marketingkeyword researchlibrary assistantlink managementlink trackingloading speedlocal businesseslong-tail keywordsmedia replacemedia restrictionmobile optimizationmoney onlinemulti currency pluginsmysql queryonline presenceonline validatorpage builderpage creationpopup pluginproducts and servicesquality imagesquality serviceReact JSreaction buttonsredirect chainsresponsive designschema markupsearch rankingsearch termsSEO for bloggersSEO optimizationSEO professionalsSEO tipsSEO toolsshort linkssocial mediasocial media plugins for WordPressssh commandsstatic pagetargeted audiencetechnical performancetest metrictext formattheme setting uptime utilizationtips and trickstraffic increaseunique visitorsuser accessuser engagementuser experiencevisual designvisual elementsvisual reportweb crawlersweb hostingwebsite architecturewebsite auditwebsite designwebsite elementswebsite maintenancewebsite optimizationWebsite problemswebsite securitywebsite structureWhat’s new in WordPresswhite spacewoocommercewordpressWordPress admin email verification noticeWordPress debug modeWordPress functionalityWordPress pluginWordPress pluginsWordPress recovery modeWordPress responsive designwordpress securitywordpress themewordpress theme editwordpress tipsWordPress tips and tricksWordPress web hostingwp security

Newsletter