Walkers… (Walker_Nav_Menu with post thumbnails)

I was just writing a WordPress plugin to display menus using post thumbnails and it took me forever to find how to do this. Hopefully I can save someone else all that trouble.

Here’s how to display WordPress post thumbnails in wp_nav_menu using a walker:

Here’s the single piece of the puzzle I was missing:

//This is the code to grab the post thumbnail of the element you are parsing with a walker
    wp_get_attachment_image_src( get_post_thumbnail_id((int)$item->object_id), 'thumbnail' )['0'];
//

Here it is in context of the walker:

class sbs_hex_menu_walker extends Walker_Nav_Menu {
    function start_el(&$output, $item, $depth, $args) {
        $output .= $indent . '
<div class="'.implode(" ", $item->classes).'" style="background-image:url(\''.wp_get_attachment_image_src( get_post_thumbnail_id((int)$item->object_id), 'thumbnail' )['0'].'\')">';
    }
    function end_el(&$output, $item, $depth) {
        $output .= "</div>

\n";
    }
}

And here is how you would call wp_nav_menu() using the custom walker:

 $defaults = array(
 'theme_location' => '',
 'menu' => $nav_menu,
 'container' => 'div',
 'container_class' => 'hexmap',
 'container_id' => '',
 'menu_class' => 'menu',
 'menu_id' => '',
 'echo' => true,
 'fallback_cb' => false,
 'before' => '',
 'after' => '',
 'link_before' => '<span>',
 'link_after' => '</span>',
 'items_wrap' => '%3$s',
 'depth' => -1,
 'walker' => new sbs_hex_menu_walker($hex_width),
 );

 wp_nav_menu( $defaults );

It allows you to achieve effects such as what I’m working on, a widget that displays a normal back-end WordPress menu as thumbnails. Here’s a screenshot: