There is no need to add any code for this. You can use the Screen Options
on the menu admin end to achieve this. Please check the instructions below.
-
Login to the admin end of your wordpress site and navigate to
Appearance
=>Menus
section. -
Click the down arrow against the menu item you need to have a different class for.
-
Then click on the
Screen Options
link on the top right section of your screen. -
Check/click the
CSS Classes
option. Once checked, it will show an additional fieldCSS Classes (optional)
below the menu item you had expanded earlier. -
Now provide any custom class in the field and add the respective css code in your theme’s css file.
Note:
- These steps are based on WordPress 3.8 version which may slightly vary if you are using a different version.