WordPress – add description to drop down menu

0 Views

I have been trying to get the description for the parent menu item to show up to the right of the drop-down menu.

Like this:

Read More

enter image description here

But I cannot get the description to show up there at all. I have followed several tuts on this, including: This one that seems to have the same code as the other 5 or so I’ve seen.

I tried using the $item->description but I’m not sure where that get’s populated in the walker class. I tried just reformatting the output, but to no avail.

Here is what I have: 

class My_Walker_Nav_Menu extends Walker_Nav_Menu {
      function start_lvl(&$output, $depth, $item) {
        $indent = str_repeat("t", $depth);
        $output .= "n$indent<section class="sub-menu col-12"><div class="nav-info col-8 right"><p>". $item->description ."</p></div>";
        $output .= "n$indent<ul class="sub-menu-list col-4">n";
      }
    }

Everything works fine except there is no description where it says $item->description. I know there is a description set in wordpress, but it’s not showing up.

What I need to know, I think, is where I pull the description from. The walker works, but the only think not showing up is the description.

Thanks in advance.

Post Views: 0

Related posts

Leave a Reply

2 comments

  1. Using a combination of guesswork, and research, I’ve found the answer!

    Using the tutorial I was looking at previously, I realized I needed to use separate methods in the class in order to add the description AND give the sub-menu ul a custom class.

    Here is the part that adds the description where it’s needed, before the sub-menu.

    class My_Walker_Nav_Menu extends Walker_Nav_Menu {
        function start_el(&$output, $item, $depth, $args) {
            global $wp_query;
            $indent = ( $depth ) ? str_repeat( "t", $depth ) : '';

            $output .= $indent . '<li id="menu-item-'. $item->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 .= "n$indent<section class="sub-menu col-12"><div class="nav-info col-8 right"><p>" . $item->description . "</p></div>n";
            $item_output .= $args->after;

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

        }

    Afterwards, I used this method to give the sub-menu my custom class.

            function start_lvl(&$output, $depth) {
            $indent = str_repeat("t", $depth);
            $output .= "n$indent<ul class="sub-menu-list col-4">";
        }

    The problem was now that the formatting was off. An extra div kept showing up, and I realized I was never closing the section element, that would have normally been closed when used in the start_lvl method. Since it was in the start_el method it was not closing. So, I added this at the end to make sure both the ul and section would close properly.

            function end_lvl(&$output, $depth) {
            $indent = str_repeat("t", $depth);
            $output .= "n$indent</ul></section>";
        }
    }

    Now the description shows up as desired. Thank you to @Iliya Reyzis for your input. While it did not directly help me, I appreciate you attempting to help me.

  2. When you are adding new walker, you need to bind it to your menu – wp_nav_menu() in the walker parameter like shown in the example –

    wp_nav_menu( array(
 'container' =>false,
 'menu_class' => 'nav',
 'echo' => true,
 'before' => '',
 'after' => '',
 'link_before' => '',
 'link_after' => '',
 'depth' => 0,
 'walker' => new description_walker())
 );

    or you can filter all the menus walker parameter by

    add_filter( 'wp_nav_menu_args' , 'my_description_walker' );
function my_description_walker( $args ) {
    $args['walker'] = new description_walker;
    return $args;
}

    description_walker is the name of the walker

    you can try this walker and figure it out

    class description_walker extends Walker_Nav_Menu
{
     function start_el(&$output, $item, $depth, $args) {
        parent::start_el($output, $item, $depth, $args);
            $output .= sprintf('<i>%s</i>', esc_html($item->description));
        }
}