[Resolved] Can I add a custom field like an image to a menu item?

[Author]

Posts

[anatolyF]

Hi Nigel,
Not sure I can do it with toolset, but would like to do it, is:

Tell us what you are trying to do?
– Trying to add additional metadata to menu items, to build a custom "mega-menu"

Is there any documentation that you are following?
— nope

What is the link to your site?
— warego.net

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

I'm afraid, there is no built-in feature in Toolset plugins to create a mega menu, so this will require some code customization around WordPress' "Walker_Nav_Menu" class.
( ref: https://developer.wordpress.org/reference/classes/walker_nav_menu/ )

Here are some useful guides on the topic:
hidden link
https://code.tutsplus.com/tutorials/understanding-the-walker-class--wp-25401

For more personalized assistance around custom code, you can also consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar

[anatolyF]

Hi Waqar,
Thanks for pointing me to external sources, but your competitors are allowing it:
So here is an example of the competition 🙂
hidden link

So it's would be nice if the feature can be matched.

[Waqar]

Thanks for writing back.

That guide is simply using the "wp_nav_menu_objects" hook ( ref: https://developer.wordpress.org/reference/hooks/wp_nav_menu_objects/ ) to filter the navigation menu's output to include the icon's HTML.

You can achieve the same using the Toolset's Fields API:
https://toolset.com/documentation/customizing-sites-using-php/functions/

For example, you can:

1. Add a new post custom field group "Fields for navigation menu" and set it to show on all types of posts.

2. In that field group, you'll add a single line type custom field "Menu icon" (slug "menu-icon").
( screenshot: screenshot-1.png )

3. After that, you can open the edit screens of each of the posts and the pages used in the navigation menu and add the required icon's name in the newly added "Menu icon" custom field.
( screenshot: screenshot-2.png )

4. After that, you can use the code snippet from the same guide and update it to use Toolset's "types_render_field" function to get the icon name from the menu item's target page/post:

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

function my_wp_nav_menu_objects( $items, $args ) {
	
	// loop
	foreach( $items as &$item ) {
		
		// vars
		$icon = types_render_field( 'menu-icon', array( 'item' => $item->object_id ) );
		
		// append icon
		if( $icon ) {
			
			$item->title .= ' <i class="fa fa-'.$icon.'"></i>';
			
		}
		
	}
	
	// return
	return $items;
	
}

This will append the HTML for the Font Awesome icon, in the navigation menu items and they'll show if the theme or any plugin is loading the font from the Font Awesome.
( screenshot: screenshot-3.png )