Menus and navigation in Wordpress

Introduction

Menus help visitors find pages on your website easily. Navigation organizes links so users can move around smoothly.

You want to add a list of links at the top of your website for easy access.

You need a sidebar menu to show categories or important pages.

You want a footer menu with contact info and policies.

You want to create a dropdown menu for subpages.

You want to let site visitors quickly jump to main sections.

Syntax

Wordpress

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

theme_location links the menu to a registered spot in your theme.

menu_class adds CSS classes to style the menu.

Examples

Shows a menu registered as 'footer' with default styling.

Wordpress

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

Wraps the menu in a <div> with class 'nav-wrapper' and styles the menu with 'nav-list'.

Wordpress

<?php
wp_nav_menu(array(
  'theme_location' => 'primary',
  'menu_class' => 'nav-list',
  'container' => 'div',
  'container_class' => 'nav-wrapper'
));
?>

Displays a sidebar menu showing up to 2 levels of submenu items.

Wordpress

<?php
wp_nav_menu(array(
  'theme_location' => 'sidebar',
  'depth' => 2
));
?>

Sample Program

This code registers two menu spots: primary and footer. Then it shows the primary menu inside a <nav> element with CSS classes for styling.

Wordpress

<?php
// Register menu locations in functions.php
function mytheme_register_menus() {
  register_nav_menus(array(
    'primary' => __('Primary Menu'),
    'footer' => __('Footer Menu')
  ));
}
add_action('after_setup_theme', 'mytheme_register_menus');

// Display the primary menu in header.php
wp_nav_menu(array(
  'theme_location' => 'primary',
  'menu_class' => 'primary-menu',
  'container' => 'nav',
  'container_class' => 'primary-navigation'
));
?>

Important Notes

Always register menu locations in your theme before using them.

Menus can be managed in WordPress admin under Appearance > Menus.

Use CSS to style menus and make them responsive for mobile devices.

Summary

Menus organize links so visitors can navigate your site easily.

Use wp_nav_menu() to display menus in your theme.

Register menu locations first, then assign menus in WordPress admin.