WP Smith

Creating WordPress & Genesis Websites Since 2010

How to Add Menu Descriptions & Featured Images to WordPress Menu Items

Recently I read an awesome post by Bill Erickson about customizing WordPress menus. However, there are two things I wanted this class to do that in its original form it doesn't do.

So since out of the box, WordPress doesn't intuitively allow you to add descriptions to the menu without requiring some custom code, rather the Walker class extended.

Since Bill has done an excellent job at this I will extend his code to add the options of having a featured image and/or descriptions applied based on depth.

Add this to your functions.php file.

<?php
class Menu_With_Description 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 ) . '"' : '';
// 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 );
}
}
view raw Menu_With_Description.php hosted with ❤ by GitHub

 

All Menus

To highjack ALL of your menus, enter this code in your functions.php.

<?php
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;
}
view raw my_add_menu_descriptions.php hosted with ❤ by GitHub

Menus Based on Location

To highjack a menu based on registered and assigned location, then use this code in your functions.php.

<?php
add_filter( 'wp_nav_menu_args', 'my_add_menu_descriptions' );
function my_add_menu_descriptions( $args ) {
if ( $args['theme_location'] == 'primary' ) {
$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;
}
view raw my_add_menu_descriptions.php hosted with ❤ by GitHub

 

Menus via WordPress Custom Menu Widget

To highjack a custom menu based menu id that is called using the custom menu widget, or even a manual method (if the menu is being called by a location, you must use 'theme_location'), then use this code in your functions.php. This will highjack any menu called by the custom menu widget assuming you only have the standard registered theme locations. The example below assumes a standard theme custom menu registered locations for Genesis. Change 'primary' and/or 'secondary' to whatever your theme adds and add whatever more menus that your theme has to only target the custom menu widget.

<?php
add_filter( 'wp_nav_menu_args', 'my_add_menu_descriptions' );
function my_add_menu_descriptions( $args ) {
if ( $args['theme_location'] != 'primary' && $args['theme_location'] != 'secondary' ) {
$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;
}
view raw my_add_menu_descriptions.php hosted with ❤ by GitHub

There is a caveat though. There are certain menu items that may not have a featured image such as custom links, categories, etc. There is a possible work-around that I am trying to work out.

Here is the result of a sandbox description and featured images for all types (not just pages and posts), which I will be posting soon or writing up into a plugin...

Sandbox Genesis Menu with Descriptions and Featured Images

StudioPress Premium WordPress Themes     WP Engine Managed WordPress Hosting

What can I do for you!?

Custom Development

We develop plugins by determining both business/functional and technical requirements, following WordPress development best practices, and using agile methodology to ensure you get the best solution.

Consulting

Have questions? Need a reliable developer to consult? Please contact us today!

Customized Theme

We can customize your theme or child theme, or create a child theme for you based on your needs while enhancing the performance of every individual attribute.

Customized Plugin

We can customize your plugins, extend plugins (e.g., Gravity Forms, Jetpack, Soliloquy) based on your needs ensuring security, performance, and positive business impact.

Contact Us

About Travis Smith

As a WordPress enthusiast, developer, and speaker, Travis writes about what he learns in WordPress trying to help other WordPress travelers, beginners and enthusiasts with tutorials, explanations, & demonstrations.

Comments

  1. David Decker says

    Thank your for this code and tutorial! With that I finally got menu descriptions working in Genesis – and finally for primary and secondary menu! Absolutely awesome! All works correctly: linking, styling, thumbnail…!

    The only thing which was not working was a custom menu in the sidebar via core WP widget. Don’t know why but the other things matter more to me. So thanks again!

    Suggestion: would make for a perfect Genesis plugin – to have options like thumbnail size, css class, linking for image in the backend! But for developers your above solution is still a perfect way!

    Servus, Dave 🙂

    Reply

    • Travis Smith says

      Hello David,

      For this to be made into a plugin, there is still a lot of work that needs to be done. Since writing this post, I have redone how the featured images (post thumbnails) are done, which I still have one more step. Then I would have to develop an options page. What options would you like to see?

      Thanks,

      Reply

  2. Adam W. Warner says

    I read Bill’s tutorial and yours above. They are awesome, and thank you!

    However, I think there’s just one thing missing from each…an example of the end result. Do you have any examples you can point us to?

    Reply

    • Travis Smith says

      Hello Adam,

      Both Bill and myself are working these into sites that are currently in development. He included a screen shot of his, but I have not (lack permission due to NDA). I do it in a sandbox of the next version of this code. Better yet, someone else may send me an image with an example!

      Thanks,

      Reply

  3. Bruce Munson says

    Fantastic article and code!

    This is very useful, and I want to thank you for sharing it.

    +1 to the Genesis plugin idea. That would be quite popular I would think.

    Reply

  4. Mike says

    Awesome! , but there doesn’t appear to be any way to control the thumbnail size. Scratch my previous comment – I worked it out. Stupid mistake really – I didn’t notice thumbnail arg was nav_thumb, whereas I had used nav-thumb.

    Cheers.

    Reply

  5. mick says

    Hi Travis, thanks for this tutorial! I used it once and got it to work, but the client ended up choosing a different kind of menu after all.

    Reply

  6. Marc says

    How would I dynamically get the thumbnail alt and title tags? I want to use the title the menu link is pointing to and the excerpt as the alt tag. Or at the very least repeat the menu item title as the alt tag.

    Any thoughts?

    Reply

  7. shawn says

    Did this ever become a plugin?
    Most all of my menu items are custom links linking to custom post-types so there is no capability to add a featured image to each of the links.
    Hoping this project is still alive as it seems to be quite far along

    Reply

  9. Chris says

    Hi Travis, I’m struggling to get any of my featured page thumbnails to display.
    Currently all I get is a list of 18 elements with the inside each one. I currently have 18 pages by only one page selected in my custom menu…
    I’m using the menus on location code out of the 3 snippets you show at the end of your post. Reason being I want to exclude my current sidebar menu.
    here’s my code in pastebiin:     http://pastebin.com/t3MKnZLA and http://pastebin.com/S1e0GJjd
    Thanks in advance

    Reply

  11. Andrew says

    Great code. Thanks. Is there a way somehow to output “no thumbnail” if no thumbnail exists or to output a taxonomy category thumbnail if the menu item is linked to a taxonomy category?

    Reply

  13. flo says

    Thank you so much, it worked great!
    Just a beginner question : how can I put the link to the page on the thumbnail ?
    (if it is possible)

    Reply

  14. Flo says

    Hello!
    I used your code and thank you very much. I have a question I hope you can help me.
    I would like that, if there is a thumbnail defined for the article, only the thumbnail appears in the menu (and no title nor description.)
    is that possible and could you tell me how ? thank you so much!
    f

    Reply

  15. Matt says

    Fantastic post!

    I should note though, I was getting a “>” (close bracket) before each menu item. Not sure why but removing the LI tag did the trick and removed the rogue bracket (I ended up replacing the LI tag with an ARTICLE tag which worked out as I designed the initial HTML template as such. I added a closing ARTICLE tag of course). Anyone else run into this?

    Cheers!

    Reply

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.