I have a menu structure I built in HTML+CSS that I would like to incorporate into a WordPress menu, but I am new to extending the Walker class and was wondering if someone could show me an example of how it might work. The code I would like to output is below:

<!-- Menu Start -->
<nav class="collapse navbar-collapse menu">
<ul class="nav navbar-nav sf-menu">
    <li><a id="current" href="front-page.php">Current Page</a></li>
    <li><a href="#" class="sf-with-ul">Top Level Menu <span class="sf-sub-indicator"><i class="fa fa-angle-down"></i></span></a>
            <li><a href="child-page.php" class="sf-with-ul">Child Link</a></li>
    <li><a href="page.php">Another Link No Children</a></li>
<!-- Menu End -->

The nav and ul tags wrap the entire menu and do not need repeating.

The li for a single page without any child pages just needs an anchor tag inside of a bare li, except if the page is current, and add the appropriate id to the a tag.

If there is a parent item with children, display the parent link first with a "sf-with-ul" class on the a tag, then make another ul group with its li children have the same class as well.

Could anyone point me in the right direction here on how to accomplish this? Thank you.

  • 2
    If this is a test server, you can check out this code which creates an automatic submenu. You can then play around with the code to see how things work. Code Link. I would explain but walkers are still new to me too, this is something i just kinda threw together via trial / error. – Howdy_McGee May 1 '14 at 18:57

I can only imagine that since you are adding classes and ID's this is for styling purposes. I really don't see the point of this. This is the exact structure of a generic WP menu and as for the classes and ID's:

  • The current page gets a class of 'current-menu-item' so that id is not needed. Just point to it like:

    nav .current-menu-item
  • If any menu item has children it gets a class of 'menu-item-has-children' so you can select the li with this class and then the direct child after it like so:

    .menu-item-has-children > a
  • Another ul in the li with children is created automatically so and you can select it like so thus avoiding the need of 'sf-with-ul' class on the child of the nested ul:

    .menu-item-has-children > a ul li

For me the walker is for more complicated tasks like retrieving data from backend and then altering the menu with that data for example adding html data attributes to hrefs. Again I don't know what you are trying to achieve but it it's just styling then IMO the walker is an overkill in this case.

  • This was the better idea, to think backwards about applying my styling to what WP was already outputting in the menus. I got it to look perfect, thanks for the advice. – dfpchester May 3 '14 at 16:29

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.