Menus and navigation in Wordpress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this WordPress menu registration code?

Consider this code snippet in a WordPress theme's functions.php file:

function register_my_menu() {
  register_nav_menu('header-menu', __('Header Menu'));
}
add_action('init', 'register_my_menu');

What does this code do when the theme is active?

Wordpress

function register_my_menu() {
  register_nav_menu('header-menu', __('Header Menu'));
}
add_action('init', 'register_my_menu');

A Registers a single navigation menu location called 'Header Menu' available in the admin menu settings.

B Automatically creates a menu with items named 'Header Menu' in the front-end.

C Removes all existing menus and replaces them with 'Header Menu'.

D Registers multiple menu locations including 'Header Menu' and 'Footer Menu'.

💡 Hint

Think about what register_nav_menu does versus creating menu items.

This code registers a single menu location named 'Header Menu' so users can assign menus to it in the admin panel. It does not create menu items or remove existing menus.

📝 Syntax

intermediate

Which option correctly outputs a WordPress menu in a theme template?

You want to display a menu assigned to the 'header-menu' location in your theme template. Which code snippet will correctly output the menu?

A <?php get_nav_menu('header-menu'); ?>

B <?php wp_nav_menu('header-menu'); ?>

C <?php display_menu('header-menu'); ?>

D <?php wp_nav_menu(array('theme_location' => 'header-menu')); ?>

💡 Hint

Look for the correct function and parameter format to display menus.

The wp_nav_menu function requires an array with the key theme_location to specify which menu location to display.

🔧 Debug

advanced

Why does this WordPress menu not display any items?

Given this code in a theme template:

<?php wp_nav_menu(array('theme_location' => 'footer-menu')); ?>

And the admin menu settings show no menu assigned to 'footer-menu'. What is the reason no menu items appear?

Wordpress

<?php wp_nav_menu(array('theme_location' => 'footer-menu')); ?>

A No menu is assigned to the 'footer-menu' location, so nothing displays.

B The function <code>wp_nav_menu</code> is deprecated and won't work.

C The 'footer-menu' location is misspelled in the code.

D Menus only display if registered with <code>register_nav_menus</code>, not <code>register_nav_menu</code>.

💡 Hint

Check the admin menu assignment for the location.

If no menu is assigned to a registered menu location, wp_nav_menu outputs nothing by default.

❓ state_output

advanced

What is the output of this WordPress menu walker customization?

Consider this custom walker class snippet:

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

wp_nav_menu(array('theme_location' => 'header-menu', 'walker' => new My_Walker()));

What will the menu items look like when rendered?

Wordpress

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

wp_nav_menu(array('theme_location' => 'header-menu', 'walker' => new My_Walker()));

A The code will cause a fatal error due to incorrect walker method signature.

B Menu items will appear normally without any change.

C Menu items will be list items with titles in uppercase letters.

D Menu items will be hidden because the walker does not call parent methods.

💡 Hint

Look at how the walker modifies the output string.

The custom walker overrides start_el to output each menu item title in uppercase inside <li> tags.

🧠 Conceptual

expert

Which statement best describes WordPress menu locations and menus?

Choose the statement that correctly explains the relationship between menu locations and menus in WordPress.

A Menus define where in the theme links appear; menu locations are collections of links created by users.

B Menu locations are theme-defined placeholders; menus are user-created sets of links assigned to these locations.

C Menu locations and menus are the same; both refer to the actual list of links shown on the site.

D Menus are registered in the theme code; menu locations are created by users in the admin panel.

💡 Hint

Think about who creates menu locations and who creates menus.

The theme defines menu locations as placeholders. Users create menus and assign them to these locations to control navigation.