Use optional menu fields in a template?

[Rips (Phil Rips)]

Hi there, is it possible to get optional menu field parameters, such as menu_class?

I tried {Field menu_class} inside a menu loop, but it did not seem to work.

This would be useful to get a class and display a menu icon.

wp_nav_menu() | Function | WordPress Developer Resources

Thanks.

[Rips (Phil Rips)]

I have solved this with ACF by adding a new field at the menu item level. This works fine but it might be good to support the WP optional menu fields in future.

[Beardmancer (Ian Tompkins)]

I think there’s a way to accomplish what you originally wanted, if I’m understanding it correctly. I am using something like this on a few sites:

<Loop type=menu menu="Menu Name">
  <If list="{Field classes}" any_is_not value="">
    <Set local=menu_item_classes> <Format list join=" "><Field classes /></Format></Set>
  <Else />
    <Set local=menu_item_classes></Set>
  </If>
  <li class="menu-item{Get local=menu_item_classes}">
    <a href="{Field url}" target="{Field target}" rel="noopener"><Field title /></a>
  </li>
</Loop>

What this is doing:

1. Create a menu loop that loops through items in the standard Wordpress menu called Menu Name
2. Check to see if the current loop item contains anything in the classes field
3. If classes is populated, a local variable is set containing a space at the beginning followed by the contents of classes (the space is important later when the classes are listed in the markup)
4. If classes is empty, it sets the local variable with nothing inside
5. Display a list item with the contents of classes concatenated to the end of whatever other classes your setting in your template (just menu-item in this case)

Note that this may only work on standard Wordpress menus that are created in WP Admin > Appearance > Menus. I think I arrived at this solution through some combination of the documentation and different posts here in the forum, but I can’t retrace my steps at the moment.

[Beardmancer (Ian Tompkins)]

In case it’s helpful, I found the forum post that I originally referred to in my previous comment:

Menu Loop - Menu Item CSS classes

Hey, I’m trying to output the classes of a menu item in a menu loop, but couldn’t find anything about it in the documentation. I tested it with {Field class} and {Field classes}. {Field class} does nothing at all, but {Field classes} seems to retrieve the classes correctly, however they are output with quotes and commas, e.g. [“menu-item–cta”] You could get around the formatting problem by outputting the values as a list loop and saving it as a variable. So something like this: <ul> <Loop ty…

Note that <Format> has some additional importance I didn’t mention in my last post—it cleans up the contents of classes to remove quotes.

Also, here is the documentation for the Menu Loop, which I imagine you’ve already read a few times:
https://docs.loopsandlogic.com/docs/learning-guides/dynamic-tags/loop/menu/

The documentation doesn’t mention classes at all, so it could definitely benefit from being updated.

[Rips (Phil Rips)]

Thanks for that, looks like you found a hack of sorts, I was trying menu_class as per the WP docs.

However, it’s a lot easier to use ACF until the menu class field is officially supported by L&L because I don’t need to use the format tag or anything.

[Beardmancer (Ian Tompkins)]

Ah, I see. I think we are actually addressing two different things. The code I shared earlier will include classes for each menu item (each <li>, for example), whereas I think menu_class is for the class applied to the whole menu (the <ul> element).

Using classes will include anything listed in the red box in this screenshot (“my-class” in this example). Out of curiosity, where is the menu_class supposed to be set? I don’t see an option for it anywhere in my menu settings page.

I agree, it would be great for L&L to support all of the official arguments at some point. I can imagine cases where including the parent class this way would be very useful.

[ghen]

hey @Rips and @Beardmancer

Thank you so much for these feedbacks. I have added your requests on this link and you can do the same if you have other feature request that we can work on.