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";
}
}
  • Paste your walker in here. – kaiser Jan 17 '12 at 18:14
  • The walker is pretty much the same as the default one: – Jay Jan 17 '12 at 18:27
  • And you want every reader or possible answerer to go to core and check how the default walker looks like? – kaiser Jan 17 '12 at 18:28
  • no, I ran out of characters via comments..edited my original post. – Jay Jan 17 '12 at 18:30
  • Was meant that way :) – kaiser Jan 17 '12 at 18:44
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.

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.