FAIR

Federated and Independent Repositories

Contextual Adminbar Color

Plugin Banner

Contextual Adminbar Color

by Jb Audras

Download
Description

This plugins provides custom admin bar colors to differentiate environments (staging, preprod, production). It’s really easy to use and developer-friendly.

The plugin provides a settings screen which several options:

  • choose between several color predefined schemes.
  • use a favicon to better differentiate your environments in your browser’s tabs.
  • add a custom message in your admin bar, like “Production website”, “staging version” or whatever your want.
  • choose the user roles that will see the color scheme (other roles will see the default admin bar).

It also offers few PHP constants you can use in your wp-config.php file (see Frequently Asked Questions below).

Since WordPress Core will probably deprecate alternate admin color schemes in mid-term, this plugin is meant to be use by those who rely on colors to know is they are in staging, preproduction or production environment.

Last but not least, all provided color schemes are accessibility-ready!

  1. Activate the plugin.
  2. Good to Tools > Adminbar settings to configure the plugin.
  3. Save your changes and enjoy 🙂
  1. Plugin settings screen.

    Plugin settings screen.

  2. Use favicons to differentiate your browser tabs.

    Use favicons to differentiate your browser tabs.

  3. Front-end rendering.

    Front-end rendering.

How to use the PHP constant in wp-config.php?

Use CONTEXTUAL_ADMINBAR_COLOR to force color scheme.
Accepted values: blue, red, green, purple, orange and darkgray.
Example: define( 'CONTEXTUAL_ADMINBAR_COLOR', 'purple' );

Use CONTEXTUAL_ADMINBAR_MESSAGE to force your custom admin bar message to display.
Accepted values: any valid string.
Example: define( 'CONTEXTUAL_ADMINBAR_MESSAGE', 'This is the staging website' );

  • CONTEXTUAL_ADMINBAR_FAVICON to force a favicon.
    Accepted values: 0 (don’t force a color based favicon) or 1 (force WordPress Admin to use the favicon that is related to your selected color scheme).
    Example: define( 'CONTEXTUAL_ADMINBAR_FAVICON', 1 );

  • CONTEXTUAL_ADMINBAR_SETTINGS to remove the settings screen from WordPress Admin, and manage the plugin’s settings only within the wp-config.php file.
    Accepted values: 0 (remove the settings screen) or 1 (keep it).
    Example: define( 'CONTEXTUAL_ADMINBAR_SETTINGS', 0 )

Très pratique !

By Jean-BriceM on January 8, 2025

Présent sur toutes mes sites en pre-prod ! 🙂

highly useful

By omeld on September 14, 2022

and unobtrusive

Just what I needed

By evaldash on September 3, 2021

Works as expected, would be great if compatibility with recent WordPress versions were checked, since it's a really useful and simple plugin. Thanks!

Exactly what I was looking for

By martinjosef on February 5, 2021

This is so much appreciated, I built my own very bad version of this and ran with it for years. It works exactly as I hoped it would. Thanks!

Makes my life much better knowing exactly where I am

By Dirk Tornow (smings) on January 23, 2021

Such a great helper! It gives me the safety to know exactly which environment I work on without having to worry. Sometimes things look just alike in your DEV, STAGE and PROD environment. And with this little plugin, it is immediately obvious which environment you work in. And it also works on WP 5.6 - just checked...

Simple and very usefull!

By Pedro Mendonça (pedromendonca) on February 5, 2020

Really enjoy this plugin. It’s simple and well integrated with WordPress admin UI. I really like the optional configuration through wp-config.php. After configuring it once in wp-config.php, I won’t ever need to reconfigure because it doesn’t loose settings on importing settings (eg. staging <-> production). Great job @audrasjb!

Great !!!

By Cédric Chevillard (cedche99) on December 13, 2019

Perfect plugin that allows me to easily differentiate my various environments. THX !

This is what I need

By Julio Potier (juliobox) on December 2, 2019

OMG this is what I need. I actually use the alternate colors, but I don't like to change the good "blacky" interface 😉 So, this is the best option ever. And since the alt colors will disappear (soon?), it's a good idea to use this to prevent wrong wabsite updates and tons of wasted hours trying to figure "why this is not updating? HO CRAP I AM ON THE PRODUCTION SITE *phone rings* "hey, client… well listen… you won't believe me ha ha ha :|"

0.3.1

  • Adds option to switch back to default color scheme.

0.3

  • Fixes security issues, thanks to the WordPress Plugin/Security team.

0.2

  • Plugin initial version, now on WordPress.org!

0.1

  • Plugin initial version, only released on GitHub.
Back to top