Matt Cromwell Avatar
So, WordPress just pushed version 3.8. It’s mostly an aesthetic update for the backend. But for me, who works in…

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:

colorzilla-webpage-analyzer-results

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.

21 Comments

  1. I’ll be the first to admit that I’m not good with color jk, I’ve said that public-ally many times that I prefer to focus on code over design but at least I can admit that and let others do the design and UX work for the code I write lol. Great article…

    1. It was said with affection. Had to pick on someone… lucky you!

  2. Matt,

    Really easy-to-follow explanations, and I loved the screencast. Thanks for sharing.

    One question… Are you recommending editing the “Admin Color Schemes” plugin? Why not create your own plugin so that changes don’t get lost if/when the Admin Color Schemes plugin gets updated?

    I agree that updating WordPress core files is a huge no-no, but when editing someone else’s plugin files, you still have to worry about updating issues.

    1. Yep, that’s true Dave, editing plugin files means that changes get lost when there are updates. But considering I am only adding new content to the admin-color-schemes.php file and adding a new folder maintaining those changes are really simple.

      I’m sure more advanced plugin developers can take what I’ve done here and create something more automated. Until then, this will work for most any WP developer who knows their way around.

      1. Dude. Awesome article! The only tidbit I’d offer is to maybe do this in a functionality plugin might be a better compromise to retain changes. Just my two pennies.

  3. Thanks for the post. After walking through the above, and even after refreshing and clearing the cache i get black bars in the admin and some of the other UI elements are black as well (like checkbox borders), and it only happens after choosing my new theme. Any thoughts? Thanks!

    1. I found this array that I needed to add my scheme to. After doing that it fixed the above issue.

      private $colors = array(
      ‘vinyard’, ‘primary’, ’80s-kid’, ‘aubergine’,
      ‘cruise’, ‘flat’, ‘lawn’, ‘seashore’
      );

      1. Thanks for catching that, amended my article and referred to your comment.

  4. Hey just wanted to say that there seems to be a missed step of adding your new colour scheme to the $colors array at the top of the admin-color-schemes.php file. I couldn’t work out why it wasn’t working for me and that was the problem :). Thanks for the article.

    1. Thanks for catching that, amended my article and referred to your comment.

    1. Thanks April. I updated the link, should be good to go now.

  5. Very good article. I preffer to use custom admin themes to impress my clients that are already working with wordpress and know how boring default theme can be. :) You can see ones that I often use on this WordPress admin theme list. Keep up with good info and thanks.

  6. I just recently switched from WordPress.com to a self-hosted WordPress.org blog and I was a bit disappointed to find out that the admin screen themes still weren’t customizable, so I searched for a fix and I found your site. I couldn’t have figured this out all on my own! Thank you so much! :)

    I noticed one problem on my end, though. For some reason, whenever I use my custom theme, the Yoast SEO plugin’s icon on the menu bar won’t show (it takes the color of its background). It’s the only menu item experiencing that problem, so I’m really at a loss. Has anyone experienced a similar issue?

    1. Hi Erika, that’s kinda odd. Do you have Yoast’s SEO updated to the latest version? What I see is that the icon is an SVG file that has a fill of #999. So if you go any lighter or darker than that you should be fine.

      1. Yes, I have the latest version. This is what happens when I hover my cursor over the menu item: http://snag.gy/bxoIH.jpg Really odd, indeed, especially since that doesn’t happen when I’m using any other theme.

        I’m so sorry for bothering you, Matt! You’ve already helped more than enough!

      2. If you can post your custom admin scheme somewhere that I can download it, maybe I can duplicate the problem and find a solution. Let me know.

Leave a Reply

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