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.
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.
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:
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.
Sign up for more
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.
To have links displayed in your newly made menu locations, click create a new menu at the top of the page.
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.
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.