1

I am trying to change the markup of my main menu. Currently I've got the following code when my menu is generated :

<ul id="menu-menu" class="menu vertical medium-horizontal">
    <li><a href="http://example.com">Home</a></li>
    <li><a href="http://example.com/custompage">Page</a></li>
    <li><a href="http://example.com/custompage2">Page2</a></li>
    <li><a href="http://example.com/custompage3">Page3</a>
        <ul class="sub-menu">
            <li><a href="http://example.com/custompage3/submenu">Submenu</a></li>
            <li><a href="http://example.com/custompage3/submenu1">Submenu1</a></li>
            <li><a href="http://example.com/custompage3/submenu2">Submenu3</a></li>
        </ul>
    </li>
</ul>

And i'd like to achieve the following final markup for items with submenus :

<ul id="menu-menu" class="menu vertical medium-horizontal">
    <li><a href="http://example.com">Home</a></li>
    <li><a href="http://example.com/custompage">Page</a></li>
    <li><a href="http://example.com/custompage2">Page2</a></li>
    <li><a href="http://example.com/custompage3" data-toggle="dropdown-custompage3">Page3</a>
        <div class="dropdown-pane" id="dropdown-custompage3" data-dropdown data-hover="true" data-hover-pane="true" data-position="bottom">
            <ul class="grid-x grid-padding-x small-up-1 medium-up-2 large-up-3">
                <li class="cell"><a href="http://example.com/custompage3/submenu">Submenu</a></li>
                <li class="cell"><a href="http://example.com/custompage3/submenu1">Submenu1</a></li>
                <li class="cell"><a href="http://example.com/custompage3/submenu2">Submenu3</a></li>
            </ul>
        </div>
    </li>
</ul>

So the aim is to :

  • add a "data-toggle" attribute to a link with submenu
  • wrap the submenu in a div with an id equal to the previous data toggle value and with custom classes
  • add custom classes to the sub-menu ul (grid-x grid-padding-x)
  • add a "cell" class to the children ul

So far I tried to use a custom menu walker :

Template part :

wp_nav_menu( array( 
    'theme_location' => 'main-menu',
    'menu_class' => 'menu vertical medium-horizontal',
    'walker'        => new custom_nav_menu_walker
) );

Function :

class custom_nav_menu_walker extends Walker_Nav_Menu {


public function start_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<div class=\"dropdown-pane expand\" id=\"nav-dropdown\" data-dropdown data-hover=\"true\" data-hover-pane=\"true\" data-position=\"bottom\">\n$indent<ul class=\"grid-x grid-padding-x small-up-1 medium-up-2 large-up-3\">\n";
}

public function end_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= "$indent</ul>\n</div>\n";
}

}

This partially working as my submenu ul as the intended classes and is surrounded by a dropdown pane div but :

  • Parent a doesn't have the required attribute
  • "dropdown-pane" div doesn't have a custom id related to its parent
  • li in submenu do not have the "cell" class

If anybody can help that would be great !

2
  • gotta add that to start_el to make it work, el looks through items within including parent item, startlevel is just point before parent item.
    – raven0ak
    Feb 25 '19 at 12:02
  • I suggest you listen to these tutorials for walker class youtube.com/… explains somewhat what you miss and why you need start_el to be function where magic happens instead of start_lvl
    – raven0ak
    Feb 25 '19 at 18:45

Your Answer

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

Browse other questions tagged or ask your own question.