How to Create a Custom WordPress Admin Color Scheme

WordPress 3.8 introduced admin color schemes. It came packaged with 8 options, and the WordPress core team released a plugin that adds 8 more.

But if you’re a developer who builds custom sites for your clients, you might want to create a custom admin color scheme to match your client’s brand. Using the Admin Color Schemes plugin as our base, we’ll show you how to create your own plugin & implement a completely custom color scheme.

Download sample plugin files

Customize Admin Color Schemes Plugin

1. Download the Admin Color Schemes plugin from wordpress.org
2. Unzip the file

Edit Files & Folders

1. Rename the folder to “custom-admin-color-schemes”
2. Rename the “admin-color-schemes.php” file to “custom-admin-color-schemes.php”
3. Delete all the other folders except for one. It doesn’t matter which one, but for this tutorial, we’re going to use the “Flat” scheme.
4. Rename the “flat” folder to “your-scheme-name”. We’re going to use “smackdown” as our custom scheme for the rest of this tutorial, but you’ll replace that with your scheme name.

Edit The Plugin Details

1. Open custom-admin-color-schemes.php & rename Plugin Name, Description, Version & Author. Feel free to use whatever you’d like, and you can delete Plugin URI & Author URI (or use your company’s website).

Edit The Plugin Class

Still in custom-admin-color-schemes.php:

1. The first line of code (after the comments) is class ACS_Color_Schemes {. Rename ACS_Color_Schemes to Custom_Color_Schemes.
2. At the very bottom of the file, you’ll see $acs_colors = new ACS_Color_Schemes;. Change ACS_Color_Schemes to Custom_Color_Schemes.

Edit Color Schemes

Now let’s find the actual colors, and create our own scheme. Look for the following code:

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

Inside that function, you’ll see each of the 8 color schemes in the Admin Color Schemes plugin. Delete 7 of them, leaving the Flat theme in place. Now let’s edit the Flat theme to make it our own. My new color scheme looks like this:

wp_admin_css_color(
	'smackdown', __( 'WP Smackdown', 'admin_schemes' ),
	plugins_url( "smackdown/colors$suffix.css", __FILE__ ),
	array( '#3299bb', '#452b72', '#f5f5f5', '#fff' ),
	array( 'base' => '#3299bb', 'focus' => '#452b72', 'current' => '#f5f5f5' )
);

• WP Smackdown is the name that will appear on your profile screen
• plugins_url( “smackdown/colors… “smackdown” must exactly match the name of the folder inside your plugin
• The first array of colors creates the color palette that you see on your profile screen
• The second array of colors is used for any SVG icons that might be created

That will only change the colors on the profile screen. It will not affect the actual colors of the admin area. To do that, we’ll need to use a CSS preprocessing tool to convert an .scss file to a .css file. Any one will do, but I prefer Prepros.

Now let’s actually change the admin colors.

1. Inside of your color folder (“smackdown”, or whatever you named it), open up colors.scss.
2. Change the 4 hex color values to match the colors you used above. Save the file.
3. Open your CSS preprocessing tool.
4. Compile the colors.scss file. That should automatically update colors.css in the same folder.
5. Upload your entire color folder. Navigate to your profile page. Select your new color.
6. Boom! You’ve got your very own color scheme for the WordPress admin :-)

Note: Because we’re working with CSS files, it’s possible your browser (or server) has cached the old “Flat” colors. Clear your cache if you don’t see the new colors right away.

Even More Custom Colors

The 4 color values in colors.scss are all you need to update to create a new custom admin color scheme. But if you want to take it a step further, WordPress gives us quite a few more elements we can customize.

1. In the root plugin folder, /custom-admin-color-schemes/, open _variables.scss
2. You can copy as many, or as few, of those variables into the colors.scss file within your “smackdown” folder
3. Edit them however you see fit
4. Compile your colors.scss file again, re-upload colors.css to your server, and refresh your browser to see the magic.

Play around to see just which parts of the WordPress admin each variable affects. Be sure to navigate to a few pages that contain different elements (headers, icons, buttons, text links, etc.)

Download sample plugin files

I borrowed this idea from Matt Cromwell, but Matt edited the plugin files directly. I almost never edit plugin files directly, and I wanted to create a new plugin that only contained my custom styles. You never know when an existing plugin might be updated, and all of your changes could get over-written.