Author: Ipstenu (Mika Epstein)

In September, WordPress.com changed their admin bar from the normal black or blue to a rainbow color. Why?

Australia will be holding a national survey on marriage equality over the next two months. To show our support as a company for marriage equality, we’re showing the rainbow bar in the WordPress.com admin bar to all logged-in Australian visitors. You can read more about the marriage equality campaign here: http://www.equalitycampaign.org.au/

And this was super cool. They’d done it before when Gay Marriage was legalized in the US and it’s much appreciated as a show of solidarity. But… The menu bar only shows if you’re visiting WordPress.com from Australia. This causes two problems for me:

1) I’m in the US
2) I self host

Don’t worry, there’s a solution.

The ‘Official’ Solution

The code for what WordPress.com does can be found on the Github repository for Calypso. But that’s all mixed in with a lot of extra ‘stuff’ that has to be there for their services, like geo-location and so on.

The rest of us don’t need that, and since Gary (the fellow who wrote the ticket) is a friend of mine, I asked him if the code was available. It is.

Rainbow Bar Code

<?php

/*
 * Plugin Name: Rainbow Bar!
 */

function rainbow_bar() {
?>
	<style type="text/css">
		#wpadminbar {
			background: linear-gradient(
				to bottom,
				#e24c3e 0%,
				#e24c3e 16.66667%,
				#f47d3b 16.66667%,
				#f47d3b 33.33333%,
				#fdb813 33.33333%,
				#fdb813 50%,
				#74bb5d 50%,
				#74bb5d 66.66667%,
				#38a6d7 66.66667%,
				#38a6d7 83.33333%,
				#8c7ab8 83.33333%,
				#8c7ab8 100% );
		}

		#wpadminbar,
		#wpadminbar .quicklinks > ul > li {
			-webkit-box-shadow: unset;
			-moz-box-shadow: unset;
			box-shadow: unset;
		}

		#wpadminbar .ab-top-menu > li > a {
			background-color: rgba( 50, 55, 60, .85 );
		}
	</style>
<?php
}
add_action( 'wp_before_admin_bar_render', 'rainbow_bar' );

Install that to get this:

Small Changes

In order to make it look ‘right’ for me, I changed two things

I removed this:

	#wpadminbar .ab-top-menu > li > a {
		background-color: rgba( 50, 55, 60, .85 );
	}

And I added this:

	#wpadminbar .ab-item, #wpadminbar a.ab-item, #wpadminbar > #wp-toolbar span.ab-label, #wpadminbar > #wp-toolbar span.noticon,
	#wpadminbar .ab-icon, #wpadminbar .ab-icon:before, #wpadminbar .ab-item:before, #wpadminbar .ab-item:after {
		color: #000;
	}

Caveats

Even with my changes, the color for my Jetpack stats looks wrong. It’s too washed out. And that’s because it’s apparently hardcoded into the plugin in a way I can’t overwrite. I can live with that problem.

The other issue is that this will only show for logged in users (unless you’re using some code to always show the admin bar). That begs the question, of course, of why would you do this if only logged in users?

If you’re running a queer themed website that happens to use WordPress … like, say, Autostraddle, then this makes perfect sense. For me, it just makes me feel happy to see that pride rainbow all the time.