0

I would like to show the title or the description of the parent item on top of the the sub-menu list items. I have basic knowledge on how to modify the walker by calling start_lvl function to insert after <u> or start_el to insert after <li> but couldn't pull the "item->Description" of the parent item to concentrate into the $output var.

such as

<ul>
   <li>
      <a href="">German Cars</a>
      <ul>
         <li><a href="">BMW</a></li>
         <li><a href="">Mercedes</a></li>
         <li><a href="">Volkswagen</a></li>
      </ul>
   </li>
   <li>
      <a href="">American Cars</a>
      <ul>
         <li><a href="">Chrysler</a></li>
         <li><a href="">Ford</a></li>
         <li><a href="">General Motors</a></li>
      </ul>
   </li>
</ul>

to show like

<ul>
   <li>
      <a href="">German Cars</a>
      <ul>
         <h2>Cars Made in Germany </h2> <!--parent list item's description shows here-->
         <li><a href="">BMW</a></li>
         <li><a href="">Mercedes</a></li>
         <li><a href="">Volkswagen</a></li>
      </ul>
   </li>
   <li>
      <a href="">American Cars</a>
      <ul>
         <h2>Cars Made in the USA</h2> <!--parent list item's description shows here-->
         <li><a href="">Chrysler</a></li>
         <li><a href="">Ford</a></li>
         <li><a href="">General Motors</a></li>
      </ul>
   </li>
</ul>

Could anybody please guide me here..?

1

If i understand your question correctly, the first thing you would need to do is, go to your menus /wp-admin/nav-menus.php (screen options) and checkbox (tick) on the description. and this is how your walker class should look like

    class Menu_With_Description extends Walker_Nav_Menu {
    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;

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

        $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 .= '<br /><span class="sub">' . $item->description . '</span>';
        $item_output .= '</a>';
        $item_output .= $args->after;

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

and than locate your wp_nav_menu and update it with

    <?php $walker = new Menu_With_Description; ?>

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'walker' => $walker ) ); ?>
  • Thank you very much. I will apply this code; but before i will try understand how it works.. – Redu Feb 4 '15 at 11:36
  • I don't think this solution is correct. The requested header must be inserted by the start_lvl method however we must also utilize the start_el methode just for the sake of passing the $items->description to start_lvl method via a public var. – Redu Feb 5 '15 at 8:17
  • did u got any error while using the code ? as i am using this same code on one of client sites and it works perfectly – robin Feb 7 '15 at 1:50

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.