How to Highlight a Menu Item in WordPress

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.

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

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;
   }

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.