WordPress : how to add more menus

Some themes have support for only one (1) menu others themes have no support at all … here how to add more menus to your theme.

If WordPress appearance->menus shows message like :
your theme supports 1 menu
…or…
This current theme does not natively support menus…

wordpress messages theme does not natively support menus.

In those cases you can add manually more menus to your theme.

#1 Theme Functions (functions.php)

You have to select in admin sidebar :
apparence->Editor” and look at file with function “register_nav_menus

wordpress editor apparence
wordpress editor apparence

Edit file functions.php :

/* #######################################################################
 Register Menus
 ####################################################################### */

register_nav_menus( array(
 'primary' => 'Main Menu'
 ) );

Add nenu ‘secondary’ => ‘Menu 2’ :

register_nav_menus( array(
 'primary' => 'Main Menu',
 'secondary' => 'Menu 2'
 ) );

#2 Header (header.php)

You have to select in admin sidebar :
apparence->Editor” and look at file with this function “wp_nav_menu

wordpress editor apparence
wordpress editor apparence

Edit header.php :

<nav>
 <?php wp_nav_menu( array( 'theme_location' => 'primary', 
                   'container' => false, 'menu_id' => false, 'menu_class' => false ) ); ?>
</nav><!-- /nav -->

Add nenu :

<nav>
  <?php wp_nav_menu( array( 'theme_location' => 'primary', 
                      'container' => false, 'menu_id' => false, 'menu_class' => false) ); ?>
  <?php wp_nav_menu( array( 'theme_location' => 'secondary', 
                       'container' => false, 'menu_id' => false, 'menu_class' => false ) ); ?>
</nav><!-- /nav -->

After that you have  in your wordpress theme (under “apparence“->”menus“) :

support for two menus
support for two menus

#3 Adjust result based on your theme

In my case I had to modify the CSS and header.php because the second menu was incorrectly positioned : each menu was disposed on a new line.
In order to identify where to play you can use FireFox with firebug (http://getfirebug.com/) in order to figure out what you need to change. Useful function of firebug is “document inspector” (http://getfirebug.com/dom) : you can try to change on the fly CSS styles and look at result.

Please note that modifying source and CCS of your  theme you could break compatibility with the browsers, mobile devices… so please double check first to proceed.

FireFox Firebug
FireFox Firebug

You can also used FireFox native developer tool :

need inline
need inline

In order to display  the two menus inline two methods (bellow).

#3.a Method 1 use div

Edit header.php :

<nav>
<div style="float: left;padding-left: 20px;">
    <?php wp_nav_menu( array( 'theme_location' => 'primary', 
      'container' => false, 'menu_id' => false, 'menu_class' => false ) ); ?>
</div>    
<div style="float: left;padding-left: 20px;">
    <?php wp_nav_menu( array( 'theme_location' => 'secondary', 
      'container' => false, 'menu_id' => false, 'menu_class' => false ) ); ?>
</div>
</nav><!-- /nav -->

#3.a Method 2 us table and CSS

Edit header.php :
added <table> tag in order to have menù inline.

<nav>
 <table><tr><td>
    <?php wp_nav_menu( array( 'theme_location' => 'primary', 
      'container' => false, 'menu_id' => false, 'menu_class' => false ) ); ?>            
 </td><td>
   <?php wp_nav_menu( array( 'theme_location' => 'secondary', 
     'container' => false, 'menu_id' => false, 'menu_class' => false ) ); ?>
 </td></tr></table>
</nav><!-- /nav -->

modify CSS (In theme options)

Custom CSS block
Custom CSS block
header nav table tr td {
 background-color: #bebcb1;
 padding-left: 35px;
 padding-right: 35px;
 padding-top: 0px;
 padding-bottom: 0px;
}
header nav {
 float: right;
 padding: 0px 0px 0px;
}