Performance and Multisite help — book a call with me via my Expert page on Clarity, I use this service for calls.

WordPress Multisite Menu: create, display, and customize

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

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

Note! This is how-to make WordPress Multisite global menu for the cases when all subsites 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 🙂

WordPress Multisite Menu: create, display, and customize

Mine is called Global Menu, it has 3 links — to the 3 pages of the current (main) site of the network.

Another example is with Site Editor:

Navigation menu in WordPress using Site Editor

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, you need to find out this Menu ID:

  • For Classic Editor: just hover Delete Menu link to see menu’s ID
    How to find Menu ID in WordPress admin
  • For Site Editor there is a hack (?) but it’s the only easy way I know: navigate to your.site/wp-admin/edit.php?post_type=wp_navigation — there all menus will be listed, find yours and find its ID the same way — by hovering over Edit or Trash link.
    How to find Menu ID in WordPress admin foro the Site Editor or Block based theme

Cool! Now, when you have its ID it’s easy to output it anywhere in your theme, across the network.

Say, I want to do that in the 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 replacing 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.

Also, 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 outputed as <ul> element inside <div>, and each menu item is <li>:

Standard output of the wp_nav_menu on WordPress front-end

We can customize the look of all these 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:

Output of wp_nav_menu with custom class added

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 a shared WordPress menu from a subsite across the 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 of Multisite network 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 WordPress 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:


image iof tied ropes, presumably, showing the tight connection built between sites in  WordPress Multisite network by global or shared menu

13 responses to “WordPress Multisite Menu: create, display, and customize”

  1. Renzo Castillo Avatar

    Thank you as t sounds useful
    I have top menu and footer menu that I need to use in 40 subsites. Basically I want to have them at the main site and then use them in every subsite. I didn’t understand very much how do you make that assignation to either main menu or top menu or any other menu location.

    Thanks and great post!

  2. Renzo Castillo Avatar

    Thank you as t sounds useful
    I have top menu and footer menu that I need to use in 40 subsites. Basically I want to have them at the main site and then use them in every subsite. I didn’t understand very much how do you make that assignation to either main menu or top menu or any other menu location.

    Thanks and great post!

  3. anonymous wordpres user Avatar
    anonymous wordpres user

    //switch back to the current blog
    switch_to_blog($current_blog_id);

    use restore_current_blog()

    1. sz Avatar
      sz

      you can safely use either here

  4. anonymous wordpres user Avatar
    anonymous wordpres user

    //switch back to the current blog
    switch_to_blog($current_blog_id);

    use restore_current_blog()

    1. sz Avatar
      sz

      you can safely use either here

  5. Michail Angelos Avatar
    Michail Angelos

    #1 switch_to_blog( ‘1’ );
    #2 extra code
    #3 restore_current_blog();

    Thank you Sabrina it worked very well!!

  6. Michail Angelos Avatar
    Michail Angelos

    #1 switch_to_blog( ‘1’ );
    #2 extra code
    #3 restore_current_blog();

    Thank you Sabrina it worked very well!!

  7. Javier Avatar

    Could you please tell me where shall i place this code at? .
    Is there a non core file where should it be placed , i imagine that this should be put at a child theme , but where , and does it run for all sites in the multisite , i have cloned my main site and they share same menus names ….

    1. sz Avatar

      Javier, yes, this should go in the child theme. Depending on where you want it to appear and depending on the parent theme you use — it might go to one of the template files (say, header.php) or can go into funcitons.php and hooked into one of the hooks the parent them provide, for example, for Astra theme that would be astra_header_after.

  8. Ralph Avatar

    Hi Sabrina,

    I’m using Divi Theme on my WordPress multisite and I copied the code to the header section of a subsite for testing. I replace your menu ID with mine

    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

    Now i got the following error, when pasting it:

    special characters must be escaped : [ > ].

    Do you have any idea how to solve this?

    Regards, Ralph

  9. Ralph Avatar

    Sorry, I missed to tell you in which row the error is showing up:

    [‘menu’ => ‘e2226ec53d’, //grab menu that has ID e2226ec53d from it

    Regards, Ralph

    1. sz Avatar

      Ralph, I think this is Divi’s internal ID, we need the one that is saved in WordPress (should be digits only). If you go to yoursite.com/wp-admin/nav-menus.php — you might be able to see it (see the Full Site Editor hack above, I’ve updated it just now).

Leave a Reply to sz Cancel reply

Your email address will not be published. Required fields are marked *