Navigation walker classes in Wordpress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to start a custom walker class by extending the correct WordPress class.

Wordpress

class My_Custom_Walker extends [1] {
    // Custom walker code here
}

Drag options to blanks, or click blank then click option'

AWalker_Nav_Menu

BWalker_Page

CWalker_Category

DWalker_Comment

Attempts:

3 left

💡 Hint

Common Mistakes

Extending the wrong walker class like Walker_Page or Walker_Comment.

Not extending any class at all.

The Walker_Nav_Menu class is the base class to extend when creating a custom navigation menu walker in WordPress.

2fill in blank

medium

Complete the method signature to override the start of a menu item output.

Wordpress

public function [1](&\$output, \$item, \$depth = 0, \$args = null, \$id = 0) {
    // Custom code here
}

Drag options to blanks, or click blank then click option'

Aend_lvl

Bstart_el

Cstart_lvl

Dend_el

Attempts:

3 left

💡 Hint

Common Mistakes

Using end_el instead of start_el.

Confusing element methods with level methods.

The start_el method is used to output the start of each menu item in a custom walker.

3fill in blank

hard

Fix the error in the method name to properly close a submenu level.

Wordpress

public function [1](&\$output, \$depth = 0, \$args = null) {
    \$indent = str_repeat("\t", \$depth);
    \$output .= "\n" . \$indent . "</ul>\n";
}

Drag options to blanks, or click blank then click option'

Astart_el

Bstart_lvl

Cend_lvl

Dend_el

Attempts:

3 left

💡 Hint

Common Mistakes

Using start_lvl instead of end_lvl.

Using element methods instead of level methods.

The end_lvl method is used to output the closing tags for submenu levels in a custom walker.

4fill in blank

hard

Fill both blanks to add a CSS class to the menu item and output the link tag.

Wordpress

public function start_el(&\$output, \$item, \$depth = 0, \$args = null, \$id = 0) {
    \$classes = empty(\$item->classes) ? array() : (array) \$item->classes;
    \$classes[] = [1];
    \$class_names = join(' ', array_filter(\$classes));
    \$output .= '<li class="' . esc_attr(\$class_names) . '">';
    \$output .= '<a href="' . esc_url(\$item->url) . '">' . [2] . '</a>';
}

Drag options to blanks, or click blank then click option'

Acustom-menu-item

Besc_html(\$item->title)

Chtmlspecialchars(\$item->title)

Dstrip_tags(\$item->title)

Attempts:

3 left

💡 Hint

Common Mistakes

Not escaping the menu item title properly.

Forgetting to add a CSS class or adding invalid class names.

Adding a custom CSS class helps style the menu item. Using esc_html(\$item->title) safely outputs the menu item title inside the link.

5fill in blank

hard

Fill both blanks to create a submenu wrapper with a custom class and indentation.

Wordpress

public function start_lvl(&\$output, \$depth = 0, \$args = null) {
    \$indent = str_repeat("\t", [1]);
    \$classes = array([2]);
    \$class_names = implode(' ', \$classes);
    \$output .= "\n" . \$indent . '<ul class="' . esc_attr(\$class_names) . '">\n';
}

Drag options to blanks, or click blank then click option'

A\$depth

B"sub-menu custom-submenu"

C"sub-menu"

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using a fixed number for indentation instead of depth.

Not including the required 'sub-menu' class.

Passing classes as a single string without array.

The indentation uses the current depth to align submenu levels. The classes array includes a custom class string. The class names are joined with spaces.