0

I'm trying to assign a different ID to each sub-menu wordpress generates using the wp_nav_menu function. As it is, wordpress assigns the same class (sub-menu) to every sub menu generated. 

<ul class="sub-menu"></ul>

I'd like to have it generate something like:

<ul class="sub-menu" id="xx"></ul>

I have a custom walker in my theme function file in order to modify the output, but I have no idea how to get, say the ID of the parent menu item and assign it to the UL output.

Any help is appreciated!

edit Walker's below:

/**Custom walker**/
class description_walker extends Walker {
var $tree_type = array( 'post_type', 'taxonomy', 'custom' );
var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' );
function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul class=\"sub-menu\" id=\"wut\">\n";
}
function end_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "$indent</ul>\n";
}
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;
    $classes[] = 'menu-item-' . $item->ID;

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

    $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
    $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';

    $output .= $indent . '<li' . $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        ) .'"' : '';

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

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

function end_el(&$output, $item, $depth) {
    $output .= "</li>\n";
}
}
Improve this question
5
  • Paste your walker in here.
    – kaiser
    Commented Jan 17, 2012 at 18:14
  • The walker is pretty much the same as the default one:
    – Jay
    Commented Jan 17, 2012 at 18:27
  • And you want every reader or possible answerer to go to core and check how the default walker looks like?
    – kaiser
    Commented Jan 17, 2012 at 18:28
  • no, I ran out of characters via comments..edited my original post.
    – Jay
    Commented Jan 17, 2012 at 18:30
  • Was meant that way :)
    – kaiser
    Commented Jan 17, 2012 at 18:44

1 Answer 1

Reset to default
0

Ended up using the following

 <script>
$(function(){
    var i =0;
 $('ul.sub-menu').addClass (function(idx) {

     return "item-" + idx;
 });
 });
 </script>

It adds a class of item-0, item-1, etc to each sub-menu it finds.

Improve this answer

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.