Add subtext to custom menu in WordPress, subtitles / subtext

This article was written by in May 31, 2015, & may not be posted on other sites!
Original source url for this article: Add subtext to custom menu in WordPress, subtitles / subtext

Add subtext to custom menu in WordPress, subtitles / subtext.
To add subtitles or subtext to a menu is a great way to enhance and clarify menu items, and make it easier for the user to understand the navigation and content of your website. This is how to add subtext to custom menu in WordPress.

 

Add subtext custom menu WordPress, subtitles

To add subtitles or subtext to a custom menu, or any other menu in WordPress admin, just follow these simple steps. This is how to add subtext to custom menu in WordPress.

  1. Login to your wordpress admin and go to Appearance > Menus.
  2. Click on the tab “screen options” in the top right corner.
    Add subtext to custom menu in WordPress, subtitles
  3. Select the option “Description” to show menu subtitles.
    Add subtext to custom menu in WordPress, subtitles / subtext
  4. When you try to create a new menu, custom menu or edit any menu the subtitles or subtext will now be an option for each menu item, something like this.
    Add subtext to custom menu in WordPress, subtitles / subtext

 

 

Working with a custom third or fourth menu where subtitles is not yet supported?

If you created a custom menu in your functions.php you need to change some code to be able to support and show subtext / subtitles. Follow these steps to get it done:

  1. Add your custom menu in functions.php as you normally would, something like this:
    //add custom menu
    register_nav_menus( array(
    'third-menu' => __( 'Third menu'),
    ) );
  2. Add a menu, links / navigation and subtext in WordPress admin as above. Select your custom position for the menu under appearance > menus > manage locations tab.
  3. Add this php code inside your functions.php
    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><br />';
    $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 );
    }
    }
  4. To print the menu, use this php code in any theme file or template:
    <?php //print the menu
    wp_nav_menu( array(
    'theme_location' => 'third-menu',
    'container' =>false,
    'menu_class' => 'custom-nav',
    'echo' => true,
    'before' => '',
    'after' => '',
    'link_before' => '',
    'link_after' => '',
    'depth' => 0,
    'walker' => new description_walker())
    );
    ?>
  5. Now you should be able to see your menu on your website. Add some CSS to style it how ever you want.

 

 

Spread the word

Facebooktwittergoogle_pluslinkedinmail

Leave a Reply

Your email address will not be published. Required fields are marked *