How Does The Walker Class Work?

Can someone explain to me how the Walker Class works? Do the methods inside the class always need to overload the parent method?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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='%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='%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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0