How Does The Walker Class Work?

Question

I searched and read about the walker class. I ran tests, I played around with the code and I finally understood. I hope this can be helpful to others too.

You’ll need to implement the walker class for this.

Here is a simple example.

$defaults = array(
          'theme_location'  => 'primary',
          'container'       => 'ul',
          'menu_class'      => 'nav navbar-nav main-nav',
          'walker'          => new Primary_Walker_Nav_Menu()
);

wp_nav_menu( $defaults );

In the above block of code, the wp_nav_menu() function takes $defaults as it’s argument. In the array $defaults, the last key is walker. The walker key’s value is an object of a class Primary_Walker_Nav_Menu.

In functions.php implement the following code.

class Primary_Walker_Nav_Menu extends Walker_Nav_Menu {
  function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    if ( array_search( 'menu-item-has-children', $item->classes ) ) {
      $output .= sprintf(
        "\n<li class="dropdown %s"><a href="https://wordpress.stackexchange.com/questions/169936/%s" class="dropdown-toggle" 
        data-toggle="dropdown">%s</a>\n", 
        ( array_search( 'current-menu-item', $item->classes ) || 
          array_search( 'current-page-parent', $item->classes ) ) 
         ? 'active' : '', $item->url, $item->title );
    } else {
       $output .= sprintf( "\n<li %s><a href="https://wordpress.stackexchange.com/questions/169936/%s">%s</a>\n", 
         ( array_search( 'current-menu-item', $item->classes) ) 
         ? ' class="active"' : '', $item->url, $item->title );
    }
  }

  function start_lvl( &$output, $depth ) {
    $indent = str_repeat( "\t", $depth );
    $output .= "\n$indent<ul class=\"dropdown-menu\" role=\"menu\">\n";
  }
}

The start_el() method is used to add the opening HTML tag for a single tree item (such as <li>, <span>, or <a>) to $output.

The start_lvl() method is run when the walker reaches the start of a new “branch” in the tree structure. Generally, this method is used to add the opening tag of a container HTML element (such as <ol>, <ul>, or <div>) to $output.

The output of the above implementation will result in the following html block of code.

<ul id="menu-main-navigation" class="nav navbar-nav main-nav">
  <li class="dropdown ">
    <a href="http://karunshakya.com.np/services/" class="dropdown-toggle">Services</a>
    <ul class="dropdown-menu" role="menu">
      <li><a href="http://example.com/services/recrutement/">Sélection et recrutement</a></li>
      <li><a href="http://example.com/services/personnel/">Mise disposition de personnel</a></li>
      <li><a href="http://example.com/services/salaire/">Gestion de salaire</a></li>
    </ul>
  </li>
  <li><a href="http://example.com/news/">News</a></li>
  <li><a href="http://example.com/medias/">Medias</a></li>
  <li class="last-child"><a href="http://example.com/contactez/">Contactez-nous</a></li>
</ul>

The link below explains how we can use the walker class:
http://code.tutsplus.com/tutorials/understanding-the-walker-class–wp-25401

Related Posts:

Leave a Comment Cancel reply