How To Add More Navigation Menus to WordPress
Let’s face it, if you are a fan of WordPress and run a blog then you can relate to this. Most WordPress themes come with maybe 2 navigation menus. Sure you can add more navigation menus to WordPress via the navigation tab in the backend.
What I am referring to is the spots in the theme to place them. Sure the usual spots always work. Header and footer normally, but what if you want to add a navigation menu with social icons in the announcement bar.
How to Add the Navigation 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 site in case something goes wrong along the way. I recommend UpdraftPlus. You’ll be able to restore your site quickly and it will be as though nothing ever happened.
I recommend that you save a copy of both your database and files in a location separate from your site to minimize the risk of losing your backup.
Best outcome: your site has great opportunity for improvement, we optimize your performance so you don’t have to worry, and you earn more happy customers.
OR
You leave the call with a better understanding of your store’s metrics and exactly where you can improve.
Either way, it’s a great deal for you!
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.
You can also choose to create a whole new theme of your own or try it out on a local or test site.
Once you have set up one of these options, you’re free to start creating your extra navigation menus. Though, if you decide to use a plugin or theme framework, you don’t need to create a child theme. Although, I recommend always using a child theme so the theme is free to be updated.
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. If you haven’t previously set your File Manager to load to your site’s document root, navigate there now.
There’s a functions.php file in your /wp-includes/ folder, but that’s not the one you need to edit. Make sure you find the functions.php file that’s found in the theme you’re using. Otherwise, you would end up with errors when trying to add the code found later on.
Locate your functions.php file and click on it once followed by clicking the Edit button at the top of the page.
Scroll to the bottom of the file. If you’d like to add only one menu, add the following code on a new line:
1 2 3 4 | function register_new_menu() { register_nav_menu(‘new-menu’,__( ‘New Menu’ )); } add_action( ‘init’, ‘register_new_menu’ ); |
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:
1 2 3 4 5 6 7 8 9 10 | function register_new_menus() { register_nav_menus( array( ‘new-menu’ => __( ‘New Menu’ ), ‘new-menu-1’ => __( New Menu 1′ ), ‘new-menu-2’ => __( ‘New Menu 2’ ) ) ); } add_action( ‘init’, ‘register_new_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. Here’s the minimum amount of code you need to add to any of these locations:
<?php wp_nav_menu( array( ‘theme_location’ => ‘new-menu’ ) ); ?>
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.
<?php wp_nav_menu( array( ‘theme_location’ => ‘new-menu’, ‘container_class’ => ‘new_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.
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. As you can see the theme I used as an example only had one navigation menu. So adding more gave me more options.
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 CSS3 Cheatsheet. It doesn’t show you how to do it, but if you know CSS it can help you style it properly.
If you would like an easier option, there are many plugins that will create responsive menus based on your theme’s styles. One of the best ones I’ve found is Max Mega Menu.
Of Course, you can always contact me for help.