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


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 say it's possible, but than you say it's adding it to the list item? That is no answer? I want them directly in to the anchor. – Johan Jul 29 '13 at 9:06
  • But what's the differce? You can use it in CSS like .my-class a instead of a.my-class. jQuery selectors works like that too. – Krzysiek Dróżdż Jul 29 '13 at 9:08
  • 1
    The difference is that I want to add icons, using a font. If I put them in a list, it won't show it the way I want. If I put in the anchor, it works. That is because it puts them :before them. That's why I am asking you this. FYI: the code that i have inputted in my post is putting a class in to anchors, but I want different classes for the anchors, so not one for all... – Johan Jul 29 '13 at 9:09
  • I know, what your code does (although it does it in very ugly way). You haven't tell the reason why you want it in your question though, so my solution was the best for your question. Updated my answer. – Krzysiek Dróżdż Jul 29 '13 at 9:28
  • Thanks. So in this case, if I want the other anchors to have a different class, I have to add a 2 instead of the 1, is that correct? What do I have to do for that? – Johan Jul 29 '13 at 9:55

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.