Update: I have switched to using Ghost as my blogging engine, but this code still works on WordPress.

I have been working on a custom theme for my WordPress website. I had the need to combine the Primary menu with the Social menu to create a Bootstrap navbar (I am creating a Bootstrap theme for WordPress). Instead of creating two separate menus, I need to merge them because I don’t want two expand buttons and I’m not sure how that would work on a navbar.

I am using the default wp_nav_menu() (link) in my theme.

Here is the code (I can’t get my blog editor to format it correctly. You can see the properly formatted code here).

<nav id="top-navbar" class="navbar navbar-default navbar-fixed-top" role="navigation">  
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="/" rel="home"> My Website </a> 
</div> 
<div class="collapse navbar-collapse" id="navbar-collapse-1"> 
    <ul class="nav navbar-nav"> 
        <?php 
        /* Show the primary menu */ 
        wp_nav_menu( 
            array( 
                'menu' => 'primary', 
                'theme_location' => 'primary', 
                'container' => false, 
                'depth' => 2, 
                'items_wrap' => '%3$s', 
                'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 
                'walker' => new wp_bootstrap_navwalker()
             ) 
        ); 
        /* Create a social menu that displays icons for social networks 
         * it is special because it needs to integrate with the existing links                
         */ 
        wp_nav_menu( 
            array( 
                'menu' => 'social', 
                'theme_location' => 'social', 
                'container' => false, 
                'depth' => 1, 
                'items_wrap' => '%3$s', 
                'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 
                'walker' => new wp_bootstrap_navwalker()
            )
        ); 
        ?> 
        </ul> 
    </div>
</nav>

Notice that I had to manually add the code for the div that has collapse navbar-collapse and the <ul> that contains the menu items since we won’t be using the built-in container from the call to wp_nav_menu().

Here is the php specific menu code:

<?php  
/* Show the primary menu */ 
wp\_nav\_menu(  
    array( 
        'menu' => 'primary', 
        'theme_location' => 'primary', 
        'container' => false, 
        'depth' => 2, 
        'items_wrap' => '%3$s', 
        'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 
        'walker' => new wp_bootstrap_navwalker()
    ) 
); 
/* Create a social menu that displays icons for social networks 
 * it is special because it needs to integrate with the existing links 
 */ 
wp\_nav\_menu(  
    array( 
        'menu' => 'social', 
        'theme_location' => 'social', 
        'container' => false, 
        'depth' => 1, 
        'items_wrap' => '%3$s', 
        'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 
        'walker' => new wp_bootstrap_navwalker()
    ) 
); 
?>

Here are the main settings that give us what we want:

• 'container' => false – prevents WordPress from wrapping your menu
• 'items_wrap' => '%3$s' – simply returns the <li> element containing the link to your item.

Note: You can leave the ‘fallback_cb’ and ‘walker’ blank to use the default walker. However, I am using the custom wp_bootstrap_navwalker  from twittem. Here is my fork that adds support for FontAwesome fonts.