What is Walker Nav and How it Use in WordPress

Posted By : Satyam Sharma | 25-Nov-2018

wordpress

Introduction

In this blog, I will discuss the Walker nav menu in WordPress and how to use it. The best thing about WordPress is that it is an open source web publishing platform and also it is so easy to manage. Everyone can make our website by using WordPress even if they do not have technical knowledge. But for developer WordPress provides many built-in functions which made us so easy to work or build our own functionality.

Wordpress provides a Walker nav class. Just see how the WordPress manage its hierarchy in its menu as you can easily manage menu, submenu and all. But when we implement this hierarchy in the frontend it is difficult to manage. But when we will use Walker Nav class this difficulty will be removed. This class is basically finding the depth hierarchy.

So below are basically the steps to implement the walker nav class.

Step: 1

<?php
class Wdm_Custom_Nav_Walker extends Walker_Nav_Menu {
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
    $classes = empty( $item->classes ) ? array() : (array) $item->classes;
/* -Wdm changes- */
//Getting post id of current page
    $wdm_postid    = url_to_postid( $item->url );
//$have_children var keeps record of the children of the current page
    $have_children    = false;
    if ( wdm_has_children( $wdm_postid ) ) {
       $have_children = true;
    }

    if ( $have_children ) {
       $classes[] = 'wdm-has-child menu-item-' . $item->ID;
    } else {
       $classes[] = 'menu-item-' . $item->ID;
    }
    /* -End of Wdm changes- */
    $class_names    = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
    $class_names    = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
        $id    = apply_filters( 'nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args, $depth );
    $id    = $id ? ' id="' . esc_attr( $id ) . '"' : '';
    $output .= $indent . '<li' . $id . $class_names . '>';
    $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 : '';
    $page_name = apply_filters( 'the_title', $item->title, $item->ID );
    $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );
    $attributes = '';
    foreach ( $atts as $attr => $value ) {
       if ( ! empty( $value ) ) {
        $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
        $attributes .= ' ' . $attr . '="' . $value . '"';
       }
    }
/* -Wdm changes- */
//Bootstrap icons - right arrow and down arrow.
    $wdm_right_arrow = ' <span class="glyphicon glyphicon-chevron-right"></span>';
    $wdm_down_arrow = ' <span class="glyphicon glyphicon-chevron-down"></span>';
/* -End of Wdm changes- */
    $item_output = $args->before;
    $item_output .= '<a' . $attributes . '>';
    /** This filter is documented in wp-includes/post-template.php */
    /* -Wdm changes- */
    if( $have_children && 'Home' != $page_name ) {
//If the page title is Architectural, I assign to it a right arrow.
       if( 'Architectural' == $page_name ) {
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $wdm_right_arrow . $args->link_after;
       }else{
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $wdm_down_arrow .$args->link_after;
       }
    }else{
       $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
    }
    /* -End of Wdm changes- */
    $item_output .= '</a>';
    $item_output .= $args->after;
    $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
   }
public function end_el( &$output, $item, $depth = 0, $args = array() ) {
    $output .= "</li>\n";
   }
}

In the above code, we have made a class with the name of Wdm_Custom_Nav_Walker extend to Walker_Nav_Menu class. It basically finds the depth about the hierarchy of the WordPress menu. Just paste this in functions file of your theme. Please take some time to read those values and understand them. Have some fun, change the menu items information and see what will change there.

Step: 2

<ul>
    <?php
    wp_nav_menu(array(
        'menu'    => 2, //menu id
        'walker'  => new Wdm_Custom_Nav_Walker() //use our custom walker
    ));
    ?>
</ul>

In the above code, we just implement our custom class in the wp_nav_menu function. When we use this class it automatically finds the depth and put the class whatever we have given in out custom class code.

Conclusion

And that’s about it. Now the wordpress will be used this nav walker class and make navigation as like you wants. Feel free to experiment with the featurettes. If you have the right knowledge and also have right tools then this is a great playground for your web publishing.