WordPress Multisite global menu tips: create, display, customize

You’ve created a navigation menu on the main site. Let’s see how to make it work across all websites of the network.

How to make sub-sites which use the same theme inherit navigation menu from the main site?

I’ll use Twenty Seventeen Theme  as an example, but this can be done for any other theme and any other template file as well.
Here is the default footer.php content

<!--?php 
/** * The template for displaying the footer * * Contains the closing of the #content div and all content after. * * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials * * @package WordPress * @subpackage Twenty_Seventeen * @since 1.0 * @version 1.2 */ ?-->
<!-- #content -->

<footer id="colophon" class="site-footer" role="contentinfo">
<div class="wrap"><!--?php get_template_part( 'template-parts/footer/footer', 'widgets' ); 
                    if ( has_nav_menu( 'social' ) ) : ?-->

<nav class="social-navigation" role="navigation" aria-label="&lt;?php esc_attr_e( 'Footer Social Links Menu', 'twentyseventeen' ); ?&gt;"><!--?php wp_nav_menu( array( 'theme_location' =--> 'social',
'menu_class' =&gt; 'social-links-menu',
'depth' =&gt; 1,
'link_before' =&gt; '<span class="screen-reader-text">',
'link_after' =&gt; '</span>' . twentyseventeen_get_svg( array( 'icon' =&gt; 'chain' ) ),
)
);
?&gt;</nav><!-- .social-navigation -->
<!--?php endif; 
                    get_template_part( 'template-parts/footer/site', 'info' ); ?-->

</div>
<!-- .wrap -->

</footer><!-- #colophon -->
<!-- .site-content-contain -->
<!-- #page -->
<!--?php wp_footer(); ?-->

Currently if ( has_nav_menu( 'social' ) ) : is looking for the navigation menu in the current site. To make it look for the menu in the main site all we need to do is to point WordPress to that site. We’ll do that using switch_to_blog(); function.

//Get $blog_id to remember where we currently are
global $blog_id;
$current_blog_id = $blog_id;
//switch to the main site which has id of 1
switch_to_blog(1);
//Nothing new here: we are just outputting navigation menu (from main blog now)
if ( has_nav_menu( 'social' ) ) :
?&gt;

<nav class="social-navigation" role="navigation" aria-label="&lt;?php esc_attr_e( 'Footer Social Links Menu', 'twentyseventeen' ); ?&gt;"><!--?php wp_nav_menu( array( 'theme_location' =--> 'social',
'menu_class' =&gt; 'social-links-menu',
'depth' =&gt; 1,
'link_before' =&gt; '<span class="screen-reader-text">',
'link_after' =&gt; '</span>' . twentyseventeen_get_svg( array( 'icon' =&gt; 'chain' ) ),
)
);
?&gt;</nav><!-- .social-navigation -->
<!--?php
				endif;
//switch back to the current blog
switch_to_blog($current_blog_id); 

Make navigation menu displayed on the sub-sites even if they use the theme different from the main site

This is how you can get the navigation menu from the main site displayed in any place of any theme of your network

https://gist.github.com/sabrina-zeidan/15e8de09f0384218009fc46f7a109f77
Just keep in mind this will give you raw menu from database without any styling, you’ll have to add styles to your style.css of the current theme. In case you need the same styling 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 the theme.

Make the combination of navigation menus from different sites of the network

Actually, you can get navigation menu from any sub-site of the network just replacing 1 with ID of that very blog in switch_to_blog(1); line. You can put them together and make really aggregated navigation menu.

<ul>
 	<li style="list-style-type: none;">
<ul><!-- Get Info navigation menu  from current site --></ul>
</li>
</ul>
<ul>
 	<li style="list-style-type: none;">
<ul>
 	<li><!--?php wp_nav_menu('menu=Info'); ?--></li>
</ul>
</li>
</ul>
<!-- Get Communication menu from the site 5-->
<ul>
 	<li style="list-style-type: none;">
<ul>
 	<li><!--?php 				  
				switch_to_blog( '5' ); 
				wp_nav_menu('menu=Communication'); 
				restore_current_blog();	
			?--></li>
</ul>
</li>
</ul>
<!-- Get News navigation menu from the site 8 -->
<ul>
 	<li style="list-style-type: none;">
<ul>
 	<li><!--?php 				  
				switch_to_blog( '8' ); 
				wp_nav_menu('menu=Services'); 
				restore_current_blog();	
			?--></li>
</ul>
</li>
</ul>
<!-- Get Services navigation menu from the main site -->
<ul id="big-combined-menu">
 	<li><!--?php 				  
				switch_to_blog( '1' ); 
				wp_nav_menu('menu=Services'); 
				restore_current_blog();	
			?--></li>
</ul>

WordPress Multisite global menu is a short way to make a strong connection between sites in your network which may become an effective internal link building tool as well.

WordPress Multisite global menu tips: create, display, customize
Share this stuff:

3 Replies to “WordPress Multisite global menu tips: create, display, customize”

  1. 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. //switch back to the current blog
    switch_to_blog($current_blog_id);

    use restore_current_blog()

Leave a Reply

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