0

I'm making a custom template for my client. Well i'm strangling for hours, for making the vertical accordion menu dynamic so my client can change the nav links etc. The structure of the navigation is this

<div id="navigation">
<ul>
    <li>
        <h4><a href="link">Menu title</a>
        </h4>
    </li>
    <li>
        <h4><a href="Link">Menu Title</a></h4>
    </li>
    <li>
        <h4>Menu Title with submenu</h4>
        <div>
            <span><a href="link">Submenu Title</a></span>
            <span><a href="link">Submenu title</a></span>
        </div>
    </li>
</ul>

Its my first template in wordpress and I read the documentation i tried to experiment with the code which is in wordpress codex but I couldnt achieve it. I tried this and many experiments with that code but none of them worked. I want it to render the same way on the first example of code i gave you.

 wp_nav_menu(array(      
'container'       => 'ul',      
'container_id'    => '',      
'menu_class'      => 'menu',      
'menu_id'         => '',  
'before'          => '',  
'after'           => '',  
'link_before'     => '',  
'link_after'      => '',  
'items_wrap'      => '<li>%3$s</li>', ));

Can you help me a little? Thank you :)

  • Welcome at WPSE. Please add some code of what you have tried so far. – kraftner Jun 8 '14 at 22:18
  • Please edit you question and add it there. – kraftner Jun 9 '14 at 7:45
  • i updated my question – hambos22 Jun 9 '14 at 12:32
1

After reading PHP and wordpress codex i achieved what i wanted, by making a walker class. Here is the code

class Hambos_Walker_Nav_Menu extends Walker_Nav_Menu {

    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);

        if ($depth == 0):
            $output .= "\n$indent <div>\n";
        else:
            $output .= "\n$indent <ul>\n";
        endif;        

    }

    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);

        if ($depth == 0):
            $output .= "$indent</div>\n";
        else:
            $output .= "$indent</ul>\n";
        endif;  

    }

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

        $class_names = '';

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

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

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

        if ($depth == 0):
            $output .= $indent . '<li' . $id . $class_names .'><h4>';
        else:
            $output .= $indent . '<span' . $id . $class_names .'>';
        endif;

        $atts = array();
        $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
        $atts['target'] = ! empty( $item->target )     ? $item->target     : '';
        $atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
        $atts['href']   = ! empty( $item->url )        ? $item->url        : '';

        $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );

        $attributes = '';
        foreach ( $atts as $attr => $value ) {
            if ( ! empty( $value ) ) {
                $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }

        $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 .= '</a>';
        $item_output .= $args->after;

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

    }

    function end_el( &$output, $item, $depth = 0, $args = array() ) {
        if ($depth == 0):
            $output .= "<h4></li>\n";
        else:
            $output .= "</span>\n";
        endif;
    }

}

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.