Sunday, November 9, 2014

Adding Description to Menu Item

WordPress menu system has a built-in feature where you can add descriptions with menu items. However, this feature is hidden by default. Even when enabled, displaying them is not supported without adding some code. Most themes are not designed with menu-item descriptions in mind. In this article we will show you how to enable menu descriptions in WordPress and how to add menu descriptions in your WordPress themes.

Why you would like to add menu description: 

1. It will help with SEO.
2. To offer a better user experience.
3. It tell visitors what they will find if they clicked on a menu item.

There are 3 ways we can achieve Menu Descriptions. 

Step 1

1. Log in to your WordPress admin panel.
2. Go to Appearance > Menus.
3. At the top right corner you can see a tab called Screen Options. Click on it.
4.  Check the Description check box there like mentioned here:



Note: Some themes support this natively, so first try adding a description to your menu by selecting one of your menus and opening it, you should now see a description box. Add a description and save. Then go to your site and press control F5 to clear cache on your browser and see if the description appears.



If nothing Appears proceed to step 2

Step 2

Please go to your functions.php file by going to Appearance > Editor > functions.php

Paste this code in and save. 

class Menu_With_Description extends Walker_Nav_Menu {
    function start_el(&$output, $item, $depth, $args) {
        global $wp_query;

        $indent = ( $depth ) ? str_repeat( " ", $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        ) .'"' : '';

  // get user defined attributes for thumbnail images
  $attr_defaults = array( 'class' => 'nav_thumb' , 'alt' => esc_attr( $item->attr_title ) , 'title' => esc_attr( $item->attr_title ) );
  $attr = isset( $args->thumbnail_attr ) ? $args->thumbnail_attr : '';
  $attr = wp_parse_args( $attr , $attr_defaults );

        $item_output = $args->before;

  // thumbnail image output
  $item_output .= ( isset( $args->thumbnail_link ) && $args->thumbnail_link ) ? '<a' . $attributes . '>' : '';
  $item_output .= apply_filters( 'menu_item_thumbnail' , ( isset( $args->thumbnail ) && $args->thumbnail ) ? get_the_post_thumbnail( $item->object_id , ( isset( $args->thumbnail_size ) ) ? $args->thumbnail_size : 'thumbnail' , $attr ) : '' , $item , $args , $depth );  
  $item_output .= ( isset( $args->thumbnail_link ) && $args->thumbnail_link ) ? '</a>' : '';

  // menu link output
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;

  // menu description output based on depth
        $item_output .= ( $args->desc_depth >= $depth ) ? '<br /><span class="sub">' . $item->description . '</span>' : '';

  // close menu link anchor
        $item_output .= '</a>';
        $item_output .= $args->after;

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

add_filter( 'wp_nav_menu_args' , 'my_add_menu_descriptions' );
function my_add_menu_descriptions( $args ) {
 $args['walker'] = new Menu_With_Description;
 $args['desc_depth'] = 0;
 $args['thumbnail'] = true;
 $args['thumbnail_link'] = false;
 $args['thumbnail_size'] = 'nav_thumb';
 $args['thumbnail_attr'] = array( 'class' => 'nav_thumb my_thumb' , 'alt' => 'test' , 'title' => 'test' );

 return $args;
}
This script will rebuild your menu to include your description for themes that don’t naively support it.

 

Step 3

Some CSS to get you going, I can’t make a set piece of CSS because every blog will be different but this should get you started.
 

.sub {
    font-size: 10px;
}

Final step

Well that’s its really, you might need to do some styling.
Labels: ,