Adding different classes to anchor in navigation menu

1 Views

Is this possible?

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

Read More

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…

Post Views: 1

Related posts

3 comments

  1. 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);

  2. 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.

  3. 

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);

Comments are closed.