How To Remove WordPress Admin Color Scheme Option

Well, there was a time when I need to remove admin color scheme option. And this how I do that.

I was building a complex site with several user role, and to make it easier to know which user role I use to login, I set each user role to use different admin color scheme and disable admin color option in profile edit.

It’s actually pretty simple. And I will also explain the coding process, how to learn to code something in WordPress. (I’m sure it’s pretty useful trick if you wants to learn to code/problem solving in WP).

Check /wp-admin/profile.php

To understand how WordPress works, we simply need to read it.

When we edit our profile, from the URL we can see what file is loaded. if we check profile.php in wp-admin folder, we see that it simply load “edit-user.php”.

/** Load User Editing Page */
require_once( dirname( __FILE__ ) . '/user-edit.php' );

wp-admin/user-edit.php

Now we simply need to find the admin color option section. In line 226 we can see that admin color option section only loaded if the global $_wp_admin_css_colors have more than 1 color option.

<?php if ( count($_wp_admin_css_colors) > 1 && has_action('admin_color_scheme_picker') ) : ?>

As default, WordPress have 8 admin color scheme option, the default is “fresh“. So to remove this color option we are simply going to remove all color option except the “fresh” color scheme.

Understanding $_wp_admin_css_colors data structure.

We simply need to var_dump() the global $_wp_admin_css_colors and here are the results:

Array
(
    [fresh] => stdClass Object
        (
            [name] => Default
            [url] => 
            [colors] => Array
                (
                    [0] => #222
                    [1] => #333
                    [2] => #0073aa
                    [3] => #00a0d2
                )

            [icon_colors] => Array
                (
                    [base] => #999
                    [focus] => #00a0d2
                    [current] => #fff
                )

        )

    [light] => stdClass Object
        (
            [name] => Light
            [url] => https://dev.play/wp-admin/css/colors/light/colors.css
            [colors] => Array
                (
                    [0] => #e5e5e5
                    [1] => #999
                    [2] => #d64e07
                    [3] => #04a4cc
                )

            [icon_colors] => Array
                (
                    [base] => #999
                    [focus] => #ccc
                    [current] => #ccc
                )

        )

    [blue] => stdClass Object
        (
            [name] => Blue
            [url] => https://dev.play/wp-admin/css/colors/blue/colors.css
            [colors] => Array
                (
                    [0] => #096484
                    [1] => #4796b3
                    [2] => #52accc
                    [3] => #74B6CE
                )

            [icon_colors] => Array
                (
                    [base] => #e5f8ff
                    [focus] => #fff
                    [current] => #fff
                )

        )

    [midnight] => stdClass Object
        (
            [name] => Midnight
            [url] => https://dev.play/wp-admin/css/colors/midnight/colors.css
            [colors] => Array
                (
                    [0] => #25282b
                    [1] => #363b3f
                    [2] => #69a8bb
                    [3] => #e14d43
                )

            [icon_colors] => Array
                (
                    [base] => #f1f2f3
                    [focus] => #fff
                    [current] => #fff
                )

        )

    [sunrise] => stdClass Object
        (
            [name] => Sunrise
            [url] => https://dev.play/wp-admin/css/colors/sunrise/colors.css
            [colors] => Array
                (
                    [0] => #b43c38
                    [1] => #cf4944
                    [2] => #dd823b
                    [3] => #ccaf0b
                )

            [icon_colors] => Array
                (
                    [base] => #f3f1f1
                    [focus] => #fff
                    [current] => #fff
                )

        )

    [ectoplasm] => stdClass Object
        (
            [name] => Ectoplasm
            [url] => https://dev.play/wp-admin/css/colors/ectoplasm/colors.css
            [colors] => Array
                (
                    [0] => #413256
                    [1] => #523f6d
                    [2] => #a3b745
                    [3] => #d46f15
                )

            [icon_colors] => Array
                (
                    [base] => #ece6f6
                    [focus] => #fff
                    [current] => #fff
                )

        )

    [ocean] => stdClass Object
        (
            [name] => Ocean
            [url] => https://dev.play/wp-admin/css/colors/ocean/colors.css
            [colors] => Array
                (
                    [0] => #627c83
                    [1] => #738e96
                    [2] => #9ebaa0
                    [3] => #aa9d88
                )

            [icon_colors] => Array
                (
                    [base] => #f2fcff
                    [focus] => #fff
                    [current] => #fff
                )

        )

    [coffee] => stdClass Object
        (
            [name] => Coffee
            [url] => https://dev.play/wp-admin/css/colors/coffee/colors.css
            [colors] => Array
                (
                    [0] => #46403c
                    [1] => #59524c
                    [2] => #c7a589
                    [3] => #9ea476
                )

            [icon_colors] => Array
                (
                    [base] => #f3f2f1
                    [focus] => #fff
                    [current] => #fff
                )

        )

)

It’s just a simple array and each array item is an object. Now we have everything we need to know. With very little code we can modify the color options data:

/* Admin hook */
add_action( 'admin_init', 'my_limit_admin_color_options', 1 );

/* Limit admin color options */
function my_limit_admin_color_options(){
    global $_wp_admin_css_colors;

    /* Get fresh color data */
    $fresh_color_data = $_wp_admin_css_colors['fresh'];

    /* Remove everything else */
    $_wp_admin_css_colors = array( 'fresh' => $fresh_color_data );
}

Force all user to use “fresh” color.

Because user now can’t change their admin color, it’s probably best to switch all color scheme to the default (“fresh”).

Let’s back to the “edit-user.php”. In line 241 we can see that the options is actually loaded from action hook:

do_action( 'admin_color_scheme_picker', $user_id );

With a little search, we can find the function loaded in that hook. It is loaded from “wp-includes/default-filters.php” line 326:

add_action( 'admin_color_scheme_picker', 'admin_color_scheme_picker' );

Now we just need to find the function admin_color_scheme_picker().

Again, with simple search, I located that function in “wp-admin/includes/misc.php” line 639

And inside that function, we can see that the function to get the current color is:

$current_color = get_user_option( 'admin_color', $user_id );

get_user_option();

So the function to get user option is get_user_option(). And that function is located in “wp-includes/user.php”. The output is filterable:

return apply_filters( "get_user_option_{$option}", $result, $option, $user );

So we simply need to use that filter to force user color:

/* Filter user color option */
add_filter( 'get_user_option_admin_color', 'my_force_user_color' );

/* Override user color option */
function my_force_user_color( $color ){
    return 'fresh';
}

And that’s it.

The Moral of The Story

Start reading WP Core codes. And you can solve anything 🙂
(And it’s fun. Playing detective is fun)