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.

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.

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

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

Comments

kristinskj says

September 8, 2015 at 5:37 pm

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.

Reply
- Brad Dalton says
  
  September 10, 2015 at 10:34 pm
  
  Hi Kristin
  
  Which code snippet did you use exactly?
  
  Reply
  - kristinskj says
    
    September 11, 2015 at 5:20 am
    I used this one:
    
    function add_description_nav_menu( $item_output, $item ) { $description = $item->post_content; if (' ' !== $description ) return preg_replace( '/(<a>[^<]*?)</', '$1' . '' . $description . 'theme_location && $item->description ) { $item_output = str_replace( $args->link_after . '</a>', '' . $item->description . '' . $args->link_after . '</a>', $item_output ); } return $item_output; }
    Reply
    - Brad Dalton says
      
      September 14, 2015 at 9:58 am
      
      Sorry for the delay. Still trying to work out a solution for this.
      
      Reply
      - kristinskj says
        
        September 14, 2015 at 10:38 am
        
        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->theme_location && $item->description ) { $item_output = str_replace( $args->link_after . '</a>', '' . $item->description . '' . $args->link_after . '</a>', $item_output ); }
        
        return $item_output;
        }
      - Brad Dalton says
        
        September 14, 2015 at 10:41 am
        
        Awesome. I owe you one!

Reader Interactions

Comments

Leave a Reply Cancel reply