0

How to write a walker class for constructing a new submenus. for my wordpress theme the submenu is looking like this:

<li class="drop">
                <a data-scroll-nav='2'>Home</a>
</li>
    <li class="drop">
                <a data-scroll-nav='2'>About Us</a>
                <div class="dropdownContain">
                        <div class="dropOut">
                            <div class="triangle"></div>
                            <ul>
                                <li>Plan</li>
                                <li>Account Settings</li>
                                <li>Switch Account</li>
                                <li>Sign Out</li>
                            </ul>
                        </div>
                    </div>
      </li>
<li class="drop">
                <a data-scroll-nav='2'>Contact</a>
</li>

In above the menu structure is main menus-> hom, about us, contact. and about us menu has 4 submenus - plan, account settings, switch account, sign out.

And i'm not using wp_nav_menu() in header file. just using the sidebar and add menu through widgets.

My menus are working correctly in wordpress. now i need to develop the submenu as like the above. can anyone please tell me how to write the walker class for this submenu?

So far i tried this function but didn't worked.

function mmy_walker_nav_menu_start_el(&$output, $depth = 0, $args = array()) {

        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<div class=\"dropdownContain\"><div class=\"dropOut\"><div class=\"triangle\"></div><ul class=\"sub-menu\">\n";

        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul></div></div>\n";

    return $output;
}
add_filter('walker_nav_menu_start_el', 'mmy_walker_nav_menu_start_el', 10, 4);
  • What does this menu look like? Could it not be done with the standard walker while using css :before and :after elements for the triangle etc? What have you tried so far? – Tom J Nowell Oct 27 '14 at 11:01
  • I have edited my question. please check it. hopes now u will get an idea now. – Zammuuz Oct 27 '14 at 11:10
1

Okays.. i've solved this in my own way. i have added the following function in functions.php file

class ik_walker extends Walker_Nav_Menu{        
    //start of the sub menu wrap
    function start_lvl(&$output, $depth) {
        $output .= '<div class="dropdownContain">
                        <div class="dropOut">
                            <div class="triangle"></div>
                                <ul>';
    }

    //end of the sub menu wrap
    function end_lvl(&$output, $depth) {
        $output .= '
                    </ul>
                </div>

        </div>';
    }


}

and in the header.php file menu section added this wp_nav_menu

wp_nav_menu( array(
    'container' => false, 
    'menu_id' => 'nav', 
    'depth' => 0,
    'theme_location' => 'primary', 

    'walker' => new ik_walker())
);

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.