Can we change wordpress custom walker class first (root) ul tag using PHP by overriding The Walker_Nav_menu

Question

Hey guys using the Wordpress Framework usually I create a custom walker that extends Walker_Nav_menu in order to make a custom wordpress menu. I did register the Menu location in the functions.php , I did hook up the menu and create a custom_nav_walker and it worked. however I cannot change the main ul root tag to put some inline code up there using the navwalker php class without using javascript.

So the nav menu html is something like this.

<ul id="Root-tag-That-I-want-to-modify" class="vertical medium-horizontal menu dropdown" <!--  I WANT TO ECHO CODE HERE USING PHP --> >
<li id="menu-item-146" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home active menu-item-146">
<a href="http://Thelink">Item</a></li>
<li id="menu-item-147" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children active has-dropdown menu-item-147"><a href="http://ThesecondLink">submeu</a>
<ul class="0 menu submenu is-dropdown-submenu first-sub vertical"  data-submenu="" role="menu">
<li id="menu-item-153" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home active menu-item-153"><a href="http://anotherlink">submeu item</a> 
</li></ul></li></ul>

I tried to override the start_lvl funtion that is inside the Walker class :

    function start_lvl( &$output, $depth = 0, $args = array() ) {
      $indent = str_repeat( "\t", $depth );
      $first = ($depth === 0) ? 'first-sub' : '';
      $output .= "\n$indent<ul class=\"$depth menu submenu is-dropdown-submenu $first vertical\"  data-submenu=\"\" role=\"menu\">\n";
     }

After printing $depth inside the ul tag I found out that this first UL is not processed by this start_lvl

Where in this class can I override the main UL tag, I checked the wordpress call wp_nav_menu array maybe I missed something ?? I am interested in doing this with PHP without Javascript.

Aness Aness · Accepted Answer · 2020-02-15T07:12:16

One solution that I found is to change the 'menu_class' parameter when instantiating the walker class , Usually you have :

wp_nav_menu( array(
        'menu_class'      => 'vertical medium-horizontal menu dropdown',
        'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
        'depth'           => 0,
        'walker'          => new Custom_Walker_Class()  ));

To include some extra line-codes example (data-responsive-menu="accordion medium-dropdown" role="menubar') I changed it to :

wp_nav_menu( array(
        'menu_class'      => 'vertical medium-horizontal menu dropdown" data-responsive-menu="accordion medium-dropdown" role="menubar',
        'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
        'depth'           => 0,
        'walker'          => new Custom_Walker_Class()  ));

Basically it is shipping all the ul tag inline code inside this parameters string. Since it is getting a string (which is supposed to be just the ul tag classes) and wrapping it in quotes to print it as a wrapper for nav elements in the Html.

Ok So far the idea is good but I couldn't escape the quotes and I ended with some source code like this :

class=&quot ;vertical medium-horizontal menu dropdown&quot ; data-responsive-menu=&quot ; accordion medium-dropdown" role=&quot ; menubar&quot ;

What I did to correct things is to :

I stored the wp_nav_menu result into some variable
I encoded that variable into a string (the &quot ; will become ")

I decoded and printed the resulting HTML

$db = esc_attr('" ');
$inlinecode= esc_attr('vertical medium-horizontal menu dropdown' . $db . ' data-responsive-menu=' . $db . ' accordion medium-dropdown' . $db . ' role=' . $db . ' menubar' . $db . ');


$mainmenu = wp_nav_menu( array(

    'menu_class'      => $inlinecode,
    'echo'            => false,
    'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
    'depth'           => 0,
        'walker'          => new Walker_Primary()
        ));

        $men_encoded = esc_attr($mainmenu);
        echo html_entity_decode($men_encoded);

Can we change wordpress custom walker class first (root) ul tag using PHP by overriding The Walker_Nav_menu

1 Answers