Navigation walker classes in Wordpress - Step-by-Step Execution

Concept Flow - Navigation walker classes

Start WordPress Menu

↓

Call Walker Class

↓

Walker::start_lvl()

↓

Walker::start_el()

↓

Generate HTML for Menu Item

↓

Walker::end_el()

↓

Walker::end_lvl()

↓

Return Complete Menu HTML

↓

Display Menu

WordPress calls the walker class methods in order to build the menu HTML step-by-step.

Execution Sample

Wordpress

<?php
class My_Walker extends Walker_Nav_Menu {
  function start_el(&$output, $item, $depth=0, $args=null, $id=0) {
    $output .= '<li>' . $item->title;
  }
}

This code defines a custom walker that adds a simple list item with the menu item's title.

Execution Table

Step	Method Called	Input	Action	Output
1	start_lvl	depth=0	Add <ul> tag for submenu start	<ul>
2	start_el	item=Home	Add <li> with item title	<ul><li>Home
3	end_el	item=Home	Close <li> tag	<ul><li>Home</li>
4	start_el	item=About	Add <li> with item title	<ul><li>Home</li><li>About
5	end_el	item=About	Close <li> tag	<ul><li>Home</li><li>About</li>
6	end_lvl	depth=0	Close <ul> tag	<ul><li>Home</li><li>About</li></ul>
7	Return	Complete HTML	Return full menu HTML	<ul><li>Home</li><li>About</li></ul>

💡 All menu items processed, submenu levels closed, menu HTML complete.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6	Final
$output	""	"<ul><li>Home"	"<ul><li>Home</li>"	"<ul><li>Home</li><li>About"	"<ul><li>Home</li><li>About</li>"	"<ul><li>Home</li><li>About</li></ul>"	"<ul><li>Home</li><li>About</li></ul>"

Key Moments - 2 Insights

Why does start_el add the opening <li> but end_el adds the closing </li>?

Because start_el begins the menu item HTML and end_el finishes it, keeping HTML tags balanced as shown in steps 2 and 3.

What happens if end_lvl is not called?

The submenu <ul> tag would remain open, causing invalid HTML. Step 6 shows end_lvl closing the <ul> properly.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of $output after step 4?

A "<ul><li>Home<li>About"

B "<ul><li>Home</li><li>About"

C "<ul><li>Home</li><li>About</li>"

D "<li>Home</li><li>About"

💡 Hint

Check the output column at step 4 in the execution_table.

At which step does the submenu <ul> tag get closed?

A Step 3

B Step 2

C Step 6

D Step 5

💡 Hint

Look for end_lvl method call in the execution_table.

If start_el did not add the opening <li> tag, what would happen to the menu HTML?

A Menu items would not be wrapped in list items

B Submenu <ul> tags would not open

C Menu would have extra closing </li> tags

D Menu would not display any titles

💡 Hint

Refer to the action column in steps 2 and 4 in the execution_table.

Concept Snapshot

Navigation walker classes build WordPress menus step-by-step.
They use methods like start_lvl, start_el, end_el, end_lvl.
start_el adds opening <li> and content; end_el closes <li>.
start_lvl and end_lvl wrap submenu items in <ul> tags.
Custom walkers let you change menu HTML structure easily.

Full Transcript

Navigation walker classes in WordPress control how menus are built in HTML. The process starts by calling the walker class, which runs methods in order: start_lvl to open submenu lists, start_el to add each menu item with an opening <li> tag and title, end_el to close each <li>, and end_lvl to close submenu lists. This step-by-step method ensures valid HTML structure. The output variable accumulates the HTML as each method adds parts. If any method is missing or incorrect, the menu HTML can break. Custom walker classes let developers change how menus look by overriding these methods.

Practice

1. What is the main purpose of a custom navigation walker class in WordPress?

easy

A. To customize the HTML output of WordPress menus

B. To create new database tables for menu items

C. To change the WordPress admin dashboard layout

D. To add new user roles automatically

Solution

1. Step 1: Understand the role of navigation walkers

   Navigation walker classes control how WordPress builds the HTML for menus.

2. Step 2: Identify what customization means here

   Custom walkers let you change the HTML structure or classes of menu items.

3. Final Answer:

   To customize the HTML output of WordPress menus -> Option A

4. Quick Check:

   Navigation walker = customize menu HTML [OK]

Hint: Walkers change menu HTML output, not database or admin [OK]

Common Mistakes:

• Thinking walkers create database tables
• Confusing walkers with admin dashboard customization
• Assuming walkers add user roles

2. Which method should you override in a custom walker class to change how each menu item starts rendering?

easy

A. start_el

B. end_el

C. start_lvl

D. end_lvl

Solution

1. Step 1: Recall walker method roles

   In Walker_Nav_Menu, start_el controls the start of each menu item element.

2. Step 2: Differentiate from other methods

   end_el ends a menu item, start_lvl and end_lvl handle submenu levels.

3. Final Answer:

   start_el -> Option A

4. Quick Check:

   start_el = start menu item HTML [OK]

Hint: start_el begins menu item output, others handle endings or levels [OK]

Common Mistakes:

• Overriding end_el instead of start_el for item start
• Confusing start_lvl with item rendering
• Using end_lvl to start menu items

3. Given this custom walker snippet, what HTML tag will wrap each menu item?

class My_Walker extends Walker_Nav_Menu {
  function start_el(&$output, $item, $depth=0, $args=null, $id=0) {
    $output .= "
" . $item->title . "
";
  }
}
wp_nav_menu(array('walker' => new My_Walker()));

medium

A. <li>

B. <div>

C. <span>

D. <a>

Solution

1. Step 1: Analyze the start_el method output

   The method appends a string starting with <div> and ending with </div> wrapping the item title.

2. Step 2: Understand the effect on menu HTML

   This replaces the default <li> tag with a <div> tag for each menu item.

3. Final Answer:

   <div> -> Option B

4. Quick Check:

   Custom start_el outputs <div> tags [OK]

Hint: Look inside start_el output string for tag used [OK]

Common Mistakes:

• Assuming default <li> remains
• Confusing wrapper tag with link tag
• Ignoring custom output in start_el

4. What is wrong with this custom walker class code?

class Custom_Walker extends Walker_Nav_Menu {
  function start_el($output, $item, $depth=0, $args=null, $id=0) {
    $output .= "
" . $item->title . "
";
  }
}

medium

A. The class should extend Walker_Page, not Walker_Nav_Menu

B. The method name should be end_el, not start_el

C. The $item parameter is missing

D. The $output parameter should be passed by reference

Solution

1. Step 1: Check method signature requirements

   In Walker_Nav_Menu, start_el must accept &$output by reference to modify it properly.

2. Step 2: Identify the error in parameter passing

   The code uses $output without & reference, so changes won't affect the original output string.

3. Final Answer:

   The $output parameter should be passed by reference -> Option D

4. Quick Check:

   $output must be & passed to modify output [OK]

Hint: Remember $output needs & to update menu HTML [OK]

Common Mistakes:

• Forgetting & on $output parameter
• Mixing start_el with end_el method
• Extending wrong walker class

5. You want to add a custom CSS class to only top-level menu items using a custom walker. Which approach correctly achieves this?

hard

A. Override end_lvl and add class to submenu <ul> elements

B. Override start_lvl and add class to all menu items regardless of depth

C. Override start_el and check if $depth == 0, then add class to <li>

D. Override end_el and add class to all <a> tags

Solution

1. Step 1: Understand $depth parameter meaning

   $depth indicates the menu level; 0 means top-level items.

2. Step 2: Choose method to modify <li> classes

   start_el outputs the opening <li> tag, so adding class here for $depth == 0 targets top-level items only.

3. Final Answer:

   Override start_el and check if $depth == 0, then add class to <li> -> Option C

4. Quick Check:

   start_el + $depth check = top-level class [OK]

Hint: Use $depth in start_el to target top-level items [OK]

Common Mistakes:

• Adding classes in start_lvl or end_lvl which affect submenus
• Adding classes to all items without depth check
• Modifying end_el which closes tags, not starts