Menus and navigation in Wordpress - Step-by-Step Execution

Concept Flow - Menus and navigation

Define Menu in Admin

↓

Assign Menu to Location

↓

Theme Calls wp_nav_menu()

↓

WordPress Builds Menu HTML

↓

Menu Displays on Site

This flow shows how WordPress menus are created in the admin, assigned to theme locations, and then rendered on the site.

Execution Sample

Wordpress

<?php
wp_nav_menu(array(
  'theme_location' => 'primary',
  'menu_class' => 'main-menu'
));
?>

This code calls WordPress to display the menu assigned to the 'primary' location with a CSS class 'main-menu'.

Execution Table

Step	Action	Input/Parameter	Result	Output
1	Admin creates menu	Menu name: 'Main Menu', Items: Home, About, Contact	Menu saved in database	Menu stored with items
2	Assign menu to location	Location: 'primary', Menu: 'Main Menu'	Theme location linked to menu	Theme knows which menu to show
3	Theme calls wp_nav_menu()	'theme_location' => 'primary'	WordPress looks up menu for 'primary'	Menu object retrieved
4	WordPress builds HTML	Menu items: Home, About, Contact	HTML list created with links	<ul class="main-menu"><li>Home</li><li>About</li><li>Contact</li></ul>
5	Menu displays on site	HTML output	Browser renders menu	Visible navigation menu on page
6	Exit	No more steps	Process complete	Menu fully rendered and interactive

💡 Menu is fully rendered and displayed on the site after step 5

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
Menu Object	null	Created with items	Assigned to 'primary' location	Retrieved by wp_nav_menu()	HTML generated	HTML output ready
Theme Location	null	null	Set to 'Main Menu'	Used to find menu	null	null

Key Moments - 3 Insights

Why does the menu not show if I create it but don't assign it to a location?

Because wp_nav_menu() looks for a menu assigned to the specified theme location. Without assignment, WordPress finds nothing to display (see execution_table step 3).

What happens if I call wp_nav_menu() with a location that has no menu assigned?

WordPress outputs nothing or a fallback message because no menu is linked to that location (see execution_table step 3 and 4).

How does WordPress know which menu items to show?

It retrieves the menu object assigned to the location and builds HTML from its items (see execution_table step 4).

Visual Quiz - 3 Questions

Look at the execution table, at which step does WordPress generate the HTML for the menu?

A Step 2

B Step 4

C Step 1

D Step 5

💡 Hint

Check the 'Result' column for HTML creation in the execution_table.

According to the variable tracker, what is the state of the 'Menu Object' after step 2?

A HTML output ready

B Created with items

C Assigned to 'primary' location

D Retrieved by wp_nav_menu()

💡 Hint

Look at the 'Menu Object' row under 'After Step 2' in variable_tracker.

If you skip assigning a menu to a location, what will wp_nav_menu() output according to the execution flow?

A Nothing or fallback message

B Menu HTML with default items

C Error message

D All menus on the site

💡 Hint

Refer to key_moments about what happens when no menu is assigned to a location.

Concept Snapshot

WordPress Menus and Navigation:
- Create menus in admin with items.
- Assign menus to theme locations.
- Use wp_nav_menu() in theme to display.
- WordPress builds HTML list from menu items.
- Menu appears on site where called.
- No assignment means no menu output.

Full Transcript

This visual execution trace shows how WordPress menus work. First, you create a menu in the admin area and add items like Home or About. Then you assign this menu to a theme location such as 'primary'. The theme calls the function wp_nav_menu() with that location. WordPress looks up the menu assigned to 'primary', builds the HTML list of links, and outputs it. The browser then shows the navigation menu on the site. If you create a menu but don't assign it, wp_nav_menu() finds nothing and shows no menu. This step-by-step flow helps beginners see how menus are connected from admin to site display.

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