Customize WordPress Admin Color Scheme

WordPress just got a new upgrade and 3.8 comes with a bunch of new thing to be excited about. One that you will notice immediately, is that the WP-Admin UI now has a new look.

This new design, which actually has long been developed under a plugin called MP6, is responsive and it clearly embraces the current design trend, Flat Design.

It also introduces 8 new colors: Fresh (set as the default), Light, Blue, Midnight, Coffee, Ectoplasm, Ocean, and Sunrise to spice-up the UI. Let’s get down to exploring and personalizing our now, much more colorful WP-Admin.

Recommended Reading: A Look Into WordPress UI Evolution For The Past 10 Years

Add New Color Schemes

Apart from the 8 color options mentioned earlier, you can add more new color schemes with the Admin Color Schemes plugin. So in total, there are 16 color options to pick from.

If somehow you do not want to rely on a plugin, you can add this code in the functions.php file of your theme to register a new color scheme. Make sure that you have already put the stylesheet of the admin color scheme in the right folder.

function additional_admin_color_schemes() {
	//Get the theme directory
	$theme_dir = get_template_directory_uri();

	//Ocean
	wp_admin_css_color( 'ocean', __( 'Ocean' ),
		$theme_dir . '/admin-colors/ocean/colors.min.css',
		array( '#aa9d88', '#9ebaa0', '#738e96', '#f2fcff' )
	);
}
add_action('admin_init', 'additional_admin_color_schemes');

Set New Default Color

WordPress set Fresh as the default admin color but as we have added new colors, let’s try to make Flat the default instead.

The bad news is, there isn’t a straightforward or a standard function to overwrite the default WP-Admin color-scheme. But, we have a trick to achieve this idea.

We will use user_register Action Hook along with wp_update_user to change/update the admin color of newly registered users, like so.

function set_default_admin_color($user_id) {
	$args = array(
		'ID' => $user_id,
		'admin_color' => 'flat'
	);
	wp_update_user( $args );
}
add_action('user_register', 'set_default_admin_color');

As stated in this documentation, the user_register allows developer to access data for a new user immediately after they are added to the database..

Rename The "Default" Label

However, our problem now is that Fresh is still labeled as “Default”. So let’s change the label to Fresh with this code below.

function rename_fresh_color_scheme() {
	global $_wp_admin_css_colors;
	$color_name = $_wp_admin_css_colors['fresh']->name;

	if( $color_name == 'Default' ) {
		$_wp_admin_css_colors['fresh']->name = 'Fresh';
	}
	return $_wp_admin_css_colors;
}
add_filter('admin_init', 'rename_fresh_color_scheme');

That’s all the codes we need. Now, you can try these tips by creating a new user. If you have got some troubles, feel free to ask about it in the comment box below.