Adding a custom class to a WordPress menu link

Adding a custom class to WordPress menu

Your site menu plays an important role for the visitors of your site. It is like a map that helps them to get to the right place on the site. Without such map, it will be super hard for the visitors to find information quickly and easily which will cause a negative user experience for them. As a result, they will leave the site.

In this article, I want to show you how to add a custom class to WordPress menu in order to highlight a specific menu item. You do not need to write a custom PHP code for it because this feature is available in WordPress. The thing is that it is hidden by default, so you will need to enable it to use it.

There are two places in a WordPress dashboard where you can add a custom class to your menu link: the Menus page and the Customizer. I am going to show you both ways of adding a custom class to WordPress menu.

The Menus page

In this method, I am going to use the Prosperity theme to illustrate you a use of a custom class in the menu item. First of all, I need to create that custom class on my site. I’ve decided that I want to change a color of my menu item and change its font weight. Here is a custom CSS for it:

.menu-link-red a {
  color: #b93054;
  font-weight: bold;
}

As you can see, the name of my custom class is menu-link-red. Now, I need to add this custom CSS to my site. For this example, I am going to use a native Custom CSS option but you can also use a child theme for it. If you do not know how to add a custom CSS to a WordPress site then please check this article.

Once a custom CSS is added to the site, it is time to change an appearance of the menu link by using our new CSS class. Follow these steps to add a custom CSS to the menu item:

Adding a custom class to WordPress menu via dashboard

  1. In your dashboard, navigate to Appearance → Menus.
  2. On the Menus page, find the Screen Options tab. It should be located on the top right corner of the page in your WordPress admin area.
  3. Under Show advanced menu properties, check CSS Classes.
  4. Now expand your menu item to reveal the CSS Classes (optional) text input.
  5. Enter your class name under the CSS Classes (optional) label.
  6. Save your menu to apply a class.

Now, it is time to check the site. Below, I’ve added a screenshot of the menu before and after, so you can see a difference. Your menu might look different because of using different themes. In general, you should see the change.

Adding a custom class to WordPress menu

The Customizer

In this method, I am going to use the Venture theme to show you a different style of the menu link. Let’s create a new custom CSS. I want to have a round menu link with a plan background color. Here is a custom CSS to achieve it:

.menu-link-rounded a {
  background-color: #5454e6;
  padding: 0 20px;
  border-radius: 30px;
  text-shadow: none;
  font-weight: bold;
}

Note, you can name your CSS class as you like. Once the custom CSS is created, I need to add it to the site again. Then apply a new CSS class to the menu item using the Customizer:

Adding a custom class to WordPress menu via the customizer

  1. In your dashboard, navigate to Appearance → Customize.
  2. In the Customer, click Menus link to open the Menus panel.
  3. In the panel title section, find a gear icon and click on it to make sure that CSS Classes is checked under the Show advanced menu properties label. If this option is not checked then check it to be able to add custom classes to the menu links.
  4. Select the menu where a desired menu link is located.
  5. Now expand your menu item and enter your class name under the CSS Classes (optional) label.
  6. Click Publish at the top of the panel to save your menu and apply a custom class to the link.

Below, you can find a result of using a custom CSS in the menu link.

Adding a custom class to WordPress menu

As you can see, it helps to highlight important links in your menu bar which can have a positive effect on traffic, conversions and user-friendliness of your site.

Posted in Tips, WordPress

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.