0

I am working on a project to convert HTML code to WordPress. I am stuck with the navigation part.

The existing navigation:

<nav>
 <div class="dropdown">
  <div class="toggle"><a href="some link">Page name</a></div>
  <nav class="dropdown-list">
   <a class="dropdown-link" href="some link">Page name</a>
   <a class="dropdown-link" href="some link">Page name</a>
  </nav>
 </div>
 <a class="link with out sub menus" href="some link">Page name</a> 
 <a class="link with out sub menus" href="some link">Page name</a>
</nav>

So far I've been able to remove default ul and li tags for the wp navigation and adding <nav> to menus who have children by creating a Walker class:

class Description_Walker extends Walker_Nav_Menu
{
    function start_el(&$output, $item, $depth, $args)
    {
        $classes = empty($item->classes) ? array () : (array) $item->classes;
        $class_names = join(' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
        !empty ( $class_names ) and $class_names = ' class="'. esc_attr( $class_names ) . '"';
        $output .= "";
        $attributes  = '';
        !empty( $item->attr_title ) and $attributes .= ' title="'  . esc_attr( $item->attr_title ) .'"';
        !empty( $item->target ) and $attributes .= ' target="' . esc_attr( $item->target     ) .'"';
        !empty( $item->xfn ) and $attributes .= ' rel="'    . esc_attr( $item->xfn        ) .'"';
        !empty( $item->url ) and $attributes .= ' href="'   . esc_attr( $item->url        ) .'"';
        $title = apply_filters( 'the_title', $item->title, $item->ID );
        $item_output = $args->before
        . "<a $attributes $class_names>"
        . $args->link_before
        . $title
        . '</a>'
        . $args->link_after
        . $args->after;
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }


    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<nav class='dropdown-list w-dropdown-list'>\n";
    }


    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</nav>\n";
    }

}

Now I'm stuck with adding both <div> to menus who have children as mentioned above.

  • Does the code you show works? – Max Yudin Jun 9 '17 at 11:03
1

Here is your walker class

class Description_Walker extends Walker_Nav_Menu
{
     function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<nav class='dropdown-list w-dropdown-list'>\n";
    }

    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 )
    {
        $classes = empty($item->classes) ? array () : (array) $item->classes;
        $class_names = join(' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
        !empty ( $class_names ) and $class_names = ' class="'. esc_attr( $class_names ) . '"';
        $output .= "";
        $attributes  = '';
        !empty( $item->attr_title ) and $attributes .= ' title="'  . esc_attr( $item->attr_title ) .'"';
        !empty( $item->target ) and $attributes .= ' target="' . esc_attr( $item->target     ) .'"';
        !empty( $item->xfn ) and $attributes .= ' rel="'    . esc_attr( $item->xfn        ) .'"';
        !empty( $item->url ) and $attributes .= ' href="'   . esc_attr( $item->url        ) .'"';
        $title = apply_filters( 'the_title', $item->title, $item->ID );
        $item_output = $args->before;
        $wraper = ($args->walker->has_children) ? '<div  class="toggle">':'';
        $item_output.= $wraper
                    . "<a $attributes $class_names>"
                    . $args->link_before
                    . $title
                    . '</a>';
         $wraper_end = ($args->walker->has_children) ? '</div>':'';
         $item_output.=  $wraper_end
                    . $args->link_after
                    . $args->after;
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }





    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</nav>\n";
    }

}

and this is code for header.php i hope you've registered Primary menu..

 wp_nav_menu( array('menu' => 'Main', 'theme_location' => 'Primary','container' => '', 'items_wrap' => '<nav>%3$s</nav>' , 'walker' => new Description_Walker()));

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.