Dom Sammut in Code

Add a custom admin colour scheme in WordPress 3.8

With the introduction of WordPress 3.8 and the facelift to the administration interface you might be looking to make a colour scheme that is a little more fitting to your tastes.

To do this we will use an existing function that has been within WordPress well prior to the release (since 2.5) of WordPress 3.8 called wp_admin_css_color – Read more from WordPress Codex documentation on this function.

You can add this function to either your functions.php file inside your theme or to a plugin. I’ve attached code for both, the only difference is the path to the css file.

Theme

wp_admin_css_color(
    'colour-handle', //Key
    __( 'DomSammut', 'admin_schemes' ), //Name
    get_template_directory_uri() . '/colours.css', //Path
    array( '#aaaaaa', '#FF6C1C', '#7D6B5C', '#456a7f' ), //Colours
    array( 'base' => '#FF6C1C', 'focus' => '#FFFFFF', 'current' => '#FFFFFF ) //Icons
);

When placing the code inside a theme, the CSS file should live at the following path based on the snippet above:

http://www.example.com/wp-content/themes/your-theme/colours.css

Plugin

wp_admin_css_color(
    'colour-handle', __( 'Name to appear in Admin', 'admin_schemes' ),
    plugins_url( 'colours.css', __FILE__ ),
    array( '#aaaaaa', '#FF6C1C', '#7D6B5C', '#456a7f' ),
    array( 'base' => '#FF6C1C', 'focus' => '#FFFFFF', 'current' => '#CCCCCC' )
);

When placing the code inside a plugin, the CSS file should live at the following path based on the snippet above:

http://www.example.com/wp-content/plugins/your-plugin/colours.css

Additional customisation of CSS file served

To have full support of RTL and/or display full/minified CSS files you can apply the following (taken directly from general-template.php):

//Serve different files based on matching conditions
$suffix = is_rtl() ? '-rtl' : '';
$suffix .= defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';

//THEME
get_template_directory_uri() . '/colours' . $suffix . '.css',

//PLUGIN
plugins_url( 'colours'. $suffix . '.css' , __FILE__ ),

Over to you!

From here, you can customise the colour scheme. I would suggest basing it off one of the existing color.min.css files e.g. the Midnight colour palette.

This post was last modified on %s = human-readable time difference 7:58 pm

Next Read: Restrict all traffic except your IP address and more with .htaccess »

webwordpress

Dom Sammut: Dom Sammut is a PHP / Node.js Web Developer from Australia with extensive experience in developing in and customising Laravel, Express, VueJS, WordPress, Symphony CMS, Craft CMS and Squiz Matrix.

View Comments (2)

Terence Milbourn says:
June 7, 2014 at 10:01 pm
Admin Color Schemes ~ they should be switchable NOT by user but by site. Think how much swearing and shouting that would save!
Seriously though, what donut thought that making it switchable by user profile was a good idea? I guess there's some things about WordPress and WP developers I will never understand.
By the way, if you ever come across a code snippet that I can add to my functions.php and give me a choice of selecting admin color scheme by site, rather than user, I will be forever in your debt.
- Dom Sammut says:
  June 7, 2014 at 10:38 pm
  Hey Terence,
  I agree, this sort of thing can lead to a few too many headaches. Luckily there is some code snippets you can add to your functions.php to curb this.
  To disable anyone except admins and super admins from changing their admin color scheme you just need to use the following code:
```
if ( !current_user_can('manage_options') ) {
     remove_action( 'admin_color_scheme_picker', 'admin_color_scheme_picker' );
}
```
  You can also use the following snippet to set the color scheme for all users:
```
add_filter('get_user_option_admin_color', 'change_admin_color');

function change_admin_color($result) {
    return 'ectoplasm';
}
```
  By using these two snippets you can effectively disable users from changing the color scheme you've chosen.
  I hope that helps resolve a few of those headaches :)