Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I know you can add a class in the custom menu options, but it adds it to the LI before the A. I want to apply the class directly to this specific A rather then the whole LI.

So instead of the output being

<li id="menu-item-51" class="NEWCLASS menu-item menu-item-type-custom menu-item-51"><a href="#">Link</a> </li>

I want it too be like this.

<li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-51"><a href="#" class="NEWCLASS">Link</a></li>

Any ideas?

share|improve this question
Just to be clear, what do you mean by adding class? What options do you exactly click in the admin panel? –  Wordpressor Feb 22 '11 at 20:17
What's the point of that? Just change your selector from .class to .class a? –  wyrfel Feb 22 '11 at 21:06
Yeah i don't get it either, just set your CSS to target the link based on the containing <li> element. If you have a submenu below that particular item it's no problem, you can tackle that in the CSS to(i can give examples if necessary). –  t31os Feb 22 '11 at 21:36
+1 for your comment @wyrfel ... @Picard102 take a look at css specifity. this will also explain you how to properly target html elements via css. –  kaiser Mar 25 '11 at 13:51

4 Answers 4

I know this was answered a long time ago, but just as general info, I found how to add a class to each menu item individually using the "Screen" option of the WordPress admin page for Custom Menus.

share|improve this answer

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 class="fancybox"', $ulclass, -1);

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!

share|improve this answer
Great Post!! Just one thing to note. The code will not work if someone adds a a title. I ran into the same issue... So I just removed the A tag from the beginning of both replacement values. Leaving me with something like this... return preg_replace('/rel="fancybox"/', 'class="fancybox"', $ulclass, -1); The code works great! –  user30690 Mar 29 '13 at 13:59

I found a solution at this site through the use of a custom walker.

Two steps: replace the default wp_nav_menu code with an edited one, and then add code to the functions.php of the theme.

First, replace the default wp_nav_code with the following (the code is copied from the above site):

    wp_nav_menu( array(
     'menu' => 'Main Menu',
     'container' => false,
     'menu_class' => 'nav',
     'echo' => true,
     'before' => '',
     'after' => '',
     'link_before' => '',
     'link_after' => '',
     'depth' => 0,
     'walker' => new description_walker())

Next, add the following code to functions.php. By doing this you can actually add a class to the menu links:

class description_walker extends Walker_Nav_Menu

  function start_el(&$output, $item, $depth, $args)
       global $wp_query;
       $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

       $class_names = $value = '';

       $classes = empty( $item->classes ) ? array() : (array) $item->classes;

       $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
       $class_names = ' class="'. esc_attr( $class_names ) . '"';

       $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

       $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
       $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
       $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
       $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

       $prepend = '<strong>';
       $append = '</strong>';
       $description  = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';

       if($depth != 0)
                 $description = $append = $prepend = "";

        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
        $item_output .= $description.$args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );

                    if ($item->menu_order == 1) {
            $classes[] = 'first';


Towards the end of the code are several lines that start with $item_output. In particular, you want to look at this piece:

$item_output .= '<a'. $attributes .'>';

Because this line determines the output for the beginning of the link html. If you change it to something like this:

$item_output .= '<a'. $attributes . 'class="abc"' .'>';

Then all your links in the menu will have class="abc" added to them.

That said, it doesn't allow a custom class for each link (or at least I don't know how to code it). This is an issue for me.

For those asking why would you want to do this? I want to have my menu links open lightboxes (colorboxes, to be more specific), and they require classes on the links to do that. For example:

<a class="lightbox1" href="#">Photo</a>

Is there possibly a way to dynamically generate the classes, such as "lightbox1" for the first link, "lightbox2" for the second link, and so on?

share|improve this answer
@Rainman your answer helped me out a bit and you posed a good question. I'm sure you've found a better solution, but for those that have not, I used a modified version of the solution found here: wpbeginner.com/wp-themes/… –  NW Tech May 21 '13 at 22:27

you can use nav_menu_css_class filter

add_filter('nav_menu_css_class' , 'my_nav_special_class' , 10 , 2);
function my_nav_special_class($classes, $item){
    if(your condition){ //example: you can check value of $item to decide something...
        $classes[] = 'my_class';
    return $classes;

Using this $item you can any condition you want. and this will add the class to the specific li and you can style the a tag based on that like so:

.my_class a{
   background-color: #FFFFFF;
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.