Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I've got a simple static list marked up like this that I'd like to turn in to a WordPress Menu:

<ul>
    <li><a href="#"><img src="http://placekitten.com/200/300"></a></li>
    <li><a href="#"><img src="http://placekitten.com/200/300"></a></li>
    <li><a href="#"><img src="http://placekitten.com/200/300"></a></li>
    <li><a href="#"><img src="http://placekitten.com/200/300"></a></li>
</ul>

I'd like each list item to link to a specific post, and pull in the Featured Image rather than the title. If I setup a default WordPress Menu it would output like this:

<ul>
    <li><a href="post-1/">Blog Post 1</a></li>
    <li><a href="post-2/">Blog Post 2</a></li>
    <li><a href="post-3/">Blog Post 3</a></li>
    <li><a href="post-4/">Blog Post 4</a></li>
</ul>

How would I instead output it like this:

<ul>
    <li><a href="post-1/"><img src="post-1-featured-img.png"></a></li>
    <li><a href="post-2/"><img src="post-2-featured-img.png"></a></li>
    <li><a href="post-3/"><img src="post-3-featured-img.png"></a></li>
    <li><a href="post-4/"><img src="post-4-featured-img.png"></a></li>
</ul>

So essentially I'd just like to return the Featured Image of each post I specify in a WordPress Custom Menu rather than the post title.

share|improve this question
add comment

1 Answer 1

You can do that by filtering the menu objects using wp_nav_menu_objects filter.

The following example will replace all titles of the menu items pointing to posts or pages with an <img> tag of the post or page thumbnail if available. It will target a menu with a name of Posts Menu called in theme using wp_nav_menu(array('menu'=>'Posts Menu')):

add_filter('wp_nav_menu_objects', 'ad_filter_menu', 10, 2);

function ad_filter_menu($sorted_menu_objects, $args) {

    // check for the right menu to filter
    // here we check for the menu with name 'Posts Menu'
    // given that you call it in you theme with:
    //   wp_nav_menu( array( 'menu' => 'Posts Menu' ) );
    // if you call the menu using theme_location, eg:
    //   wp_nav_menu( array( 'theme_location' => 'top_manu' ) );
    // check for:
    //   if ($args->theme_location != 'top_menu')
    if ($args->menu != 'Posts Menu')
        return $sorted_menu_objects;

    // edit the menu objects
    foreach ($sorted_menu_objects as $menu_object) {
        // searching for menu items linking to posts or pages
        // can add as many post types to the array
        if ( in_array($menu_object->object, array('post', 'page', 'any_post_type')) ) {
            // set the title to the post_thumbnail if available
            // thumbnail size is the second parameter of get_the_post_thumbnail()
            $menu_object->title = has_post_thumbnail($menu_object->object_id) ? get_the_post_thumbnail($menu_object->object_id, 'thumbnail') : $menu_object->title;
        }
    }

    return $sorted_menu_objects;
}
share|improve this answer
add comment

protected by Community Jun 19 at 14:31

Thank you for your interest in this question. Because it has attracted low-quality answers, posting an answer now requires 10 reputation on this site.

Would you like to answer one of these unanswered questions instead?

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