How to add description in WordPress nav_menu
Need to add a small portion of description to your WordPress nav_menu like above? Follow this simple step to do so.
Step 1 – add custom walker to your functions.php
if( !class_exists('Custom_Description_Walker') ): //////////////////////////////////////////////////////////////////// // add description to wp_nav /////////////////////////////////////////////////////////////////// class Custom_Description_Walker extends Walker_Nav_Menu { /** * Start the element output. * * @param string $output Passed by reference. Used to append additional content. * @param object $item Menu item data object. * @param int $depth Depth of menu item. May be used for padding. * @param array $args Additional strings. * @return void */ function start_el(&$output, $item, $depth, $args) { $classes = empty ( $item->classes ) ? array () : (array) $item->classes; $class_names = join(' ', apply_filters('nav_menu_css_class',array_filter( $classes ), $item) ); ! empty ( $class_names ) and $class_names = ' class="'. esc_attr( $class_names ) . '"'; $output .= "<li id='menu-item-$item->ID' $class_names>"; $attributes = ''; ! empty( $item->attr_title ) and $attributes .= ' title="' . esc_attr( $item->attr_title ) .'"'; ! empty( $item->target ) and $attributes .= ' target="' . esc_attr( $item->target ) .'"'; ! empty( $item->xfn ) and $attributes .= ' rel="' . esc_attr( $item->xfn ) .'"'; ! empty( $item->url ) and $attributes .= ' href="' . esc_attr( $item->url ) .'"'; // insert description for top level elements only // you may change this $description = ( ! empty ( $item->description ) and 0 == $depth ) ? '<small class="nav_desc">' . esc_attr( $item->description ) . '</small>' : ''; $title = apply_filters( 'the_title', $item->title, $item->ID ); $item_output = $args->before . "<a $attributes>" . $args->link_before . $title . '<br /><span>' . $description . '</span>' . '</a> ' . $args->link_after . $args->after; // Since $output is called by reference we don't need to return anything. $output .= apply_filters( 'walker_nav_menu_start_el' , $item_output , $item , $depth , $args ); } } endif;
Step 2 – add custom walker to your wp_nav_menu()
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => false, 'menu_class' => 'sf-menu', 'fallback_cb' => 'revert_wp_menu_page','walker' => new Custom_Description_Walker )); ?>
add the ‘walker’ => new Custom_Description_Walker to your existed wp_nav_menu()
Step 3 – adding the description for each menu item
go to wp-admin -> appearance -> menu and click on the top right Screen Options and check (tick) the red description area
open any menu item and text into description box like below
Step 4 – add some css to the description
in this case, description were wrap inside a < span > so we need to add some extra css to span. example like below
.sf-menu a span { font-size: 10px !important; }
Once every step completed, you should see a small description in each of your menu item.

Leave a Reply