Learn to add more menus than your WP theme supports

May 22, 2015 10:04 GMT  ·  By
Custom menus allow users to show menus in different locations on the site
3 photos
   Custom menus allow users to show menus in different locations on the site

WordPress lets developers add as many custom menus as they want via a series of PHP functions they can add to their code. Compared to other WordPress customizations, this is quite simple and has a lot of potential if used the right way.

The ability to create custom menus is usually used by theme developers, which take advantage of it to add extra menus outside the classic navbar shown atop each site. Custom menus are often used to display menus in locations like the footer, the sidebar, on one specific page alone, above the header (for social profile toolbars), and in various other locations.

Everything is fine and dandy with one condition: that your theme supports multiple menu locations. The problem though with most themes is that they don't, coming only with one, two or three menu locations, usually in the classic places you'd expect them.

For situations where you need to add a custom menu to your WordPress theme, a series of steps exist that help you achieve this.

Step 1: Go to the “/wordpress/wp-content/themes/THEMENAME” folder, locate functions.php and open it in a source code editor.

Step 2: Add the following line of code (at the bottom of the file, so you won't break any existing code by inserting it at random):

code
function register_my_menu() {
  register_nav_menu('softpedia-test-menu',__( 'Softpedia Test Menu' ));
}

add_action( 'init', 'register_my_menu' );
You can give your menu any name you'd like.

Step 3: Knowing where you want this menu to be added, you open the appropriate file from the theme you wish to customize. In our example, we edited the 404.php file because we wanted to show a custom menu only on this page. The following line of code should be added where the menu needs to show up:

code
'softpedia-test-menu' ) ); ?>
Step 4: Go to the WordPress admin panel and access the “Appearance → Menus” section.

Step 5: Add all the menu options you want your menu to display and save the created menu. You can give it any name you want in this stage.

Step 6: At the top of the page, go to the “Manage Locations” tab and you'll see the menu created through your code appear in the list (as “Softpedia Test Menu” in our case, or the name you gave it in Step 2). To its right side, there's a dropdown list. Open and select the menu you created during Step 5 and the name you gave it there.

Press “Save Changes” and go see if the menu appears on the site. In most cases, the menu should appear as a vertical list of links. This happens because you didn't add any CSS to have it styled the way you want. This can be corrected pretty easily by editing the theme's CSS.

The above steps are for adding one menu at a time, and they can be repeated to add as many menus as you want. If you're in a hurry to add multiple menus at the same time, there's a special syntax just for that operation. You can check the instructions on the WP Codex wiki, or use the GenerateWP website to create your menu system and then have it automatically generate the code that needs to be added to the functions.php file.

Add a custom menu to your WordPress theme (3 Images)

Custom menus allow users to show menus in different locations on the site
Once a menu is created via the code and the backend, you can check it out on the site's frontendOnly two small modifications need to be done to the code for custom menus to show up on your site
Open gallery