Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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 :)

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

1 Answer 1

up vote 1 down vote accepted

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;
    }

}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.