How to make a Wordpress Walker Class for a vertical sidebar menu with Bootstrap 4 Accordion?

619 Views Asked by At

I'm trying to build my own Walker_Nav_Menu class for a vertical sidebar menu inside my Wordpress Theme. I'm using Bootstrap 4 as a Framework.

My goal is to build something like the following html with the Walker class.

<div id="accordion">
    <ul>
        <li>
            <a href="#" class="custom-class" id="indiceheading-1" data-toggle="collapse" data-target="#indicecollapse-1" aria-expanded="true" aria-controls="indicecollapse-1">
                Link 1 but it's an accordion
            </a>
            <ul id="indicecollapse-1" class="collapse show" aria-labelledby="indiceheading-1" data-parent="#sidebarIndice">
                <li><a href="...">Link inside the dropdown</a></li>
            </ul>
        </li>
        <li><a href="...">Link 2</a></li>
        <li><a href="...">Link 3</a></li>
        <li>
            <a href="#" class="collapsed" id="indiceheading-2" data-toggle="collapse" data-target="#indicecollapse-2" aria-expanded="false" aria-controls="indicecollapse-2">
                Link 4 but it's an accordion
            </a>
            <ul id="indicecollapse-2" class="collapse" aria-labelledby="indiceheading-2" data-parent="#sidebarIndice">
                <li><a href="...">Link inside the second dropdown</a></li>
            </ul>
        </li>
    </ul>
</div>

The walker class I wrote is the following one (but it's not working)

<?php
class Walker_Indice extends Walker_Nav_Menu{

    public function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t",$depth);
        $output .= "\n$indent<ul class=\"collapse deph_$depth\">\n";
    } //start_lvl

    public function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul>\n"; //da cambiare a seconda di come apro in start_lvl
    } //end_lvl

    function start_el(&$output, $item, $depth=0, $args=array(), $id=0){
        $indent = ($depth) ? str_repeat("\t",$depth): '';
        $li_attributes='';
        $class_names=$value='';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = ($item->current || $item->current_item_anchestor)? 'active' : '';
        $classes[] = 'menu-item-'.$item->ID;

        $class_names =  join(' ', apply_filters('nav_menu_css_class', array_filter( $classes ), $item, $args ));
        $class_names = ' class="' . esc_attr($class_names) . '"';

        $id = apply_filters('nav_menu_item_id', 'menu-item-'.$item->ID, $item, $args);
        $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';

        $output .= $indent . '<li' . $id . $value . $class_names . $li_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) . '"' : '';

        if($args->walker->has_children){
            $attributes .= ( $args->walker->has_children ) ? ' class="nav-link dropdown-toggle" data-toggle="dropdown"' : '';
        }else{
            $attributes .= ' class="nav-link"';
        }

        $item_output = $args->before;
        $item_output .= '<a' . $attributes . '>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;

        $item_output .= $args->after;

        $output .= apply_filters ( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );

    } //start_el
}

Can someone help me with this? I'm new and I can't find a tutorial for this, because every tutorials on the web are for normal Bootstrap navbar, but with accordions I need dynamic data-target, aria-controls ecc.

Thanks for your help.

0

There are 0 best solutions below