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.

Practice

1. What is the main purpose of using menus in a WordPress site?

easy

A. To add images to the website header

B. To create blog posts automatically

C. To organize links so visitors can navigate the site easily

D. To change the website's background color

Solution

1. Step 1: Understand the role of menus

   Menus group links to help users find pages and sections on the site.

2. Step 2: Compare options to menu purpose

   Only organizing links for easy navigation matches the menu's purpose.

3. Final Answer:

   To organize links so visitors can navigate the site easily -> Option C

4. Quick Check:

   Menus = Organize links for navigation [OK]

Hint: Menus help visitors find pages easily [OK]

Common Mistakes:

• Thinking menus add images or change colors
• Confusing menus with blog post creation

2. Which of the following is the correct way to display a registered menu in a WordPress theme?

easy

A. register_nav_menu('primary', 'Primary Menu');

B. wp_nav_menu(array('theme_location' => 'primary'));

C. add_menu_location('primary');

D. show_menu('primary');

Solution

1. Step 1: Identify function to display menu

   wp_nav_menu() is used to show menus in themes.

2. Step 2: Check correct syntax for displaying menu

   Passing array('theme_location' => 'primary') tells WordPress which menu to show.

3. Final Answer:

   wp_nav_menu(array('theme_location' => 'primary')); -> Option B

4. Quick Check:

   Display menu = wp_nav_menu() with theme_location [OK]

Hint: Use wp_nav_menu() with theme_location to show menus [OK]

Common Mistakes:

• Using register_nav_menu() to display menus instead of register
• Trying to use non-existent functions like add_menu_location or show_menu

3. Given this code in a WordPress theme:

wp_nav_menu(array('theme_location' => 'footer'));

What will happen if no menu is assigned to the 'footer' location?

medium

A. Nothing will display, no menu shown

B. An error message will appear on the site

C. The menu will display all pages by default

D. The site will crash with a fatal error

Solution

1. Step 1: Understand wp_nav_menu behavior without assigned menu

   If no menu is assigned to the location, WordPress shows nothing by default.

2. Step 2: Check if errors or fallback occur

   By default, no error or crash happens; the menu area is empty.

3. Final Answer:

   Nothing will display, no menu shown -> Option A

4. Quick Check:

   No assigned menu = no output, no error [OK]

Hint: No menu assigned means no menu output [OK]

Common Mistakes:

• Expecting default page list to show automatically
• Thinking WordPress throws errors or crashes

4. You added this code to your theme's functions.php:

register_nav_menu('header-menu', 'Header Menu');

But the menu does not appear in the WordPress admin under Appearance > Menus > Manage Locations. What is the likely problem?

medium

A. The code must be inside a function hooked to after_setup_theme

B. You need to flush permalinks to see the menu location

C. You forgot to call register_nav_menus() instead of register_nav_menu()

D. Menus only appear if you create a menu first

Solution

1. Step 1: Understand when to register menus

   Menu registration code should run during theme setup, typically hooked to after_setup_theme.

2. Step 2: Check if code runs too early

   Placing register_nav_menu() directly in functions.php without hook may run too early, so WordPress doesn't register it properly.

3. Final Answer:

   The code must be inside a function hooked to after_setup_theme -> Option A

4. Quick Check:

   Register menus inside after_setup_theme hook [OK]

Hint: Hook menu registration to after_setup_theme [OK]

Common Mistakes:

• Using register_nav_menus() instead of register_nav_menu() is not required for one menu
• Flushing permalinks does not affect menu registration
• Assuming menus appear without registering locations

5. You want to create two menu locations in your theme: one for the header and one for the footer. Which code correctly registers both menus and displays them in the theme?

hard

A. function register_my_menus() {
register_nav_menu('header', 'Header Menu');
register_nav_menu('footer', 'Footer Menu');
}
add_action('init', 'register_my_menus');

// In header.php
wp_nav_menu(array('theme_location' => 'header'));

// In footer.php
wp_nav_menu(array('theme_location' => 'footer'));

B. register_nav_menus(array(
'header' => 'Header Menu',
'footer' => 'Footer Menu'
));

// In header.php
wp_nav_menu('header');

// In footer.php
wp_nav_menu('footer');

C. function register_my_menus() {
register_nav_menus(array(
'header' => 'Header Menu',
'footer' => 'Footer Menu'
));
}
add_action('init', 'register_my_menus');

// In header.php
wp_nav_menu(array('theme_location' => 'header'));

// In footer.php
wp_nav_menu(array('theme_location' => 'footer'));

D. function register_my_menus() {
register_nav_menus(array(
'header' => 'Header Menu',
'footer' => 'Footer Menu'
));
}
add_action('after_setup_theme', 'register_my_menus');

// In header.php
wp_nav_menu(array('theme_location' => 'header'));

// In footer.php
wp_nav_menu(array('theme_location' => 'footer'));

Solution

1. Step 1: Register multiple menus correctly

   Use register_nav_menus() with an array of locations inside a function hooked to after_setup_theme.

2. Step 2: Display menus with correct syntax

   Use wp_nav_menu() with theme_location keys matching registered locations.

3. Step 3: Check each option for correctness

   function register_my_menus() {
     register_nav_menus(array(
       'header' => 'Header Menu',
       'footer' => 'Footer Menu'
     ));
   }
   add_action('after_setup_theme', 'register_my_menus');
   
   // In header.php
   wp_nav_menu(array('theme_location' => 'header'));
   
   // In footer.php
   wp_nav_menu(array('theme_location' => 'footer'));

   correctly hooks registration to after_setup_theme, uses register_nav_menus(), and displays menus properly.

4. Final Answer:

   Option D code correctly registers and displays both menus -> Option D

5. Quick Check:

   Multiple menus = register_nav_menus + after_setup_theme + wp_nav_menu(theme_location) [OK]

Hint: Use register_nav_menus with after_setup_theme hook [OK]

Common Mistakes:

• Not hooking registration to after_setup_theme
• Using wp_nav_menu() without theme_location array
• Hooking registration to wrong action like init