Menus and navigation in Wordpress - Mini Project: Build & Apply

Menus and Navigation in WordPress

📖 Scenario: You are building a simple website for a local bakery using WordPress. The bakery wants a clear menu navigation bar so visitors can easily find pages like Home, About Us, Menu, and Contact.

🎯 Goal: Create a WordPress theme snippet that registers a navigation menu, adds menu items, and displays the menu in the site header.

📋 What You'll Learn

Register a navigation menu location called primary

Create a menu with the exact name Primary Menu

Add menu items: Home, About Us, Menu, and Contact

Display the registered menu in the theme header using wp_nav_menu

💡 Why This Matters

🌍 Real World

Menus and navigation are essential for any website to help visitors find content easily. WordPress themes use registered menus to let site owners customize navigation without code.

💼 Career

Knowing how to register and display menus in WordPress is a key skill for theme developers and site builders to create user-friendly websites.

1

Register the navigation menu location

In your theme's functions.php file, write code to register a navigation menu location called primary with the description 'Primary Menu' using register_nav_menus.

Wordpress

# Register the primary menu location
# Your code here

Need a hint?

Use register_nav_menus inside a function hooked to after_setup_theme.

2

Create the menu and add menu items

In the WordPress admin dashboard, create a menu named Primary Menu. Add these exact menu items with these labels: Home, About Us, Menu, and Contact. Assign this menu to the primary theme location.

Wordpress

 __('Primary Menu', 'bakery')
    ));
}
add_action('after_setup_theme', 'bakery_register_menus');

// Create the menu and add items in WordPress admin
# Your code here

Need a hint?

Use the WordPress admin under Appearance > Menus to create and assign the menu.

3

Display the menu in the theme header

In your theme's header.php file, add code to display the primary menu using the wp_nav_menu function with the argument 'theme_location' => 'primary'.

Wordpress

 __('Primary Menu', 'bakery')
    ));
}
add_action('after_setup_theme', 'bakery_register_menus');

// Display the primary menu in header.php
wp_nav_menu(array(
    'theme_location' => 'primary'
));
# Your code here

Need a hint?

Use wp_nav_menu with the theme_location argument set to primary.

4

Add accessibility and responsive features

Enhance the wp_nav_menu call in header.php by adding 'menu_id' => 'primary-menu' and 'container' => 'nav' to wrap the menu in a semantic <nav> element with the ID primary-menu. This improves accessibility and helps with styling for responsive design.

Wordpress

 __('Primary Menu', 'bakery')
    ));
}
add_action('after_setup_theme', 'bakery_register_menus');

// Menu creation and item addition done in WordPress admin dashboard

// In header.php
wp_nav_menu(array(
    'theme_location' => 'primary',
    'container' => 'nav',
    'menu_id' => 'primary-menu'
));
# Your code here

Need a hint?

Adding container and menu_id helps screen readers and CSS styling.