How to display the content of the wordpress menu description field

As you can see, instead of a simple list we got the menu item name and below that name is a small description of that menu item. This is currently a rather popular style that unfortunatley can’t be done out of the box by wordpress.

As you may already know, once you have created a menu at your wordpress backend at Appearance > Menus you can use a wordpress function called wp_nav_menu() within your template files to display those menus.

The problem is, the basic output would look something like this:

<ul id="menu-main">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Blog</a></li>
</ul>

With a basic unordered list like that its almost impossible to create such a menu. So we need to change the output to get this:

<ul id="menu-main">
     <li><a href="#"><strong>Home</strong><span>Starting the journey</span></a></li>
     <li><a href="#"><strong>About</strong><span>What to expect</span></a></li>
     <li><a href="#"><strong>Contact</strong><span>Get in touch!</span></a></li>
     <li><a href="#"><strong>Blog</strong><span> Latest storys</span></a></li>
</ul>

The <strong> tags wrap arround the title whereas the description is put into the <span> tags. Those can be styled easily with CSS later on to create this special menu style.

Preparing the backend

The first thing we need to do is to setup the menu properly in our backend. WordPress already comes with the option to add a description to each menu item, but it is hidden by default.

When you are at the Appearance > Menus Site you need to look at the top right and you will notice a “Screen Option” tab. Click it and you will get the option to display several other input fields for each menu item, among them a checkbox to show the description.

Once that is done,  if you start editing your items you will notice that you can now enter a description for each menu item.

By default wordpress adds a rather long description to menu items that are created by pages, I would recommend to just delete those enourmous novels and just add a few words just like I did.

Now that we have setup the data to display in our backend, its time to prepare the frontend to show that data.

Editing the output by using a custom walker

WordPress uses a special “Walker” class that iterates over each data record and then displays this record accordingly. The cool thing about that is that we can simply create our own custom walker extending that PHP class. That way we dont need to care about fetching the stuff from the database or preparing the data arrays. We only need to extend the part of the wordpress code that outputs the list. So open your functions.php file and add the following code:

class description_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        ) .'"' : '';

           $prepend = '<strong>';
           $append = '</strong>';
           $description  = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';

           if($depth != 0)
           {
                     $description = $append = $prepend = "";
           }

            $item_output = $args->before;
            $item_output .= '<a'. $attributes .'>';
            $item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
            $item_output .= $description.$args->link_after;
            $item_output .= '</a>';
            $item_output .= $args->after;

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

So what does this Class do? This is basically the walker that wordpress is using (I just copied the source code) and added a few lines in the lower third for a better output: The walker now checks if a description is set, and if thats the case it wraps the description into a span tag and appends it to the navigation title.

The walker also checks if we are currently iterating over a sub menu item or a top level item, since our sub menu items do not need to display a description.

The Function Call

Now that we have created a custom walker we only need to tell wordpress that it should use our walker instead of its own. This can be easily done by calling the wp_nav_menu() with the walker parameter set:

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

Thats it. Once that is done your menu will be output with a completly different code structure that you can easily style with CSS to fit your needs. Here is a short snippet to get you startet:

.nav{
height:50px;
padding-left:13px;
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
}

.nav a{
display:block;
float:left;
line-height:18px;
outline:medium none;
padding:2px 10px;
text-decoration:none;
width:95px;
min-height: 35px;
}

.nav li a strong {
display:block;
font-size:14px;
font-weight:normal;
}

.nav li a span {
display:block;
font-size:10px;
line-height:14px;
}

I hope you can utilize this knowledge to push the boundaries of beautiful wordpress generated menus

It has the ability to create unique skins right from your backend without the need to edit anything within your css files whith just a few mouse clicks and also offers the option to install content automatically when setting up the theme, so it will look like my theme preview!

That makes it super easy to customize everything, since you can take a look first how its done at the dummy posts and pages.

Take a look at the live preview, I ve created a styleswitcher at the frontend so you can change some test values to see how its done. Please be aware that the frontend style-switcher will not be displayed on your site

Key features of the template:

• Automatic content installation for a fast and easy setup, can be activated optionally
• Style switching with color picker and multiple layout and font options.
• New WordPress3 Menu support
• Slideshow & portfolio custom post types (new WordPress3 feature)
• AviaSlider included!
• Unique Portfolio Sorting/Filtering with a custom jQuery script
• Dropdwon Menu, improved with jQuery
• Cufon font replacement
• jQuery 100% unobtrusive wich degrades gracefully if javascript is turned off
• Sleek Image preloader
• Working ajax/php contact form
• PSD files included
• Extensive Documentation Included

First of all if you dont know the theme you can take a look at it here

The Content Auto Installer

This script imports the data from my live demo into your database so you get can get a glimpse on how to set up posts, pages, slides and other content parts correctly. Its especially usefull for those of you who are new to wordpress, but can also heavily decrease the time needed to setup a site for a seasoned WordPress user.

Please forgive me that the vid is without sound but for some reason the macbook mic wants to record background noise instead of my voice the moment I start to talk

Other features of the template:

• New WordPress3 Menu support
• Slideshow, portfolio and testimonial custom post types (new WordPress3 feature)
• 5 different Portfolio/Item slider, also supporting video! AviaSlider included!
• Unique Portfolio Sorting/Filtering with a custom jQuery script
• Dropdwon Menu, improved with jQuery
• Cufon font replacement
• jQuery 100% unobtrusive wich degrades gracefully if javascript is turned off
• Sleek Image preloader
• Working ajax/php contact form
• PSD files included
• Extensive Documentation Included

Take a look at the html versions to see the different styles:

• Expose Default
• Expose Dark
• Expose Light Modern – no rounded corners

Key features of the template:

• Valid XHTM Strict1.0, tableless Design
• Multiple Page templates:
  • Index Page with multiple display options
    • Display options switched by javascript on the fly
    • Stored in cookies so the theme remembers which otion the user has choosen
  • Ajax Contact Page
  • Ajax Submit Design Page
  • And many more…
• jQuery Support:
  • Image slider for portfolio entries
  • Gallery display options switched
  • Dropdwon Menu, improved with jQuery
  • jQuery 100% unobtrusive wich degrades gracefully if javascript is turned off
  • Working ajax/php contact form
• WordPress Shortcodes for addiotional styling and multiple columns
• Additional sidebar widgets to display news, advertising widgets as well as a smart widget which shows either blog or gallery categories depending on which page the user is viewing.
• Utilizes postrating plugin by default, no need to download or activate it
• Supports WordPress 2.9 and 3.0 with new wordpress 3.0 functions
• PSD files included
• Extensive Documentation Included

As always available at Themeforest

1. CleanCut Default
2. CleanCut Minimal
3. CleanCut Minimal Dark
4. CleanCut Boxed Dark
5. CleanCut Boxed Light

Key features of the template:

• Valid XHTM Strict1.0, tableless Design
• Multiple Page templates:
  • 5 different Index Pages:Box Slider, Curtain Slider, Accordion Slider, Crossfading Slider, News Slider
  • Single Post Entry
  • Static Page
  • Static Page Fullwidth
  • Blog Overview Page
  • Portfolio Page
  • Portfolio Single Page
  • Ajax Contact Page
  • And many more…
• jQuery Support:
  • 5 different Portfolio/Item slider, also supporting video!
  • Unique Portfolio Sorting/Filtering with a custom jQuery script
  • Dropdwon Menu, improved with jQuery
  • Cufon font replacement
  • jQuery 100% unobtrusive wich degrades gracefully if javascript is turned off
  • Sleek Image preloader
  • Working ajax/php contact form
• PSD files included
• Extensive Documentation Included

As always the theme is available at Themeforst

1. Elementia Water
2. Elementia Fire
3. Elementia Earth
4. Elementia Air

Key features of the template:

• Valid XHTM Strict1.0, tableless Design
• Multiple Page templates:
  • 5 different Index Pages:Curtain Slider, Accordion Slider, Crossfading Slider, News Slider, No-Slider
  • Single Post Entry
  • Static Page
  • Static Page Fullwidth
  • Blog Overview Page
  • Portfolio Page
  • Contact Page
• jQuery Support:
  • 4 different Portfolio/Item slider, supporting unlimited items
  • Dropdwon Menu, improved with jQuery
  • Cufon font replacement
  • jQuery 100% unobtrusive wich degrades gracefully if javascript is turned off
  • Sleek Image preloader
  • Working ajax/php contact form
• PSD files included
• Extensive Documentation Included

As always,  you can download the template at themeforest.

(skin 2-4 displayed here are only the html versions. The WordPress Version looks the same but of course got all the options and functionallity as well)

• Newscast light
• Newscast dark
• Newscast minimal
• Newscast modern

Take a look at the different slideshow options:

• Newscast light – Accordion Slider
• Newscast light – Alternate Slider: Crossfade
• Newscast light – Alternate Slider: Newsitem Slider

Key features of the template:

• Valid XHTM Strict1.0, tableless Design
• Multile Page Templates
• Contact Form and News Submission Form
• PSD files included
• Extensive Documentation Included

• jQuery Support:
• 3 different Portfolio/Item slider, supporting unlimited items
• Dropdwon Menu, improved with jQuery
• jQuery 100% unobtrusive wich degrades gracefully if javascript is turned off
• Sleek Image preloader
• Working ajax/php contact form
• Working ajax/php news submission form

• Backend Options for:
• both Menus, the Slideshow, Sidebar, Footer, Mainpage, Contact Page, News Submission Form etc
• Sidebar: set the sidebar to either use 2 small or 1 big sidebar
• Sidebar Widgets: You can set unqiue widget areas for each page or category

As always you can get the theme at themeforest.

• Newscast light
• Newscast dark
• Newscast minimal
• Newscast modern

Key features of the template:

• Valid XHTM Strict1.0, tableless Design
• Multiple Page templates:
  • 3 different Index Pages: Accordion Slider, Crossfading Slider and News Slider
  • Single Post Entry
  • Static Page
  • Static Page Fullwidth
  • Basic Archive Page
  • Archive Page with small entries
  • Contact Page
• jQuery Support:
  • 3 different Portfolio/Item slider, supporting unlimited items
  • Dropdwon Menu, improved with jQuery
  • jQuery 100% unobtrusive wich degrades gracefully if javascript is turned off
  • Sleek Image preloader
  • Working ajax/php contact form
  • Working ajax/php news submission form
• PSD files included
• Extensive Documentation Included

Newscast is as always available for purchase at Themeforest for as low as 15 $

Display also has 3 Fantastic skins to choose from:
(The dark and minimal preview are only html previews, just to show you how it looks like. Of course there are fully functional WordPress skins included within this theme)

• display light
• display dark
• display minimal

The 3D image slider is editable without the use of flash. you can add and remove slides, change the order, change transitions with the help of a backend .

The Theme also comes with a more subtle fading image slider. You can use this slider as your main slider, otherwise it will be used as a fallback if the users browser doesnt support flash. Take a look at the second image slider here:

• display light – alternate slider

Key features of the template:

• Valid XHTM Strict1.0 and CSS 2.1, tableless Design
• Multiple Page templates:
  • Index Page with 3D Slider
  • Index Page with jQuery Slider
  • Static Page
  • Blog Overview Page
  • Blog/Portfolio Single Page
  • Portfolio Overview
  • Contact Page
  • Error pages, archives etc etc
• jQuery Support:
  • 2 different Portfolio/Item slider, supporting unlimited items
  • Dropdwon Menu, improved with jQuery
  • jQuery 100% unobtrusive wich degrades gracefully if javascript is turned off
  • Gallery Page with lightbox
  • Working ajax/php contact form
• Huge admin area to customize the theme from your WordPress backend. (take a look at the scrrenshots to see some of the options)
  • Menu Manager
  • Slideshow Manager
  • Additional Preview Picture section on write post/page panel
  • Different Widget Area for every Page
  • and many more… (8 option Pages for easy customization included)
• All PSD files I used are included for easier modification
• Extensive Documentation Included

External scripts and resources used:

• Social Bookmark Icons
• drf icon set
• Cu3er by Stefan Kovac
• lightbox plugin
• logo font: Museo

Display is now available (as always ) at Themeforest.net

DISPLAY is a HTML Template, best suited for Business and Portfolio sites. It comes with a fantastic 3D Image slideshow that is easily editable with a simple text file.

Display also has 3 Fantastic skins to choose from:

• display light
• display dark
• display minimal

The 3D image slider is editable without the use of flash. you can add and remove slides, add caption text just by using a simple text configuartion file.
It also comes with a more subtle fading image slider. You can use this slider as your main slider, otherwise it will be used as a fallback if the users browser doesnt support flash. Take a look at the second image slider here:

display light – alternate slider

Key features of the template:

• Valid XHTM Strict1.0 and CSS 2.1, tableless Design
• 10 Template files:
  • Index Page
  • Index Page – Fading Slider
  • Static Page
  • Static Page – Fullwidth
  • Blog Overview Page
  • Blog Single Page
  • Portfolio Overview
  • Portfolio Single Page
  • Contact Page
  • Archive Page
• jQuery Support:
  • 2 different Portfolio/Item slider, supporting unlimited items
  • Dropdwon Menu, improved with jQuery
  • jQuery 100% unobtrusive wich degrades gracefully if javascript is turned off
  • Gallery Page with lightbox
  • Working ajax/php contact form
• All PSD files I used are included for easier modification
• Documentation Included

As always, you can get the template for as low as 15$ at themeforest