Wordpress: Adding a class to links in a menu
Being new to Wordpress, I had a little trouble in adding classes to links in the main menu. Having found the “CSS Classes (optional)” option I thought I had figured this one out, but not quite. I viewed the pages source and found no class. Obviously I'd missed something out.
After reading up about this issue, I realised I had failed to select the correct Theme Location.
Some themes have many menus, and selecting the correct one can be confusing, so it's probably best to select each menu in turn, save, and then see which menu has become visible. Once the menu you want to add classes to is visible you're good to go.
Make sure you click the Screen Options tab in the top right corner of the dashboard, then click the CSS Classes check box. Now once you click back on the menu item in the Menu page, “CSS Classes (optional)” will now be visible.
Simply add a class name in the text field; you can add more than one class as well, just add a space between class names. View the source/inspect element on the newly classed element, and you will now see the class/s you just added.
I actually managed to find a workaround for not selecting the correct Theme Location by installing the Page List Plus plug-in (http://wordpress.org/extend/plugins/page-lists-plus/) which gives a variety of menu oriented options. Worth a look if you want more control over Wordpress page menus.