Add parent menu item in sub-menu in custom nav_walker
Currently I'm working on a project where we need to append the parent title as first item in the submenu for a mobile menu.
What I try to achieve is this:
ul class="menu"
li
a href="linktomenu"Level 0 item/a
ul class="submenu"
lia href="linktoparent"Show All Level 0 item /a/li
lia href="#0"Back to parent/a/li
lia href="linktomenu"Level 1 item/a/li
lia href="linktomenu"Level 1 item/a/li
/ul
/li
/ul
This is the code I currently have
?php
class mobilenav_walker_nav_menu extends Walker_Nav_Menu {
private $color_idx = 0;
// add classes to ul sub-menus
function start_lvl( $output, $depth = 0, $args = Array()) {
// depth dependent classes
$indent = ( $depth 0 ? str_repeat( "\t", $depth ) : '' ); // code indent
$display_depth = ( $depth + 1); // because it counts the first submenu as 0
$classes = array(
'sidebar-menu',
( $display_depth % 2 ? 'menu-odd' : 'menu-even' ),
( $display_depth =2 ? 'sub-sub-menu' : '' ),
'level-' . $display_depth
);
$class_names = implode( ' ', $classes );
$back_btn = '';
if($display_depth 0){
$parent_label = 'li class="go-back"a href="#0"span class="parent_label"/spani class="fa fa-close"/i/a/li';
$back_btn = 'li class="see-all"a class="hit-area" href="#"Back/ai class="fa fa-chevron-left"/i/li';
}
// build html
$incri = $this-color_idx-1;
$output .= "\n" . $indent . 'ul class="menu__level" data-menu="submenu-'.$incri.'"' .$parent_label.$back_btn. "\n";
}
// add main/sub classes to li's and links
function start_el( $output, $item, $depth = 0, $args = Array(), $id = 0 ) {
global $wp_query;
$indent = ( $depth 0 ? str_repeat( "\t", $depth ) : '' ); // code indent
// depth dependent classes
$depth_classes = array(
'sidebar-item',
( $depth == 0 ? 'li0' : '' ),
( $depth == 1 ? 'li1' : '' ),
( $depth == 2 ? 'li2' : '' ),
( $depth == 3 ? 'li3' : '' ),
( $depth % 2 ? 'menu-item-odd' : 'menu-item-even' ),
'menu-item-depth-' . $depth
);
if(in_array('menu-item-has-children',$item-classes)){
$has_children = 'data-has-children="1"';
$has_children_var = 1;
$depth_classes[] = 'has-children';
} else{
$has_children_var = 0;
$depth_classes[] = 'no-children';
}
$li_attributes = 'data-level="'.$depth.'" data-title="'.apply_filters( 'the_title', $item-title, $item-ID ).'" '.$has_children;
$depth_class_names = esc_attr( implode( ' ', $depth_classes ) );
// passed classes
$classes = empty( $item-classes ) ? array() : (array) $item-classes;
$class_names = esc_attr( implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ) );
// build html
$output .= $indent . 'li class="menu__item"'.$li_attributes.'';
// link attributes
$attributes = ! empty( $item-attr_title ) ? ' title="' . esc_attr( $item-attr_title ) .'"' : '';
$attributes .= ! empty( $item-target ) ? ' target="' . esc_attr( $item-target ) .'"' : '';
$attributes .= ! empty( $item-xfn ) ? ' rel="' . esc_attr( $item-xfn ) .'"' : '';
if($has_children_var == 1){
$attributes .= ' data-submenu="submenu-'.$this-color_idx.'"';
}
$attributes .= ' class="menu__link"';
$item_output = sprintf( '%1$sa%2$s%3$s%4$s%5$s/a%6$s',
$args-before,
$attributes,
$args-link_before,
apply_filters( 'the_title', $item-title, $item-ID ),
($has_children_var == 1 ? $args-link_after : ''),
$args-after
);
// build html
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
if($has_children_var == 1){
$this-color_idx++;
}
}
}
This is the current output I have
ul id="menu-hoofdnavigatie" class="sidebar-menu level-0"
li class="menu__item" data-level="0" data-title="Menu Item Level 0" data-has-children="1"a data-submenu="submenu-0" class="menu__link"Menu Item Level 0/a
ul class="menu__level" data-menu="submenu-0"
li class="go-back"a href="#0"span class="parent_label"/spani class="fa fa-close"/i/a/li
li class="see-all"a class="hit-area" href="#"Back/ai class="fa fa-chevron-left"/i/li
li class="menu__item" data-level="1" data-title="Menu Item 1 Level 1"a class="menu__link"Menu Item 1 Level 1/a/li
li class="menu__item" data-level="1" data-title="Menu Item 2 Level 1"a class="menu__link"Menu Item 2 Level 1/a/li
li class="menu__item" data-level="1" data-title="Menu Item 3 Level 1"a class="menu__link"Menu Item 3 Level 1/a/li
li class="menu__item" data-level="1" data-title="Menu Item 4 Level 1"a class="menu__link"Menu Item 4 Level 1/a/li
li class="menu__item" data-level="1" data-title="Menu Item 5 Level 1"a class="menu__link"Menu Item 5 Level 1/a/li
/ul
/li
/ul
I'm quite new to the wordpress navwalker, can you help me on this one? I've searched the entire internet, but could not find a solution for my problem so far.