Create a Custom WordPress Admin Color Scheme

So, WordPress just pushed version 3.8. It’s mostly an aesthetic update for the backend. But for me, who works in the backend of many, many sites every day, this couldn’t be better news. The old backend was not responsive, was designed with late 90’s design techniques, and was not optimized for speed in any way. The new look (previously known as MP6), changes all of that — and I LOVE IT!

The other significant change folks are talking about is that WordPress is now adopting SASS as its CSS pre-processor of choice (boo hoo for all you LESS fans). I’ve been digging into SASS slowly over this year and can say that it’s definitely the future of web design and development. I wouldn’t be surprised if we hear Firefox or Chrome announcing native SASS compatibility in their browsers (meaning NO preprocessing, just pure SASS code support).

If you are not a developer, then setting up your environment for SASS can be a pain. But there are already several really easy tools out there to help you get setup. I’ll introduce one tool below.

With all these goodies combined, there’s a really straight-forward way to create your own custom color scheme for your WordPress backend. This is especially useful for syncing up your backend with your clients front-end color scheme. Here’s a list of all the tools I’ll be using to make this happen:

1. Scout App
2. Colorzilla Chrome Extension
3. Admin Color Schemes Plugin (by the WordPress Core Team, so it’s solid)
4. Notepad++ (or your code editor of choice)
5. FileZilla (or your FTP client of choice)

Notice that every single one of these tools is absolutely free. So if you end up using them, sing their praises, donate if you can, or give back to the community in one way or another.

1. What Are Admin Color Schemes?

With WordPress 3.8’s new interface, came the ability to swap out your site’s color scheme. This can be done globally by the admin or per user. You’ll find these options by going to your Profile. If you are the Administrator of your site, then what you change here will affect all users. But they will also have the ability to override that themselves.

When you first get there, you’ll see 8 themes available. And they’re nice, totally useable. Some like it dark, some like it light, some like it funky. The basics are covered. But we’re gonna get crazy, so hold on tight!

2. Using the Admin Color Schemes Plugin

When this new admin theme was developing (MP6), the team created 16 color schemes. I’m not totally sure how they narrowed it down to the core 8, but once you’ve installed the Admin Color Schemes Plugin, you’ll see all 16 of them in their glory. The reason I’m using this plugin to create my own custom color scheme is because it allows me to make all my changes with that plugin, rather than in the WordPress Core files (and gigantic NO NO).

Next, you’ll want to FTP in to your site, navigate to the Admin Color Scheme plugin folder, and duplicate one of the color scheme folders and give it your own custom name.

UPDATE: Several astute (and very patient!) commenters noticed I missed a crucial step. You actually have to add the name of your new style into the $colors array towards the top of the admin-color-schemes.php file so that the profile page has something to hook into. I had that already done when I started my video so completely neglected to mention that. Kudos on you astute readers!

Then open up the admin-color-schemes.php file. Scroll down to about line 51 and you’ll see this:

/**
 * Register color schemes.
 */
 function add_colors()

That is where all the magic happens. Scroll down to find the color scheme that you duplicated, and copy all the code, paste it at the bottom of that function, and give it your custom color scheme name. In the end, the bottom two options (before the function is closed) should look something like this:

wp_admin_css_color(
 'seashore', __( 'Seashore', 'admin_schemes' ),
 plugins_url( "seashore/colors$suffix.css", __FILE__ ),
 array( '#F8F6F1', '#d5cdad', '#7D6B5C', '#456a7f' ),
 array( 'base' => '#533C2F', 'focus' => '#F8F6F1', 'current' => '#F8F6F1' )
 );

wp_admin_css_color(
 'matt', __( 'Matt', 'admin_schemes' ),
 plugins_url( "matt/colors$suffix.css", __FILE__ ),
 array( '#1F2C39', '#2c3e50', '#1abc9c', '#f39c12' ),
 array( 'base' => '#f1f2f3', 'focus' => '#fff', 'current' => '#fff' )
 );

You might notice that I copied the “Flat” color scheme. Now, save that, and when you go to your profile you’ll see your new color scheme name already there. The colors will all be identical to the scheme you copied.

Now it’s time to update the colors. The css file for the admin backend is over 2,000 lines long JUST for the colors. Seems daunting, right? Well that’s where SASS steps in.

3. Setting Up SASS (for dummies like me)

The standard way to install SASS is via the command line. That’s no fun at all. It’s also no fun to have to open it up and point SASS to all your folders and output folders manually every time you want to work on a project. So instead, when you go to the SASS Install page, don’t look at the right-hand column. That will just scare you. Instead, check out all the tools in the left-hand column. My tool of choice is Scout because it’s DEAD-SIMPLE. See the screencast below for how I use it.

The reason we want to do this, is because rather than search through 2,000 lines of CSS, with SASS we can change the entire color scheme with this lines right here:

$base-color: #0c4da1;
 $highlight-color: #ed5793;
 $notification-color: #43db2a;
 $action-color: #eb853b;

Really!? I can change those four colors and have a totally brand spanking new Admin Color Scheme?

Yep, that’s the magic right there.

4. Making it Happen

So, not all of use are good with colors (ahem, Michael Bastos). So I recommend using colourlovers.com to browse through their color palettes and just choose one that works for you. Or, if you want to customize the admin to your frontend, then ColorZilla has a great tool. Go to the page you want to use for your color palette, then click on the ColorZilla icon, and go to “Webpage Color Analyzer”. It will scan your page for the major colors used and spit them out into blocks that you can select and choose your colors from. Here’s the palette I’m working with:

You can see that you just click on the color and you can then choose either rgb or hex data.

5. Digging in Deeper

Now, it’s awesome to be able to change everything with just those 4 color properties, but if you’re like me, you want more control. The Admin Color Scheme plugin gives you that. Navigate to the plugin folder again and open up _variables.scss. There you can see ALL the different SASS variables available to you to update your color scheme with. In the end, my color scheme looks like this:

$body-background: #eee;
 $link: #666666;
 $link-focus: #9EB984;

 $base-color: #666666;
 $icon-color: #9EB984;
 $highlight-color: #9EB984;
 $notification-color: #9EB984;
 $button-color: #9EB984;

 $menu-highlight-text: #666666;
 $menu-text: #ffffff;
 $menu-submenu-text: #666666;
 $menu-submenu-focus-text: #000000;
 $menu-submenu-background-alt: #666666;
 $menu-submenu-background: #BBBBBB;

Done!

Once you’ve done all your customizing, just refresh your Profile page and VIOLA! Beauty. Just to show how easy it is, here’s a screencast of me implementing this with all those tools in about 4 minutes.