2

I'd like to get it so that all of my sites have a different color admin bar. Dev Staging and Production. I use Git to push my code.

Any help would be appreciated.

Improve this question
1
  • I built a plugin that adds a brightly coloured bar to the admin bar with the name of the server in it, I know there are other plugins that try to auto-generate colours for the entire admin bar trying to solve the same problem you're tackling
    – Tom J Nowell ♦
    Sep 5, 2018 at 16:27

2 Answers 2

Reset to default
4

You can use a filter to set the admin color scheme, which includes colors for the admin bar:

<?php // add a filter
add_filter('get_user_option_admin_color', 'wpse_313419_conditional_admin_color');
// 
function wpse_313419_conditional_admin_color($result) {
    // Dev: use 'light' color scheme
    if(get_site_url() == 'http://dev.example.com') {
        return 'light';
    // Staging: use 'blue' color scheme
    } elseif(get_site_url() == 'http://staging.example.com') {
        return 'blue';
    // Production (all other cases): use 'sunrise' color scheme
    } else {
        return 'sunrise';
    }
} ?>

You can see the 8 built-in color schemes by editing a user's profile and viewing the "Admin Color Scheme" options at the top. You just use them as all-lowercase. The filter overrides any individual users' preferences and enforces the color scheme of your choice. If you like, you can also create your own custom color schemes.

If your Site URLs change often, you could take an additional step - when the theme is activated, save the environment as an Option, and then you can pull it using get_option instead of get_site_url.

Finally, if you want to just use a plugin to handle all this for you, there is at least one ready-made solution in the WP plugin repository.

Improve this answer
3
  • If this solution worked, would you please accept the answer so others searching for this topic will know?
    – WebElaine
    Sep 6, 2018 at 14:39
  • ok so i see that worked but i guess I was mistaken I'd like to only change the admin tool bar colo r-- any ideas on how to do that?
    – sethg
    Sep 7, 2018 at 0:24
  • You could search for Tom's plugin or create your own plugin which enqueues CSS that targets the admin bar. Shouldn't be too hard to inspect and find what class to target.
    – WebElaine
    Sep 7, 2018 at 13:51
1

Fortunately the solution you want is actually quite simple. Just use the 'wp_before_admin_bar_render' action hook and output CSS to change the color and background of the HTML element with the id of wpadminbar.

Below is a bit of code you can save into a file in your theme and require() from your theme's functions.php file, add a plugin header and use as a plugin, add to an existing plugin and require() it, or simply copy into /mu-plugins and WordPress will load it automatically.

But be sure to modify the _get_color_pair() function to return a different color pair depending on which host is doing the loading:

<?php

class WPSE_313419 {
    static function on_load() {
        add_action(
            'wp_before_admin_bar_render',
            [ __CLASS__, '_wp_before_admin_bar_render_99' ],
            99
        );
    }

    static function _wp_before_admin_bar_render_99() {
        $color_pair = self::_get_color_pair();
        $html = <<<HTML
<style type="text/css">
    #wpadminbar{color:{$color_pair->color};background:{$color_pair->background};}
</style>
HTML;
        echo $html;
    }

    /**
     * Modify this function to return the colors you want
     * based on the value of get_site_url() or based on
     * a constant defined in each host's /wp-config.php.
     *
     * @return object
     */
    private static function _get_color_pair() {
        return (object)array(
            'color' => 'white',
            'background' => 'red',
        );
    }
}
WPSE_313419::on_load();

Any questions? Just ask.

Hope this helps.

-Mike

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.