WordPress Multisite global menu: create, display, customize

Let’s see how to make customisable shared menu to work across all websites of Multisite network.

Case #1: Display global menu from the main site on sub-sites

! If they are using the same theme

First, let’s create a new menu on the main site of the network.

Go to Appearance -> Menu and just do it 🙂

Mine is called Global Menu, it has 3 links – to the current website (in English) and two more, to the subsites — Spanish and Russian.

Mind, that it doesn’t have to be marked as Primary or related to any specific menu location. Just create it, and that’s it.

Now hover Delete Menu link to see menu’s ID

Now, when you have it’s ID it’s easy to ouput it anywhere in your theme.

Say, I want to do that in header, but you can place the following code anywhere you need your menu to be displayed:

switch_to_blog( '1' ); 	//switch to the main site of the network (it has ID 1)			
	wp_nav_menu( 
		['menu'            => '16', //grab menu that has ID 16 from it
		]);
restore_current_blog();	//switch back to the current site

Easy, isn’t it?

Just mind to replace ID with yours.

The result:

How we have that menu from the main site displayed on all sites of the network that are using that theme. Whenever we update it on the main site, it will be updated on all subsites as well.

Now, let’s add a bit of style?

By default menu is output as <ul> element inside <div>, and each menu item is <li>:

We can customize this by adding CSS class to the menu and style it the way we need:

switch_to_blog( '1' ); 				
	wp_nav_menu( 
		['menu'            => '16',
		'menu_class'      => 'sz-global-menu-style', 
//adding a custom class
		]);
restore_current_blog();	

Here’s the result:

Not only you can add CSS class, but ID, change the wrapper and many more. See all arguments for wp_nav_menu().

Case #2: Display shared menu from a subsite across entire network

You need to do just the same as above, but mind changing blog ID and menu ID accordingly. Say, on the subsite ID 3 you have created a menu which ID is 12. Here you go:

switch_to_blog( '3' ); 	//switch to the subsite #3			
	wp_nav_menu( 
		['menu'            => '12', //grab menu that has ID 12 from it
		]);
restore_current_blog();	//switch back to the current site

Case #3: Display menu from the main site only on specific subsites

Say you have 10 sites in your WordPress Multisite network, but you only need to display that menu on 3 of them (let’s say they are subsites 4,6 and 9).

You just need to check current site ID before displaying that menu, that’s it.

if (in_array(get_current_blog_id(), array(4,6,9))){ //do the following only on subsites 4,6 and 9
switch_to_blog( '1' ); 	//switch to the main site of the network (it has ID 1)			
	wp_nav_menu( 
		['menu'            => '16', //grab menu that has ID 16 from it
		]);
restore_current_blog();	//switch back to the current site
}

Case #4: Display combined menu from different sites across Multisite

Say, you need to combine some menu from site 5 with another menu from site 7 and display it across the network. Easy as well:

switch_to_blog( '5' ); 	//switch to the subsite #5			
	wp_nav_menu( 
		['menu'            => 'ID', //place ID here
		]);
restore_current_blog();	//switch back to the current site
switch_to_blog( '7' ); 	//switch to the subsite #7			
	wp_nav_menu( 
		['menu'            => 'ID', //place ID here
		]);
restore_current_blog();	//switch back to the current site

As this will give you raw menu without any styling, you can just assign the same class, ID, wrapper to both and make their items look just the same. Again, check out arguments for wp_nav_menu() for that.

Case #5: Display shared menu across Multisite if sites are using DIFFERENT themes

We need to do all the same, but then, we’ll have to add the code to display it in every theme that is used, in the specific place where we want it to be displayed in that theme.

This is useful when despite of the different subsites in your Multisite use different themes, you need some menu links (say, Social menu links) to be all the same on each and every site, and the menu to be managed from the main site.

In case you need the same styling as well for this navigation menu through all themes in your network, you might consider adding CSS file to the mu-plugins directory to make load everywhere in your network regardless of the theme.

Final notes:

• wp_nav_menu gives you raw output, you need to style it
• You don’t need to register a menu location. But you can, of course.
• To avoid errors before output it’s nice to check if that menu exists at all (or someone accidentally deleted it ;))
• To point to the menu you can use use slug/name/ID, for example 'menu' => 'social-links' But ID is more sustainable, of course
• In terms of SEO this can be use used to make internal link building easy.

So, the final thing might look something like: