Menu Item custom radio button field show results based on value

• greenarrow

• July 29, 2021 at 8:31 am

I have a custom field (radio button) for all menu items for a menu just as follows.

this field is mainly there to users to define a whether a menu item is a mega menu or not. my issue is, that i want to add a CSS class to menu items UL tag if this radio field is set to “Yes”

to add the css class im using jquery on my wordpress themes footer (footer.php) file just like this based on the “Yes” condition. (Check the below screenshot)

but the above code is not working, can someone here kindly guide me to achieve what i want.

Thanks.

• John Huebner

• August 4, 2021 at 4:21 pm

You first need to build a filter for the menu items

https://www.advancedcustomfields.com/resources/adding-fields-menu-items/

• greenarrow

• August 4, 2021 at 4:30 pm

@hube2 i checked it but i have no idea how i can use radio button field inside such filter, can you please show an example.

• John Huebner

• August 4, 2021 at 4:50 pm

I recently did something similar, but then scrapped it so I’m going by memory here. But you can add classes to the menu items in the filter. At this point I can’t give you exact details. I do remember that one of the properties of each menu item is a list of classes to be applied to that item.

I would start by seeing what is there to be used.

add_filter('wp_nav_menu_objects', 'my_wp_nav_menu_objects', 10, 2);
function my_wp_nav_menu_objects($items, $args) {
  echo '<pre>'; print_r($items); echo '</pre>';
  return $items;
}

This may lead you to your answer. If not post what this outputs and I will see if I can help you with it.

• greenarrow

• August 4, 2021 at 4:54 pm

@hube2 thanks let me try this and get back