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

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

1 Answer 1

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 and acknowledge you have read our privacy policy.

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