0

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 !

  • 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 at 12:02
0

I suggest you listen to these tutorials for walker class https://www.youtube.com/watch?v=ArEmwJV6M7s&list=PLriKzYyLb28nUFbe0Y9d-19uVkOnhYxFE&index=14
explains somewhat what you miss and why you need start_el to be function where magic happens instead of start_lvl

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.