Is this possible?

I want to add different classes to the anchors, so not the same on all anchors. How can I do this?

PS: I am using this:

function add_nav_class($output) {
    $output= preg_replace('/<a/', '<a class="your-class"', $output, 1);
    return $output;
}
add_filter('wp_nav_menu', 'add_nav_class');

But I want to add different classes to the links...

So like this:

<li><a class="1></a></li>
<li><a class="2></a></li>

and so on...

Is this possible?

I want to add different classes to the anchors, so not the same on all anchors. How can I do this?

PS: I am using this:

function add_nav_class($output) {
    $output= preg_replace('/<a/', '<a class="your-class"', $output, 1);
    return $output;
}
add_filter('wp_nav_menu', 'add_nav_class');

But I want to add different classes to the links...

So like this:

<li><a class="1></a></li>
<li><a class="2></a></li>

and so on...

• menus
• navigation
• links
• sub-menu

Share Improve this question edited Jul 29, 2013 at 8:33 Johan asked Jul 28, 2013 at 10:27 JohanJohan 30911 gold badge1010 silver badges1919 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 2

Yes, it is possible.

You can achieve this using wp_nav_menu_objects filter.

function my_wp_nav_menu_objects($objects, $args) {
    foreach($objects as $key => $item) {
        $objects[$key]->classes[] = 'my-class';
    }
    return $objects;
}
add_filter('wp_nav_menu_objects', 'my_wp_nav_menu_objects', 10, 2);

The only problem is that these classes will be added to li elements and not to links directly. But it's default WordPress behavior and I don't think you should change it.

If you really have to change it, it is still possible:

function my_walker_nav_menu_start_el($item_output, $item, $depth, $args) {
    // you can put your if statements in here (use item, depth and args in conditions)
    if ( $depth == 1 ) {
        $item_output = preg_replace('/<a /', '<a class="level-1-menu" ', $item_output, 1);
    } else if ( $depth == 2 )
        $item_output = preg_replace('/<a /', '<a class="level-2-menu" ', $item_output, 1);
    }
    // .. and so on
    return $item_output;
}
add_filter('walker_nav_menu_start_el', 'my_walker_nav_menu_start_el', 10, 4);

you can follow the below Steps :

Step 1 : In the wp-admin, go to Appearance -> Menus,put the class on the menu item here "CSS Classes (optional)". If you can't see the "CSS Classes (optional)" in the menu item, then there is "Screen Option" in the right top of the screen and there are the options "CSS Class" under "Show advanced menu properties".

Step 2: Under your them folder/function.php add below code :

function my_walker_nav_menu_start_el($item_output, $item, $depth, $args) {
    $classes     = implode(' ', $item->classes);
    $item_output = preg_replace('/<a /', '<a class="'.$classes.'"', $item_output, 1);
    return $item_output;
 }
add_filter('walker_nav_menu_start_el', 'my_walker_nav_menu_start_el', 10, 4);

Hope above code works for you , let me know if still it doesn't work.

function my_walker_nav_menu_start_el($item_output, $item, $depth, $args) {

    if (in_array('current-menu-item', $item->classes) ){
    $classes['class'] = 'active ';
    }
    $item_output = preg_replace('/<a /', '<a class="'.$classes['class'].'"', $item_output, 1);
    return $item_output;

 }
add_filter('walker_nav_menu_start_el', 'my_walker_nav_menu_start_el', 10, 4);