How to Add a Custom Class to a Menu Item in WordPress

Adding a custom class to a menu item in WordPress is quite simple. Here’s a step-by-step guide to help you through the process.

Step 1: Access the Menus Section

1. Log in to your WordPress Dashboard.

2. Navigate to Appearance → Menus.

Step 2: Enable CSS Classes (if not already visible)

1. In the top right corner, click Screen Options.

2. A dropdown panel will appear. Make sure the CSS Classes checkbox is checked.
   

Step 3: Add Custom Class to Menu Item

1. In the menu structure, click the dropdown arrow next to the menu item where you want to add the class.

2. You will now see a field labeled CSS Classes (optional).

3. Enter your custom class name (e.g., custom-menu-item).
   

Step 4: Save the Menu

1. Scroll down and click the Save Menu button.

2. Your menu item will now have the custom class added.

Example CSS Usage

To apply custom styles to your menu item, you can add the following CSS to your style.css or Custom CSS section:

.custom-menu-item {
    background-color: #f1f1f1;
    color: #333;
    padding: 10px;
}