How can I share a non-primary menu of a Multisite's main domain across all sub-domains in the form of tabs as links?

Question

I have a Multisite with a main domain (www.valleysgroup.co.uk) and various sub-domains (brickslipsdirect.valleysgroup.co.uk, tradeporcelain.valleysgroup.co.uk etc).

I am wanting to share a custom top bar containing a menu that is not the primary menu of the main domain, from the main domain across all the sub-domains. This menu will be simple links to each of the sub-domains, but in the form of tabs. Tab 1 will lead to brickslipsdirect.valleysgroup.co.uk, tab 2 will lead to tradeporcelain.valleysgroup.co.uk etc.

I have spent several days trying various solutions, which I then came across the plugin: Multisite Shared Menu

This works great, apart from it will only apply the primary menu from the main domain, and no other menu's. Ideally I would like to create a new menu location named Global Top Bar on the main domain and all subs, create my menu named Global Menu on the main domain, and then pull the menu into all the subs.

I am also unsure how to implement this on the main domain and sub-domains as tabs instead of a general horizontal, dropdown or list menu.

Please see image for clarity on what I am looking for looks-wise across the main domain and the subs:

Any help would be greatly appreciated!

I do a lot of multisite work and I can tell you that although it is 100% possible to share things between the sites, it is almost always an uphill battle. We are currently building a 30-site install for a university and the footer is going to be shared across all 30 sites. There are several menus in there and we _could_ try to share them, but we've opted to just store that information in HTML because it isn't really going to change that much. I don't know if that's the case for you, but I would recommend weighing that. — Chris Haas, Feb 11 '21 at 14:50
If you want to continue down this path, I would just use `switch_to_blog`, do normal WordPress menu stuff, and then call `restore_current_blog`, and not bother with a plugin. — Chris Haas, Feb 11 '21 at 14:50
Would there still be a way to fiddle with the menu to get the look of tabs though possibly with CSS? So that the tab highlights which of the sub-domains the user is on? — Dayley, Feb 11 '21 at 15:46
Absolutely. The actual layout should be pretty easy but will depend on your theme. To figure out which is the current site relative to each menu you item you can use functions such as `get_site_url` and `get_current_blog_id`. How you do this will depend on if you want to use WordPress to manage the menu or if you are just doing it in PHP. For the latter, you could just use a simple `for` loop and check if the current item is the current site using the functions I mentioned. — Chris Haas, Feb 11 '21 at 18:43

score 2 · Answer 1 · answered Feb 12 '21 at 18:32

Unfortunately I don't have too much time to spend on this, but hopefully you or someone you know can help flesh this out more.

I've added a bunch of comments that should hopefully explain most things. You just need to plug in the IDs for each site as you find in the Multisite backend. This code will kick out an unordered list with one entry per site, and the current site having a special class. You will probably want to add some additional classes but hopefully this is enough to get you somewhere at least.

// Just the Site IDs from WordPress
$siteIds = [2, 3, 4];

// This will hold <li> tags for each
$menuItems = [];
foreach ($siteIds as $siteId) {

    // Get the WordPress WP_Site object
    $site = get_site($siteId);

    // Sanity check that it was found and public
    if (!$site || !$site->public) {
        continue;
    }

    // Optional attributes classes on the <li>, default none
    $extraAttributes = '';

    // For the current site, add a class
    if ($siteId === get_current_blog_id()) {
        $extraAttributes = ' class="current-site"';
    }

    // Append an HTML node
    $menuItems[] = sprintf(
        '<li %3$s><a href="%2$s">%1$s</a></li>',
        esc_html($site->blogname),
        esc_attr($site->siteurl),
        $extraAttributes
    );
}

// Make sure the above worked
if ($menuItems) {
    // Output wrapped
    echo '<ul>' . implode('', $menuItems) . '</ul>';
}

If I am correct this would add the sub-domains names in, but preferably I would like to use a menu from my domain where the names of the links are fully custom. — Dayley, Feb 16 '21 at 10:34

Dayley · Accepted Answer · 2021-02-17T09:48:26.090

I have now gone ahead and added my new menu location named Global Top Bar using the following in my main domains Child Theme > Functions.php file:

function register_new_menu_location() {
   register_nav_menu('global-menu-location',__( 'Global Top Bar' ));
}
add_action( 'init', 'register_new_menu_location' );

I have also created my menu named Global Menu and marked for it to display in the newly made location.

I have then gone into my Child Theme > Header.php file and added the following which seem to work:

switch_to_blog(1);
wp_nav_menu( array(
    'menu' => '16',
    'container_class' => 'GlobalMenuContainerClass',
    'menu_class' => 'GlobalMenuClass'
) );
restore_current_blog();

Menu '16' being my menu's ID found on my main domain. This displays the menu on all sub-domains like this:

I Added some CSS to spice it up a little and make it look more like tabs using the following CSS code:

.GlobalMenuContainerClass {
  height: 45px;
  padding-top: 8px;
  padding-right: 100px;
  padding-left: 100px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  background: #cc2325;
}

.GlobalMenuClass {
  list-style: none;
  margin: 0;
  padding: 0;
}

.GlobalMenuClass li a {
  text-decoration: none;
  float: left;
  margin-right: 5px;
  color: white;
  border: 1px solid #777777;
  padding: 5px 10px 5px 10px;
  min-width: 100px;
  text-align: center;
  display: block;
  background: #777777;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.GlobalMenuClass li a:hover:not(.active) {
  background: #4e4e4e;
  border: 1px solid #4e4e4e;
}

.active {
  background: white;
  color: black;
  border: 1px solid white;
}

And here is how it now looks:

You can see there is a different hover colour for the tabs of a darker grey, but I have not yet implemented the .active tab CSS yet. Not quite sure how I am going to do this yet.

Hope this can help others in a similar situation.

How can I share a non-primary menu of a Multisite's main domain across all sub-domains in the form of tabs as links?

2 Answers2