Merging two menus in a custom WordPress theme

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.