BlogThemes

How to Add Menu Descriptions in Your WordPress Themes

WordPress menu system has a built-in function the place you possibly can add descriptions with menu gadgets. Nevertheless, this function is hidden by default. Even when enabled, displaying them isn’t supported with out including some code. Most themes are usually not designed with menu-item descriptions in thoughts. On this article we are going to present you learn how to allow menu descriptions in WordPress and learn how to add menu descriptions in your WordPress themes.

How to add menu descriptions in WordPress themes

Notice: This tutorial requires you to have truthful understanding of HTML, CSS, and WordPress theme growth.

When and Why You Would Need to Add Menu Descriptions?

Some customers assume assume that including menu description will assist with the search engine marketing. Nevertheless, we expect that the primary purpose why you’d need to use them is to supply a greater person expertise in your web site.

Descriptions can be utilized to inform guests what they may discover in the event that they clicked on a menu merchandise. An intriguing description will entice extra customers to click on on menus.

Menu Descriptions

Step 1: Activate Menu Descriptions

Go to Look » Menus. Click on on Display Choices button at prime proper nook of the web page. Test the Descriptions field.

Enabling menu descriptions in WordPress

This can allow descriptions discipline in your menu gadgets. Like this:

Description field added to menu items

Now you possibly can add menu descriptions to gadgets in your WordPress menu. Nevertheless, these descriptions is not going to but seem in your themes. To show menu descriptions we should add some code.

Step 2: Add the walker class:

Walker class extends the present class in WordPress. It principally simply provides a line of code to show menu merchandise descriptions. Add this code in your theme’s features.php file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
class Menu_With_Description extends Walker_Nav_Menu {
    operate start_el(&$output, $merchandise, $depth, $args) {
        world $wp_query;
        $indent = ( $depth ) ? str_repeat( "t", $depth ) : '';
        
        $class_names = $worth = '';
        $lessons = empty( $merchandise->lessons ) ? array() : (array) $merchandise->lessons;
        $class_names = be a part of( ' ', apply_filters( 'nav_menu_css_class', array_filter( $lessons ), $merchandise ) );
        $class_names = ' class="' . esc_attr( $class_names ) . '"';
        $output .= $indent . '<li id="menu-item-'. $merchandise->ID . '"' . $worth . $class_names .'>';
        $attributes = ! empty( $merchandise->attr_title ) ? ' title="' . esc_attr( $merchandise->attr_title ) .'"' : '';
        $attributes .= ! empty( $merchandise->goal ) ? ' goal="' . esc_attr( $merchandise->goal ) .'"' : '';
        $attributes .= ! empty( $merchandise->xfn ) ? ' rel="' . esc_attr( $merchandise->xfn ) .'"' : '';
        $attributes .= ! empty( $merchandise->url ) ? ' href="' . esc_attr( $merchandise->url ) .'"' : '';
        $item_output = $args->earlier than;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $merchandise->title, $merchandise->ID ) . $args->link_after;
        $item_output .= '<br /><span class="sub">' . $merchandise->description . '</span>';
        $item_output .= '</a>';
        $item_output .= $args->after;
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $merchandise, $depth, $args );
    }
}

Step 3. Allow Walker in wp_nav_menu

WordPress themes use wp_nav_menu() operate to show menus. Now we have additionally revealed a tutorial for newcomers about learn how to add customized navigation menus in WordPress Themes. Most WordPress themes add menus in header.php template. Nevertheless, it’s potential that your theme might have used another template file to show menus.

What we have to do now’s discover wp_nav_menu() operate in your theme (probably in header.php) and alter it like this.

1
2
3
<?php $walker = new Menu_With_Description; ?>
<?php wp_nav_menu( array( 'theme_location' => 'main', 'menu_class' => 'nav-menu', 'walker' => $walker ) ); ?>

Within the first line we set $walker to make use of walker class we outlined earlier in features.php. Within the second line of code, the one further argument we have to add to our present wp_nav_menu arguments is 'walker' => $walker.

Step 4. Styling the Descriptions

The walker class we added earlier shows merchandise descriptions at this line of code:

1
$item_output .= '<br /><span class="sub">' . $merchandise->description . '</span>';

The above code provides a line break to the menu merchandise by including a 
tag after which wraps your descriptions in a span with class sub. Like this:

1
<li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.instance.com/about/">About<br /><span class="sub">Who're we?</span></a></li>

To vary how your descriptions seem in your web site, you possibly can add CSS in your theme’s stylesheet. We have been testing this on Twenty Twelve and used this css.

1
2
3
4
5
6
7
8
.menu-item {
border-left: 1px strong #ccc;
}
span.sub {
font-style:italic;
font-size:small;
}

We hope that you’ll find this text helpful and it’ll make it easier to create cool wanting menus with menu descriptions in your theme. Questions? Go away them in feedback under.

Extra Sources

The way to Type WordPress Navigation Menus

The way to Add Customized Gadgets to Particular WordPress Menus

Invoice Erickson’s Menus with Description Class

Download The WPSaviour App Now

Related posts
Tips

Simplify Your Online Presence With WordPress: Themes, Plugins, Products and Services

Tips

Buying WordPress Themes The Smart Way

Tips

WordPress Theme Panel Options Frameworks

Tips

WordPress Child Theme Complete Guide

Leave a Reply

Your email address will not be published.

Pay in your preferred currency
Indian rupee
Euro