How to register a new navigation menu in WordPress

A few months ago I shared my ultimate guide to menus in WordPress.

This post showed you how to set up a new menu and assign it to an existing location within your WordPress theme.

But did you know that it is possible to register your own menu within your theme so that you can assign a menu to it? For example, you could register a new menu that would be located within the footer of your website, and when you assign a menu to this location, the links would display in the footer.

In this post I am going to show you how to register new menus in WordPress and display them on your website.

---

How to register a new menu in WordPress

First of all you need to register your new menu in the functions.php file of your WordPress theme, so start by navigating to this file.

If you want to edit the functions.php file directly through the WordPress interface, hover over Appearance in the left-hand menu and click Editor. Then select Theme Functions (functions.php) from the right hand side of the screen.

Remember, if you are editing an existing theme, make sure you set up a child theme (either manually or using a plugin) and make the changes to the child theme files.

In the functions.php file you need to create a new function for registering your menu.

function () {

}

Now give your function a relevant name. I’m going to call mine register_menus.

function register_menus() {

}

Within the function you just created, you need to call a WordPress function that registers a new menu.

There are actually two functions you can use depending on how many menus you want to register. So, if you want to register a single menu you would use register_nav_menu and if you wanted to register multiple menus you would use register_nav_menus.

Let’s start by looking at how to register a single menu using register_nav_menu. You just need pop this function inside the curly brackets of the function you just created:

function register_menus() {
    register_nav_menu();
}

Now you need to give your register_nav_menu function a location identifier parameter. This will be used when you want to display your menu on the front-end of your website.

So, in this example my menu is going to be the main menu, so my location identifier will be main-menu. It needs to be formatted like a slug rather than a proper name like “Main Menu”.

This identifier must be placed within the parentheses and within single quotes like so:

function register_menus() { 
    register_nav_menu('main-menu'); 
}

The next parameter you need to add to the function is the description parameter. This is the actual name of the menu, and this will be displayed within the WordPress interface when you come to set up your menu. So in my example, this will be “Main Menu“.

After the location parameter, add in a comma, then two underscores, then another set of parentheses, like this:

function register_menus() { 
    register_nav_menu('main-menu',__()); 
}

Then, within the new parentheses, add in the name of your menu in single quotes. This is what mine looks like:

function register_menus() { 
    register_nav_menu('main-menu',__('Main Menu')); 
}

And that’s how you register a menu!

To run your function you need to use the add_action function. This must be placed outside of the curly brackets like this:

function register_menus() {
    register_nav_menu('main-menu',__('Main Menu'));
}
add_action();

You are going to use two parameters within this function. The first parameter tells WordPress when to call the function, and for this we are going to use init.

function register_menus() { 
    register_nav_menu('main-menu',__('Main Menu')); 
} 
add_action('init');

The second parameter tells WordPress which function to call. So, type in the name of the function you have created to register your menu. Remember, mine is called register_menus.

function register_menus() { 
    register_nav_menu('main-menu',__('Main Menu')); 
} 
add_action('init', 'register_menus');

Now this function will run when it is required by WordPress.

How to register multiple new menus in WordPress

As I previously mentioned, it is possible to register more than one menu in WordPress and to do with we use a different function; register_nav_menus. The only difference is the “s” on the end of menu!

The register_nav_menus function is set up slightly differently to the register_nav_menu.

To start, you need to use the register_nav_menus function. Don’t forget that “s” on the end!

function register_menus() { 
    register_nav_menus(); 
}

Now, within the register_nav_menus function you need to use an array.

function register_menus() { 
    register_nav_menus(
        array(
        )
    ); 
}

The first time item in your array will be the first menu that you want to register. Like when you are registering a single menu, you need to start with the location identifier. Using the main menu example again, this would be “main-menu”.

function register_menus() { 
    register_nav_menus(
        array(
            'main-menu'
        )
    ); 
}

Then you need to add the description parameter (i.e. the actual name of the menu). So after the location identifier, add in => and then type in description parameter, which in this example will be “Main Menu”. Make sure this is in single quotation marks as well.

function register_menus() {     
    register_nav_menus( 
        array( 
            'main-menu' => 'Main Menu' 
        ) 
    ); 
}

To add another menu, add a comma in after the first item in the array and then on the next line register your next menu in the same way you registered your first menu.

function register_menus() { 
    register_nav_menus(
        array(
            'main-menu' => 'Main Menu',
            'footer-menu' => 'Footer Menu'
        )
    ); 
}

And that’s how you register multiple menus in one go.

The last step in this process is to use the add_action function to call in our function when it is required by WordPress.

function register_menus() { 
    register_nav_menus(
        array(
            'main-menu' => 'Main Menu',
            'footer-menu' => 'Footer Menu',
        )
    ); 
}
add_action( 'init', 'register_menus' );

How to add items to your new WordPress menu

Once you have registered a new menu, you can start assigning items to this menu via the WordPress admin area.

To do this, hover over Appearance in the left-hand menu of WordPress and click Menus.

From here you can assign an existing menu to the menu you have just registered, or you can create a new menu. If you aren’t familiar with either of these options then I recommend checking out this post which explains the concept of menus in WordPress.

To assign your menu, existing or new, to the new menu location that you registered in the functions.php file, simply tick the box next to the name of the menu you have registered.

Of course, the items that you have added to this menu will not be displayed on the front-end of your website until you tell WordPress where you want this menu to appear. This is the next step of the process…

How to display your new menu on your website

So you’ve registered your new menu, and you’ve assigned a menu with menu items to it. Now it’s time to display it on the front-end of your website.

To do this you need to choose where you want to display the menu within your theme structure. For example, you might want to display the main menu in the header, so you would add this to the header.php file. Or, if you want to display the footer menu in the footer, you would add this to the footer.php file.

Where ever you choose to add your menu, you need to start by dropping into PHP as you are going to be using another WordPress function to call in your menu.

So, add in your opening and closing PHP tags like this:

<?php 

?>

Within these tags we are going to use a function called wp_nav_menu. This function is used to display a menu that you have registered.

<?php
    wp_nav_menu();
?>

Now, within the wp_nav_menu function we are going to use an array:

<?php 
    wp_nav_menu(
        array (
        )
    ); 
?>

There are a number of arguments we can use in our array, but the most important one is theme_location. This is how we tell WordPress that we want to display the navigation we have registered in the functions.php file.

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

Then, we’re going to add in => followed by the location identifier we gave to our menu in the functions.php file. As you may remember, we used main-menu as our location identifier for our Main Menu, so we would add this in like so:

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

Now save your file and preview your website. You should now see the menu you have assigned to your menu location in the location of your choice. It probably won’t have any styling associated with it so you will need to sprinkle some CSS magic to get this looking how you want!

As I say, theme_location is the only argument we need to use in our array to display our menu. However, there are lots of other arguments you can use to help you style and structure your menu. You can find a full list of arguments here.