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!


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() ) : 
    <div class="project" >  
        <!-- thumbnail -->
        <span class="project-thumb">   
            <?php the_post_thumbnail(); ?>
        <!-- end thumbnail -->
        <h4><?php the_title(); ?></h4><!--title -->
    </div><!--#project -->
|improve this answer|||||
  • ' <?php query_posts('post_type= Projects','showposts=20'); ?> <!--gives the title for each project --> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div class="project" > <!--thumbnail --> <span class="project-thumb"> <?php the_post_thumbnail(); ?> </span> <!--#project=thumb --> <h4>-<?php the_title(); ?></h4><!--title --> </div><!--#project --> <?php endwhile; endif; ?>' – endle.winters Oct 18 '11 at 4:11
  • You have those {} brackets above the editor to format code and backticks to format code in comments or chat. If you click "help" on the right side of a comment, you'll see the formatting help windo slide down and a "Learn more..." Link at the end of the yellow box. – kaiser Oct 18 '11 at 17:25
  • Yes, I know about the brackets. They are on there now surrounding my code, but for some reason on this post only the code is not showing. – endle.winters Oct 18 '11 at 18:54
  • Adam: Thanks, this method looks better than the Menu Pages method! I'll look into it, thanks! – Marc P Oct 18 '11 at 21:06
  • @adam.robertson Some notes: The formatting problem started with the list (use * instead of -). Also, you need to add the values for the args array as seen above. You mixed query style input with array input. If you write 'post_type= Projects', then array would that see as the input value and not the according key. As it's an associative array, it wouldn't go anywhere. – kaiser Oct 18 '11 at 22:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.