1

I'm trying to add the ability to insert Custom CSS Classes to menu items. I believe I do this by extending the walker_nav_menu but I'm not sure how to call the custom classes.

This seems like such a simple question but I've googled and searched here and couldn't find anything for simply adding the custom classes.

Right now I just have:

<?php wp_nav_menu( array( 'theme_location' => 'top-menu', 'walker' => new future_walker_class() ) ); ?>

and

class future_walker_class extends Walker_Nav_Menu {
/*not sure what to put here*/
}

P.S. I'm fairly new to PHP/Wordpress. I tried to be as thorough as possible so I don't waste your time.

3
  • Can you please let us know exactly what is the need of adding custom css classes and do you need to add the same class to each menu items ? or do you want different classes based on any condition to menu item, sub menu items etc ? Commented Jan 17, 2014 at 6:46
  • I'd like to give the menu item an icon from an image sprite using css. So the classes need to be different (based on input from the Menu admin panel).
    – Derek
    Commented Jan 17, 2014 at 6:49
  • I know it automatically generates one like .item804 but in case I move them around (and there's quite a few of them) I want the css code to be easy to read and edit if needed.
    – Derek
    Commented Jan 17, 2014 at 6:51

2 Answers 2

1

If its a matter of adding icons as per the classes, add it from the back-end and use that class to assign icons through css.

enter image description here

3
  • Yep I've done just that. But the custom class doesn't print to html. So I figured that I had to call it somehow using the walker class.
    – Derek
    Commented Jan 17, 2014 at 7:11
  • Do you have any code that renders the menu structure ? or Can you tell me the name of the Theme you are using ? Commented Jan 17, 2014 at 7:14
  • Sorry for delay... I tried doing some digging myself. I rephrased the question with more info that I got from my digging: new question
    – Derek
    Commented Jan 18, 2014 at 6:00
0

okay so based on your code it looks to me like you are working with a child theme, or maybe your own theme. -- this answer is based on that assumption.

First things first, you need to register your (new) menu.

// -- This will go in functions.php
add_action( 'init', 'register_my_menus' );
function register_my_menus() {
  register_nav_menus(
    array(
      'menu-1' => __( 'Menu 1' ),
      'menu-2' => __( 'Menu 2' ),
      'menu-3' => __( 'Menu 3' )
    )
  );
}

You will then need to assign location to the menu in wp-admin > appearance > menus

Then you can style the custom walker

// functions.php
class your_new_Walker_Nav_Menu extends Walker_Nav_Menu {
   function start_lvl(&$output, $depth = 0, $args = Array()) {
        $output .= '<ul class="sub-menu">';
    }
        function end_lvl(&$output, $depth = 0, $args = Array()) {
        $output .= '</ul>';
    }
}

then when you are ready to call the new menu lets say in header.php

<!-- header.php -- assuming php is closed at this point -->
    <div class="navbar-header">
    <?php wp_nav_menu(array(
        'theme_location'  => 'menu-1',
   //   'items_wrap'      => 'nav-wrap', un comment if you want 
        'container_class' => 'class1 class2',
        'walker'          => new your_new_Walker_Nav_Menu
    ));
    ?>
    </div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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