How to Add More Navigation Menus to your WordPress Theme

Sometimes you may find an awesome theme only to realize it would be great if it had an extra navigation menu with important or frequently used links to increase the usability of your WordPress site.

With just a little bit of coding you could have the foundation of your new menu set up quickly, and ready for you to style to match your theme.

If you would rather not mess around with code, there are many plugins that can do the heavy lifting for you, and also provide styling options.

No matter which option you choose, the guide below will help you make it happen.

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.

You can manually backup your site via FTP or using a plugin, such as our very own Snapshot or something like BackWPup. Just be sure you save a copy of both your database and files in a location separate to your site to minimize the risk of losing your backup.

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.

In cPanel, click on the File Manager icon in the Files section on the homepage. It will appear if you haven’t previously disabled the directory selection pop-up.

Choose the Web Root radio button or you can specifically choose the site you wish to edit by selecting Document Root on the list.

After selecting the "File Manager" icon on the cPanel home page, a pop up appeared and a selection has been made for the document root of a specific site.
If you manage many sites from a single cPanel account, selecting the site you want to edit from the “Document Root” option in the directory selection can save you a bit of time navigating through your files.

Locate your functions.php file and click on it once followed by clicking the Edit button at the top of the page.

If a pop-up opens, simply click the Edit button at the bottom, right-hand side. You may not see one if you have previously disabled it.

Scroll to the bottom of the file. If you’d like to add only one menu, add the following code on a new line:

In this example, New Menu is the name that will appear in your admin dashboard’s menu page to make it understandable for human eyes. The new-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:

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. Here’s the minimum amount of code you need to add to any of these locations:

Just replace new-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.

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 newly created menus are now visibly listed under "Menu Settings" in the dashboard under Appearance > Menus.
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 "create a new menu" link at the top of the "Menus" page under "Appearance" in the dashboard.
Once you have created a new menu, you can also manage the locations where they are displayed under the “Manage Locations” tab.

Styling, Plugins and Responsive Menus

Your new menu is now ready to be styled using CSS. The coding required is specific to the theme you’re using so I won’t go into it in this post, but we do have another post you can check out for that called How to Create an Awesome Responsive Menu for Your WordPress Theme. It also shows you how to create responsive menus that are mobile-ready.

If you would like an easier option, there are many plugins that will create responsive menus based on your theme’s styles. The best ones I found were Responsive Menu and Suppamenu Lite.

Some notable mentions you may also find helpful are ShiftNav, WP Responsive Menu and Max Mega Menu.

You now have the solid foundation you need to create additional menus for your theme and resources to help you go further.

What kind of menus would you like to create? Feel free to share them in the comments below.

15 Responses

    HunterGatherer

    Great information. But I have some questions:

    Do you have to repeat this process whenever the theme gets updated? Shouldn’t the first direction be to create a child theme, and do this in the functions.php file for the child? And, will these changes be executed properly in the child theme, when the parent gets updated?

    Thanks for the info and code.

    HG

    Rahul

    Hi Jenni !

    Thanks for this useful post. To be very frank, I was looking for such useful resources as being a non-coder it was impossible for me to add some extra navigation menu to my theme.

    This post not only help me to know that it can also be done easily using WordPress plugins but also helped me to try some basic coding.

    However, I would further like to know how to edit menu text sizes to be suitably customized in navigation bar ?

    Waiting eagerly for your response.

      Jenni McKinnon

      Hey Rahul,

      I definitely know what you mean. It can be tricky if you’re not familiar with coding.

      You can format the style of the text using CSS which will be located in your theme’s style.css file. If you would prefer not to code, then the plugins I mentioned are your best bet. :)

      Cheers,

      Jenni

    Jessica

    Hi! This is exactly what I needed :) However, whenever I added a functions.php and a header.php to my child theme, my site wouldn’t come up.

    What I did was copy the parent functions.php and header.php and added in the code like you said. I uploaded those new files to my child theme, and that’s when it broke. The code works perfectly in the parent theme. Thoughts?

    Thanks for any help! And thank you for this wonderful tutorial!

      Jenni McKinnon

      Hey Jessica,

      I’m sorry to hear it didn’t work for you! Without seeing the files, it’s difficult to assess exactly what’s going on, but I can give you a few suggestions:

      1. Make sure you re-upload the files in the same folder you downloaded them from. If you place them in the wrong folder, it will break your site.

      2. Make sure your code in the functions.php file is separated like a whole paragraph. There should be a whole line that’s blank in between the snippets of code.

      3. If you placed code after a line that looks like this in functions.php, place it before that line:
      ?>

      4. Restore your site from a backup and try again. It may be helpful to edit the files directly in your control panel as suggested in this post.

      Let me know if any of that is helpful to you or if you need more suggestions.

      Good luck,

      Jenni McKinnon

          Jenni McKinnon

          Hey again Jessica,

          The fact that it works in your parent theme is a great sign. The reason why it doesn’t work in your child theme is because the functions are already included in the parent theme. Having the file in both will cause errors since the functions will be redundant. You only need to include the functions.php file in the parent theme only. The only file in that’s not included in the child theme is style.css.

          To implement the new changes in the child theme just start with a blank functions.php file in your child theme folder and add the extra code to it as needed such as the ones suggested in this article.

          WordPress will check the parent functions.php file first, then the child theme’s version to add the extra functions needed to display the changes you’d like.

          Hope that helps! If you have anymore questions, just let me know. :)

          Cheers,

          Jenni McKinnon

            Jessica

            Ah! That makes sense! And it WORKS now :) Thank you so much for your time and your help, Jenni!

    Julius

    This is really awesome and everything works; however, I can’t get the menu to display in the correct location. The main-menu is the location I would like to place my primary menu unfortunately, I can’t find how to do this. I have searched the functions.php and the header.php to change the “main-menu” location to the primary menu rather than the main menu.

    Can anyone make sense of this to me?

      Jenni McKinnon

      Hey Julius,

      If you just want to replace your current header menu with your new one, you don’t need to do extra coding. Go into your admin dashboard > Appearance > Menus. Click the “Manage Locations” tab at the top and beside “Primary Menu,” select your new menu from the drop down list, then click “Save Changes” at the bottom. That should do the trick.

      Hopefully that answers the question you’re asking. If not, let me know and I’ll try again. :)

      Cheers,

      Jenni McKinnon

    Stephane

    Hi Jenni.
    I am not a designer / developer. I use the Divi theme to build (or try to) my own site, amourdesthes.com
    I wish to have a secondary header menu to list all my product categories. So my, the only solution is to separately insert a menu on every page. I would rather use your solution. However, I cannot complete the menu location part. I would also like the secondary header menu to be sticky and reduce upon scrolling, like the main header menu does. Can you help me?
    Thanks
    Cheers
    Steph