[Support request] Customised menu with latest posts previews

[Kim]

Currently we are using Quad menu for our main menu. Mainly because it allows us to show the latest posts on (for example) the Blog menu item. To see this, go to https://spacewell.com/ on desktop, hover over “Resources” in the main menu and then any item below it. The richt side in the menu panel will show the three latest posts.

We’ve noticed that Quad menu creates a lot of DOM elements which has a negative effect on our page speed score.

So for our new website I am researching options to recreate the Latest Posts previews without needing Quad Menu.

I’m not a seasoned WordPress developer but I can do PHP and I’m already working in a child theme. I am assuming I’ll probably need to overwrite inc/structure/navigation.php.

I’m not asking for a detailed step by step explanation but just for some pointers/keywords on where to start. Or maybe even a reason why I should not try to custom build this functionality.

There is so much info available on WordPress menus and how to place and style them but I can’t seem to find any on how to overwrite/customise the menu itself.

Thanks!

[David]

Hi there,

so, the navigation.php template is what we use to output the themes nav elements.
But for this you need to modify the HTML and content of the WordPress menu.
And there are many hooks that can do that. Including the walker_nav_menu_start_el filter hook:

https://developer.wordpress.org/reference/hooks/walker_nav_menu_start_el/

For an example see one of my GISTs here:

https://gist.github.com/diggeddy/d536a711522f37fd54e6118a18d80f26

It will auto create a sub menu item with a custom hook inside, that you can use GP elements or PHP to hook in your own content.

Let me know if that helps

[Kim]

Wow thanks, this is really helpfull.

For other noobs reading this:

I managed to make this work by adding the script to a php file in the child theme’s inc folder and including it in functions.php like:

require_once dirname(__FILE__) . '/inc/gp-mega-menu.php';

And specifying a menu item class name on line 6

$class_string = 'class-name';

You won’t see it without CSS but it will ad a sub ul with classes “sub-menu custom-sub-menu” inside the specified menu item.

Good start but many steps to go like how to get the latest posts based on a specific menu item. I’ll figure it out. 😉

[David]

Awesome.

Let us know how you get on with the related posts, or if you need any input 🙂

[Author]

Posts