wp_nav_menu: output featured image of each page listing

Question

Context: I am building a portfolio index where I can sort the individual project links in my sidebar by priority of appearance. I've successfully done this using the wp_nav_menu(), where each project is represented by the text name, and then I can move each Page's priority of appearance. What I get is something like this:

Projects Menu List:

• Project A Page
• Project B Page
• Project C Page

Now, I'd like to extend this feature by outputting the featured image associated with every individual project page so that it looks something like this:

Project Menu List:

• Project A Page [+ Featured Image associated with Project A Page]
• Project B Page [+ Featured Image associated with Project B Page]
• Project C Page [+ Featured Image associated with Project C Page]

Is this possible with the wp_nav_menu() call? If so, any clues on how to extend it further? Thanks!

Answer 1

Honestly I have not used wp-nav-menu much other than just using it for a menu. I am thinking in your case it might be more semantic to create a custom-post-type for "Projects" and then list those (rather than using the wp-menu as a Project sorter) . You can use the plugin "Post Types Order" to order your custom posts the way you want (works the same as arranging the order of menus..with a drag and drop).

The advantage to using Custom Post Types is that there is a lot more flexibility to use them how you want. So, in short:

• Create a custom post type for "Projects"
• Install Post Types Order to order your Projects
• On the page (or sidebar) where you want to list your projects use the code below, add the following snippet.

---

$example = new WP_Query( 'post_type' => 'projects','showposts' => '20' );
// gives the title for each project
if ( $example->have_posts() ) : 
    while ( $example->have_posts() ) : 
    the_post(); 
    ?>
    <div class="project" >  
        <!-- thumbnail -->
        <span class="project-thumb">   
            <?php the_post_thumbnail(); ?>
        </span>
        <!-- end thumbnail -->
        <h4><?php the_title(); ?></h4><!--title -->
    </div><!--#project -->
    <?php 
    endwhile; 
endif;