[Support request] Thumbnails images in Secondary Navigation Menu

[Agnieszka]

Hello, I would like to know if I could display thumbnail images (maybe 8 in a row) in the secondary navigation menu, and after clicking on the image it will take me to an assigned blog post. It seems it is doable but I can’t figure out how.
TIA

[David]

Hi there,

in the Menu builder the Navigation Label will accept HTML so you could simply add an <img src="full_url_to_image/image.jpg" width=50 height=50" /> tag instead of a title.

[Agnieszka]

David, thank you for your advice. I have tried that and when I click on the image it takes me nowhere. It shows page not found. And its a lot of work. I would like the second navigation to be like an archive. Is there any way to make the menu use widgets? It would be so much easier and faster to change the images.
Thank you!

[Leo]

David’s solution is definitely the easiest.

I don’t see the secondary navigation in your site.

Can you add it in so we can see why it isn’t working?

Let me know 🙂

[Agnieszka]

Leo, I am not very techie so I am sorry David, you might be right. For me it’s easy to use widgets. You can’t see the secondary navigation because it is hidden since I didn’t put anything in it.
Going back to the code David wrote, do I use the post’s feature image? or I create thumbnail, downloading it to my library, and using it?
TIA

[David]

Would this Menu display the most recent posts ? A bit like the Recent Posts widget ?

[Agnieszka]

David, yes but I want to control what posts go there.

[Agnieszka]

if you look at my blog, right now I have the older posts displayed on my right sidebar. I think it looks too busy and it would look better if I had them displayed in the secondary menu.

[David]

Try adding this PHP Snippet to your site:

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

function db_secondary_thumbnail_menu($sorted_menu_objects, $args) {
	
	// Check for secondary menu
	if ($args->theme_location != 'secondary')
        return $sorted_menu_objects;

    // edit the menu objects
    foreach ($sorted_menu_objects as $menu_object) {
        // check menui for posts and pages
        if ( in_array($menu_object->object, array('post', 'page' )) && has_post_thumbnail($menu_object->object_id) ) {
            // get title and post thumbnail
            $menu_object->title = sprintf(
                '<span class="menu-title">%1$s</span>%2$s',
                $menu_object->title,
                get_the_post_thumbnail($menu_object->object_id, 'thumbnail')
            );
        }
    }

    return $sorted_menu_objects;
}

Then add this CSS:

.secondary-navigation .main-nav ul li a {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

.secondary-navigation .main-nav ul li a img {
    height: 30px;
    width: auto;
    ;
    margin-right: 10px;
}

Then simply add Posts to your Secondary menu and it should display their thumbnails with them.

[Doug triplett]

David,

I am the tech implementing this. I put the php in the header but it is displaying not running. I have tried both with the run box checked and unchecked in hooks.

I have the menu with sections linking to the posts but the images are not pulling.

Plus the HTML snippet is creating a broken image icon

The css is added in the proper place.

This is all happening on agnescreates.com

[David]

Hi there,

that code must be added using one of the methods provided here:

https://docs.generatepress.com/article/adding-php/

[Author]

Posts