Add custom menus to a WordPress Theme

Sometimes you want a custom or secondary menu on your WordPress site, but your current theme may not support it.  Well, fear not!  This guide will help you add more menus!

Basic Housekeeping

To create a new menu you need to edit your theme files. Before making changes to any of your core files, it’s best to backup your entire site in case something goes wrong along the way. You’ll be able to restore your site quickly and it will be as though nothing ever happened.

It’s always a good idea to do a backup before you make any changes to a WordPress theme!

Constructing a Child Theme

To create new menus with code, you need to make changes that would be lost when you update your theme. Creating a child theme takes care of this issue.

There are some plugins to help you make a child theme with one click.  Once you have set up one of these options, you’re free to start creating your extra navigation menus.

Creating New Menus

To add a selectable menu location option in your admin dashboard under Appearance > Menus you need to do what’s called “register a menu.” All it takes is adding a snippet of code to your functions.php file located in wp-content > themes > your-theme.

Head to Appearance > Editor.  In your child theme’s functions.php file, add the following bit of code

function register_my_menu() {
register_nav_menu(‘awesome-menu’,__( ‘Awesome Menu’ ));
}
add_action( ‘init’, ‘register_my_menu’ );

In this example, Awesome Menu is the name that will appear in your admin dashboard’s menu page to make it understandable for human eyes. The awesome-menu name is what WordPress will understand to execute your code properly.

You can call your menu whatever you like, but make sure only the human-readable name contains spaces and capital letters.

If you would like to add multiple menus to your site, add this code on a new line instead:

function register_my_menus() {
register_nav_menus(
array(
‘new-menu’ => __( ‘New Menu’ ),
‘another-menu’ => __( ‘Another Menu’ ),
‘an-extra-menu’ => __( ‘An Extra Menu’ )
)
);
}
add_action( ‘init’, ‘register_my_menus’ );

You can add as many new menus as you’d like with this method. The same rules will apply when naming them.

Save the changes you made to the file. Now all that’s left is adding the new menu to your site.

Adding Menu Locations to Your Theme

This is where you need to decide where you’d like to place your menu. If you’d like your menu to appear at the top of your page, you’ll need to edit the header.php file. You can also put it in your footer which means you would edit the footer.php file.

You can even display a menu on a page by editing its template file or to a sidebar, editing its sidebar.php file.

You can place your new menu where ever you’d like. Often it may go in the header.php file.  If your child theme doesn’t have this file, you may have to copy it from the parent theme.

<?php wp_nav_menu( array( theme_location => ‘aswesome-menu ) ); ?>

Just replace awesome-menu with WordPress-readable name you chose. You probably want to style your menu with CSS so it goes beyond basic functionality and also looks great. To do this, you’ll need to create a class and add it to your theme with the following code.

<?wp_nav_menu( array( theme_location => ‘awesome-menu, container_class => ‘awesome_menu_class ) ); ?>

Just like before, replace new-menu with the name you chose. In this example, I named the class I created new_menu_class. You can change this, but just be sure to update this code to reflect the adjustment.

Hit the Save button and head over to Appearance > Menus in your dashboard. You’ll notice your new menus will be listed under Theme Locations in the Menu Settings section.

The Menu Settings section.
The new registered menu items listed in the Menu Settings.

You’ll now be able to see your new menu locations listed. When you add a menu, you can select one or all of the locations.

To have links displayed in your newly made menu locations, click create a new menu at the top of the page.

The Menu page in the admin dashboard.
You can click the create a new menu link or enter a new name for your menu.

If you don’t already have a menu, you can enter a name for your menu in the field on the page, then click Create Menu. If you already have a menu previously created, you can click the create a new menu link toward the top of the page.

Once you have created a new menu, you can also manage the locations where they are displayed under the “Manage Locations” tab.

Now it is ready to be styled and used!

Leave a Reply

Your email address will not be published. Required fields are marked *