0

I am building a menu for a client that grabs custom field data from the top level menu item's pages and adds data-color to that menu item. I have that part working no problem.

The issue I'm having is applying that data-color from the top level item to the child menu items. Since the child menu items aren't necessarily child posts/pages of the top level pages I can't use $item->post_parent.

I'm a little stuck at this point on my next move. Here's the code block so far.

function data_attribs_menu( $atts, $item, $args ) { // check if ACF exists if( class_exists('acf') ) { $page_section = get_field( 'page_section', $item->object_id ); $parent_page_section = get_field( 'page_section', $item->post_parent ); if( $args->theme_location == 'header-menu' ) { if( $item->menu_item_parent == 0 ) { $atts['data-color'] = $page_section; } else { $atts['data-color'] = $parent_page_section; } } } return $atts; } add_filter('nav_menu_link_attributes', 'data_attribs_menu', 10, 3);

Is there a way to grab the parent's object_id for submenu items?

Here's a video of how the menu is currently interacting. Current Menu Interaction without Sub Menus Working

Improve this question
3
  • Does it have to use data-color? It might be easier to use WP's built-in classes and build a small JS to the effect of, "if .menu-item-has-children:nth-child(1) or its children are in focus or hovered on, add .blue class to the whole menu" then use the .blue class to apply a partly transparent CSS background color on top of the image. Commented Feb 27, 2018 at 16:10
  • in post_parent you have the parent of the post selected for this menu item. but you have also menu_item_parent which is the identifier of the menu item parent of the current menu item. if the color is associated to the parent post, you need something like $parentItem = get_post($post->menu_item_parent); $parent_page_section = get_field( 'page_section', $parentItem->object_id); Commented Feb 27, 2018 at 20:18
  • @mmm the menu_item_parent part is just testing if they are top level items in the menu. I still need to grab some info from the top level pages though which is where I'm getting hung up. Commented Feb 27, 2018 at 20:31

1 Answer 1

Reset to default
0

I made 2 mistakes in my comment.
try rather this code 

function data_attribs_menu( $atts, $item, $args ) { // check if ACF exists if( class_exists('acf') ) { $page_section = get_field( 'page_section', $item->object_id ); if( $args->theme_location == 'header-menu' ) { if( $item->menu_item_parent == 0 ) { $atts['data-color'] = $page_section; } else { $parentItem = get_post($item->menu_item_parent); $parent_page_section = get_field( 'page_section', $parentItem->_menu_item_object_id); $atts['data-color'] = $parent_page_section; } } } return $atts; } add_filter('nav_menu_link_attributes', 'data_attribs_menu', 10, 3);

this code only works when there is 2 levels of menu and according the example in the question, it's what you need.

Improve this answer
2
  • Thanks @mmm that works great. Unfortunately I have 3 levels of hierarchy so I'll have to try and modify it for that. If there's a way add data-color to the top level li that may be the most robust down the road in case the hierarchy changes. Is that even possible? I know how to add classes to the ul and a but it seems a little more obscure on how to add to the li. Commented Feb 28, 2018 at 16:01
  • I ended up using a Walker on my menu (based off this Stack Exchange post) to add a data attribute to the parent li. @WebElaine got me thinking along this track originally so thank you both for the help. Commented Mar 1, 2018 at 20:43

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.