Add Class to Link in Custom Menu

Hey, I was struggling with the same thing myself. I wanted certain menu items to carry a different text color. After tinkering for awhile and almost giving up, I found the following worked:

li.NEWCLASS a {
color: #ffffff !important;
}

If you want different colors for link, visited, hover, active, then you’d want to use this:

li.NEWCLASS a:link {
color: #ffffff !important;
}
li.NEWCLASS a:visited {
color: #ff0000 !important;
}
li.NEWCLASS a:hover {
color: #ff00ff !important;
}
li.NEWCLASS a:active {
color: #0000ff !important;
}

I should add, in case anyone else finds this topic via search, I am using the Atahualpa theme.

I have run into the same problem. Pnaw, the solution you provided will definitely help in the case of styling, but for some cases you need to have the class applied to the anchor itself.

For example, I am trying to implement a lightbox on one of my menu links. In order to do so, I need to apply a class to the anchor.

I’ll report back if I find anything!

Ryan, I want to add colorbox to a couple of my menu links as well. Has anyone found a solution? Many thanks.

SOLVED!!!! I needed to figure this out to make the menu item link to inline HTML in a fancybox. Paste the following code into your theme’s function.php:

function add_menuclass($ulclass) {
return preg_replace('/<a rel="fancybox"/', '<a rel="fancybox" class="fancybox"', $ulclass, 1);
}
add_filter('wp_nav_menu','add_menuclass');

Then… in the Menu tab of the WP Dashboard, create a custom link, add it to your menu. On the top where is says Screen Options, make sure you have “Link Relationship (XFN)” checked. It will add that field to your custom menu item. Type “fancybox” (without quotes) into the field and save your menu.

The function looks for the call to the navigation menu, then finds wherever you have a rel=”fancybox” and replaces it with a rel=”fancybox” class=”fancybox”. You can replace fancybox with whatever class you need to add to your menu items. Done and done!