Troubles with Walker_Nav_Menu and closing <ul>

I have an existing site that I am moving into WordPress. My requirements state that I do not have the ability to change the HTML or CSS. I have a sidebar menu that I am trying to recreate using a custom Walker function, and I am almost there, but I cannot get the last bit to work.

I need the ability to wrap each of the top level List-item into their own undordered-list. Right now the walker function is outputting just one undordered-list with filter-list. I need that undordered-list to wrap around each of the top 3 List-items.

The remaining output is correct.

Here’s the browser output:

<div class="testing">
<ul class="filter-list">
    <li id="nav-menu-item-60">
        <a class="heading-f parent" href="http://wp-host/category/holiday">Holiday</a>
        <div class="accordion-content">
            <ul class="sub-menu submenu-alt">
                <li id="nav-menu-item-64">
                    <a class="" href="http://wp-host/category/holiday/easter">Easter</a>
                </li>
                <li id="nav-menu-item-61">
                    <a class="" href="http://wp-host/category/holiday/valentines-day">Valentine's Day</a>
                </li>
            </ul>
        </div>
    </li>
    <li id="nav-menu-item-62">
        <a class="heading-f parent" href="http://wp-host/category/occassion">Occassion</a>
        <div class="accordion-content">
            <ul class="sub-menu submenu-alt">
                <li id="nav-menu-item-63">
                    <a class="" href="http://wp-host/category/occassion/anniversary">Anniversary</a>
                </li>
                <li id="nav-menu-item-116">
                    <a class="" href="http://wp-host/Article/happy-birthday">Happy Birthday!</a>
                </li>
            </ul>
        </div>
    </li>
    <li id="nav-menu-item-122">
        <a class="heading-f parent" href="http://wp-host/category/relationships">Relationships</a>
        <div class="accordion-content">
            <ul class="sub-menu submenu-alt">
                <li id="nav-menu-item-123">
                    <a class="" href="http://wp-host/category/relationships/family">Family</a>
                </li>
                <li id="nav-menu-item-124">
                    <a class="" href="http://wp-host/category/relationships/family">Friends</a>
                </li>
            </ul>
        </div>
    </li>
</ul>

Here’s the PHP:

    //$menus = array( 'article-menu-1' , 'article-menu-2' );


    $defaults = array(
        'menu' => 'article-menu',
        'container' => 'div',
        'container_class' => 'testing',
        'menu_class' => 'filter-list',
        'items_wrap' => '<ul class="%2$s">%3$s</ul>',
        'depth' => '2',
        'walker' => new themeslug_walker_nav_menu
        );

    class themeslug_walker_nav_menu extends Walker_Nav_Menu {

        // add classes to ul sub-menus
        function start_lvl( &$output, $depth = 0, $args = array() ) {

            // build html
            $output .= "n" . '<div class="accordion-content"><ul class="sub-menu submenu-alt">' . "n";

        }

        function start_el(  &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
           global $wp_query;

            // build html
            $output .= $indent . '<li id="nav-menu-item-'. $item->ID . '">';

            // link attributes
           $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
           $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
           $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
           $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
           $attributes .= ' class="' . ( $depth > 0 ? '' : 'heading-f parent' ) . '"';

            $item_output = sprintf( '%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s',
                $args->before,
                $attributes,
                $args->link_before,
                apply_filters( 'the_title', $item->title, $item->ID ),
                $args->link_after,
                $args->after
            );

            // build html
            $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
        }
    }

    wp_nav_menu( $defaults ); ?>

Here’s the desired output:

<div class="testing">
<ul class="filter-list">
    <li id="nav-menu-item-60">
        <a class="heading-f parent" href="http://wp-host/category/holiday">Holiday</a>
        <div class="accordion-content">
            <ul class="sub-menu submenu-alt">
                <li id="nav-menu-item-64">
                    <a class="" href="http://wp-host/category/holiday/easter">Easter</a>
                </li>
                <li id="nav-menu-item-61">
                    <a class="" href="http://wp-host/category/holiday/valentines-day">Valentine's Day</a>
                </li>
            </ul>
        </div>
    </li>
<ul class="filter-list">
    <li id="nav-menu-item-62">
        <a class="heading-f parent" href="http://wp-host/category/occassion">Occassion</a>
        <div class="accordion-content">
            <ul class="sub-menu submenu-alt">
                <li id="nav-menu-item-63">
                    <a class="" href="http://wp-host/category/occassion/anniversary">Anniversary</a>
                </li>
                <li id="nav-menu-item-116">
                    <a class="" href="http://wp-host/Article/happy-birthday">Happy Birthday!</a>
                </li>
            </ul>
        </div>
    </li>
</ul>
<ul class="filter-list">
    <li id="nav-menu-item-122">
        <a class="heading-f parent" href="http://wp-host/category/relationships">Relationships</a>
        <div class="accordion-content">
            <ul class="sub-menu submenu-alt">
                <li id="nav-menu-item-123">
                    <a class="" href="http://wp-host/category/relationships/family">Family</a>
                </li>
                <li id="nav-menu-item-124">
                    <a class="" href="http://wp-host/category/relationships/family">Friends</a>
                </li>
            </ul>
        </div>
    </li>
</ul>

Read more here: Troubles with Walker_Nav_Menu and closing <ul>

Leave a Reply

Your email address will not be published. Required fields are marked *