I’m very new at the WordPress Menu Walker and need some help. I need to enclose each first level submenu ul with a div and then give that div a unique ID.

The ID could be generated with a counter or similar, but would be better if it was based on the menu name from above (the one between the anchor tags).

The div needs some custom classes that are not unique. The first div needs an additional class called “is-active”. It would help if the anchor got a custom class as well.

The output needs to look like this:

<ul id="menu-mainmenu">

    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-11">
        <a class="panel-heading">Panel 1</a>
        <div class="tabs-panel is-active" id="panel-1"> 
            <ul>
                <li class="menu-item menu-item-has-children">
                    <a href="thelink">child link name</a>
                </li>
            </ul>
        </div>
    </li>

    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-11">
        <a class="panel-heading">Panel 2</a>
        <div class="tabs-panel" id="panel-2">   
            <ul>
                <li class="menu-item menu-item-has-children">
                    <a href="thelink">child link name</a>
                </li>
            </ul>
        </div>
    </li>

</ul>

Read more here: WordPress Walker – add div tags and unique IDs


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: