Found this useful? Love this post

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.

wordpress-custom-colour-scheme

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.

Subscribe

You'll only get 1 email per month containing new posts (I hate spam as much as you!). You can opt out at anytime.

Categories

Leave a Reply

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

Preview Comment

2 Comments

  1. Terence Milbourn
    https://www.domsammut.com/?p=830#comment-98

    Terence Milbourn

    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
      https://www.domsammut.com/?p=830#comment-99

      Dom Sammut

      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 :)

css.php