How can I style the front end admin bar differently for each site on a multisite?

How can I style the front end admin bar differently for each site on a multisite?

  • Adam Czajczyk

    Hello David,

    I hope you're well today and thank you for your question!

    The front-end admin toolbar can be styled by adding custom CSS either to theme's style.css file (preferably to child-theme style.css file) or via a plugin such as e.g. Simple Custom CSS or our own Ultimate Branding.

    To apply separate styles to admin toolbar on different sub-sites of you Multisite WordPress you may want to take a different approach though and add CSS rules to WP header via a hook used as MU (Must Use) plugin.

    Take a look at this code please:

    function wpmu_adminbar_styles_multisite() {
    	// first let's find out current blog ID
    	$blog_id = get_current_blog_id();	
    	// now apply styles depending on this ID
    	switch ($blog_id) {
    		case 1:
    			<style type="text/css">
    				#wpadminbar .quicklinks a {font-weight:bold;}
    		case 2:
    			/* add other styles for individual blogs the same way as above */
    add_action('wp_head', 'wpmu_adminbar_styles_multisite');

    The number after word "case" are IDs of sub-sites (and "1" is always main site). The "HERE GOES DEFAULT STYLE" should be replaced with a style block that will be used as default in case sub-site of particular ID isn't supported by the code. You'll therefore want to adjust this code to your needs.

    To apply it to your site follow these steps:

    1. adjust the code to your needs (add "case... break;" block including custom styles)
    2. create an empty file with a .php extension
    3. paste the code there
    4. upload the file to the "/wp-content/mu-plugins" folder via FTP or cPanel File Manager

    If there's no "mu-plugins" folder inside "wp-content" folder, please create it.

    I hope that helps!
    Best regards,

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.