Menu item description for Travelify WordPress Theme

Hi and thanks for this nice theme.

I would like to show menu description under menu title, I’ve found several way to do it, using Walker function but none are working on my travelify website.

I’ve try these two ways:

http://stylizedweb.com/2010/08/16/use-the-link-description-in-wordpress-3-0-menus/

I might doing something wrong.

At first they say to add a code in functions.php
is it travelify/functions.php or travelify/library/functions/functions.php?

Then it is said to add another code in wp_nav_menu() in header.php
is it in header.php in this case or header-extension.php?

Thanks and regards.

You can add those code examples in travelify/functions.php or travelify/library/functions/functions.php and both ways it will work properly as they are both in use and both store functions. One in the root directory is slightly more “important” and is loaded first.

Most of the code that is output in header as well as call for wp_nav_menu can be found on header-extensions.php

If we look into WPBeginner tutorials:

You will have to modify current (now to create a new one unless you want a different menu) wp_nav_menu in header-extensions.php to add ‘walker’ => $walker as well as add function before it like this:

<?php $walker = new Menu_With_Description; ?>

The rest of the code goes into functions.php file. Shouldn’t be that difficult to make it work.

Thanks Aigars for your fast answer!

Well I 've try several time and eventually it worked :slight_smile:

What I did exactly:

1/ added the first code in travelify/functions.php at the end:

endif; // travelify_setup

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 );
	}
}

2/ Then in travelify/library/strucutre/header-extension.php added one line of code and replaced the value of wp_nav_menu ( $args ) like that:

From this:

  
	<?php
		if ( has_nav_menu( 'primary' ) ) { 
			$args = array(
				'theme_location'    => 'primary',
				'container'         => '',
				'items_wrap'        => '<ul class="root">%3$s</ul>' 
			);
			echo '<nav id="main-nav" class="clearfix">
					<div class="container clearfix">';
				wp_nav_menu( $args );

to this:

  <?php $walker = new Menu_With_Description; ?>
	<?php
		if ( has_nav_menu( 'primary' ) ) { 
			$args = array(
				'theme_location'    => 'primary',
				'container'         => '',
				'items_wrap'        => '<ul class="root">%3$s</ul>' 
			);
			echo '<nav id="main-nav" class="clearfix">
					<div class="container clearfix">';
				wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'walker' => $walker ) );

Finally in order to have the description showing I had to resize menu bar in travelify/style.css
line 666, changed height from 32px to 50px as follow:

#main-nav a {
	color: #fff;
	display: block;
	float: left;
	font-size: 14px;
	padding: 8px 12px 0 10px;
	height: 50px;
}

Those changes did the job but will appreciate your feedback if I did anything wrong.

Regards