WP SITES

2754

Original WordPress Tutorials & 6000+ Guaranteed Code

Snippets

2 Ways To Add a Description Below Each Nav Menu Item

The code in this tutorial enables you to add a description which is displayed under each nav menu item.

menu-description

Go to Appearance > Menus and select the menu you want to add descriptions to.

On the top right hand corner you’ll find screen options which you need to open.

Menu Screen Options

Check the Descriptions box then open each menu item where you can add some text.

Add Menu Description

Here’s the PHP & CSS for logged in members which are both needed to make both these solutions work:

Register for full access

Reader Interactions

Comments

  1. Hi Brad, I have used this method to add menu descriptions to my site https://wpskolen.no. After upgrading to Genesis 2.2 the descriptions suddenly appear abowe the menu items, instead of below. I thought I might solve the problem temporarily by downgrading Genesis to the previous version, but it didn’t change anything. I guess something is changed in the database, but I have no idea where to look.

    Here’s a screenshot: https://www.dropbox.com/s/vfqy31ip6bpmupz/Skjermbilde%202015-09-09%2002.34.58.jpg?dl=0

    Any idea what caused this?
    BR,
    Kristin Skj.

      • I used this one: 

        function add_description_nav_menu( $item_output, $item ) {
 $description = $item->post_content;
 if (' ' !== $description ) 
 return preg_replace( '/(<a>[^&lt;]*?)&lt;/&#039;, &#039;$1&#039; . &#039;' . $description . 'theme_location &amp;&amp; $item-&gt;description ) {
        $item_output = str_replace( $args-&gt;link_after . '</a>', '' . $item-&gt;description . '' . $args-&gt;link_after . '</a>', $item_output );
    }

    return $item_output;
}

          • I found a solution in the Dynamik forum, this code works:

            add_filter( 'walker_nav_menu_start_el', 'add_description_nav_menu', 10, 4 );
function add_description_nav_menu( $item_output, $item, $depth, $args ) {
    if ( '' == $args-&gt;theme_location &amp;&amp; $item-&gt;description ) {
        $item_output = str_replace( $args-&gt;link_after . '</a>', '' . $item-&gt;description . '' . $args-&gt;link_after . '</a>', $item_output );
    }

            return $item_output;
            }

Leave a Reply