How to Add Multiple Custom Menu Locations in WordPress

As WordPress websites grow more complex, a single navigation menu often becomes insufficient. This tutorial explains how to add multiple custom menu locations to your WordPress site.

Step 1: Register Custom Menu Locations

Add the following code to your theme's functions.php file.

// Register custom menu locations in WordPress
register_nav_menus(
    array(
        'head-nav' => __( 'Header Menu' ),
        'foot-nav' => __( 'Footer Menu' ),
        // Add more locations as needed:
        // 'sidebar-nav' => __( 'Sidebar Menu' ),
    )
);

Code Explanation:

• The register_nav_menus() function registers one or more navigation menu locations.
• Each key-value pair defines a location: 'location_slug' => __( 'Admin Display Name' ).
• The location slug (e.g., head-nav) is used when calling the menu in templates.
• The admin display name (e.g., "Header Menu") appears in the WordPress admin under Appearance > Menus.

Step 2: Create and Assign Menus in the Admin

After saving functions.php, refresh your WordPress admin. Navigate to Appearance > Menus.

You should now see your new "Header Menu" and "Footer Menu" locations at the top of the page or under the "Manage Locations" tab. You can now:

1. Click "Create a new menu" for each location.
2. Add pages, posts, custom links, or other items to your menus.
3. In the "Menu Settings" area, assign each created menu to its corresponding display location.

Admin Interface Overview

Once custom menu locations are registered, the menu management screen will show additional checkboxes for assigning menus to the new locations.

Step 3: Display Menus in Your Theme

To make menus appear on the front end, you must call them in your theme template files (e.g., header.php, footer.php).

Use the wp_nav_menu() function with the appropriate location slug. For example, to display the header menu in header.php:

<?php
wp_nav_menu( array(
    'theme_location' => 'head-nav', // Matches the registered slug
    'menu_class'     => 'main-navigation',
    'container'      => 'nav',
) );
?>

For more details on wp_nav_menu() parameters and advanced usage, refer to the official WordPress documentation.