WordPress.org

1. MisterSkippy
   Member
   Posted 2 years ago #

   Hi,

   I'm trying to create a menu with wp_nav_menu, but I cannot discover how to show the description you can set in the Administration of the menu's.

   My Code:
   

   <?php wp_nav_menu( array( 'sort_column' => 'menu_order',
   										  'menu_class' => 'nojs',
   										  'link_before' => '
   				<i class="icon"></i>
   				<strong class="title">',
   										  'link_after' => '</strong>
   				<em class="description">
   					This is where the description should come if possible...
   				</em>' ) ); ?>

   Hopefuly someone can show me how.
   Tha!

2. kdub294
   Member
   Posted 1 year ago #

   @MisterSkippy - Have you had any luck with this? This is such a helpful feature, but I can't seem to find any documentation on how to pull in the value for the "Description" field.

3. mmahoney
   Member
   Posted 1 year ago #

   I would like to know this, too. Anyone?

4. MisterSkippy
   Member
   Posted 1 year ago #

   I've been looking around, but the only thing I find are other people asking the same question, but nobody seems to know how...

5. dennis.winter
   Member
   Posted 1 year ago #

   Ok,

   I've found out, how it can be done!

   You have to use the "Walker" option in wp_nav_menu()!

   Just add this to functions.php

   <?php
   
   class My_Walker 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 this to your header.php
   

   <?php
          $walker = new My_Walker;
   	wp_nav_menu(array(
   	        'echo' => true,
   		'container' => '',
   		'theme_location' => 'primary',
   		'menu_class' => 'grid-10 omega',
   		'walker' => $walker
   	));
   ?>

6. MisterSkippy
   Member
   Posted 1 year ago #

   Thanks dennis! It worked.

   Hopefully this helps other people who had the same problem as well.

7. Chris Harrison
   Member
   Posted 1 year ago #

   I revised this slightly so that it would use the Title Attribute from the Menu items instead, and would include that text outside of the link:
   

   class My_Walker 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 .= '</a><br /><span class="sub">' . $item->attr_title. '</span>'; /* This is where I changed things. */
   		$item_output .= $args->after;
   
   		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
   	}
   }

8. Huw Tyler
   Member
   Posted 1 year ago #

   Anyone got any ideas on how to do the same thing but instead of displaying the title and description, show the item's thumbnail?
   $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;

   This line show the title, is there any way of doing $item->thumbnail or a workaround hack?

9. ShdMstr
   Member
   Posted 1 year ago #

   I was trying to do the same to develop my theme and stumble this article and really help me to learn about this. Needless to say "Thank You All" for sharing your knowledge with others that may have this problem(like me...).

   I did a little modification to it(again). what I did was to add a class for the title to be able to style it with css. with this method you can style both the title and the description, using different classes in the css. Other thing I did was to include both, the title and the description in the same link so both of them are clickable not just the title (they are now in the same block LI with different classes)... here is the code

   just one comment before the code, you can change name of the class of the title or the name of the class sub if those cause a conflict in your page...

   <?php
       class My_Walker 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 .= '<span class="title">' . $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . '</span>' . $args->link_after;
           $item_output .= '<span class="sub">' . $item->attr_title. '</span></a>'; /* This is where I changed things. */
           $item_output .= $args->after;
   
           $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
       }
   }
   ?>

   By the way this is my first contribution to wordpress.org and I am still learning, I'm a beginner, and still developing my first theme.

   I hope this help you people

   PD. my English it's not that good because it's not my first language so, please forgive the inconsistencies in the text-form / spelling etc.

Topic Closed

This topic has been closed to new replies.