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

  • 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. – WebElaine Feb 27 '18 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); – mmm Feb 27 '18 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. – tylorreimer Feb 27 '18 at 20:31
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.

  • 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. – tylorreimer Feb 28 '18 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. – tylorreimer Mar 1 '18 at 20:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.