Insert an additional <div> after wrapped on navwalker

643 Views Asked by At

So I'm having some issues and I can't figure out how to solve them, I've recently started working with WordPress navwalkers and I'm stuck on a particular piece and I can't figure out how to get around it.

So I am using the Bulma Framework inside a wordpress theme.

Here is my current output:

enter image description here

Here is what I'm attempting to achieve (Please give me criticism if you have any, I'm still learning) - I just can't figure out how to add in an extra div to wrap after the first $depth:

enter image description here

Here is my wp_nav_menu header:

<div class="container">
            <div class="navbar-menu is-active">
                    <div class="navbar-start" id="main-navigation">
                        <?php
                        wp_nav_menu( [
                            'theme_location' => 'primary',
                            'depth' => 3,
                            'container' => true,
                            'items_wrap' => '%3$s', // Removes the <ul>
                            'walker' => new Nav_walker(),
                        ]);
                        ?>
                    </div>
            </div>
        </div>

Here is the navwalker code:

class Nav_walker extends Walker_Nav_Menu
{
    /**
     * Starts the list before the elements are added
     *
     * @see Walker::start_lvl()
     *
     * @param string $output
     * @param int $depth
     * @param array $args
     */
    public function start_lvl(&$output, $depth = 0, $args = [])
    {
        // Indent the items
        $indent = str_repeat("\t", $depth);

        // The first <div> inside mega-menu
        if ($depth == 0) {
            $output .= "\n$indent<div class='navbar-dropdown'>\n";
        } else {
            $output .= "<div id=\"nav-items\">";
        }
    }

    /**
     * Ends the list of after the elements are added
     *
     * @see Walker::end_lvl()
     *
     * @param string $output
     * @param int $depth
     * @param array $args
     */
    public function end_lvl(&$output, $depth = 0, $args = [])
    {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</div>\n";
    }

    /**
     * Start the element output
     *
     * @param string $output
     * @param WP_Post $item
     * @param int $depth
     * @param array $args
     * @param int $id
     */
    public function start_el(&$output, $item, $depth = 0, $args = [], $id = 0)
    {
        $indent = ($depth) ? str_repeat("\t", $depth) : '';

        // Define all the menu-item classes
        $classes = empty($item->classes) ? [] : (array) $item->classes;

        // Combine the class names
        $class_names = implode(' ', $item->classes);

        // Add in the navbar-item class
        $class_names .= ' navbar-item';

        // Add in the active class to current menu item
        if (in_array('current-menu-item', $classes)) {
            $class_names .= ' active';
        }

        // Check if there are children
        $hasChildren = $args->walker->has_children;

        // If it's the first depth, apply the needed classes
        if ($depth === 0) {
            $class_names .= $hasChildren ? " has-dropdown is-hoverable" : "";
        }

        // If it's the second depth, apply the needed classes
        if ($depth === 1) {
            $class_names .= ' column is-3';
        }

        // Apply the needed class markup
        $class_names = $class_names ? 'class="' . esc_attr($class_names) . '"' : '';

        // If there are children, continue to apply elements
        if ($hasChildren) {
            $output .= "<div " . $class_names . ">";

            if ($depth === 0) {
                $output .= "<div class='navbar-link'>" . $item->title . "</div>";
            } else {
                $output .= "<h1 class='title is-6 is-mega-menu-title'>" . $item->title . "</h1>";
            }
        }
        else {
            $output .= "<a class='navbar-item' href='" . $item->url . "'>" . $item->title;
        }

        // Adds has_children class to the item so end_el can determine if the current element has children
        if ($hasChildren) {
            $item->classes[] = 'has_children';
        }
    }

    /**
     * Ends the element output
     *
     * @param string $output
     * @param WP_Post $item
     * @param int $depth
     * @param array $args
     * @param int $id
     */
    public function end_el(&$output, $item, $depth = 0, $args = array(), $id = 0 )
    {
        if (in_array("has_children", $item->classes)) {
            $output .= "</div>";
        }
        $output .= "</a>";
    }
}
0

There are 0 best solutions below