Published

Contextual Adminbar Colors for Local and Production Environments in WordPress

If you work on WordPress in different environments (development, staging, production) it’s helpful to know where you are. An easy way is to change the admin bar color to match your environment (blue = dev, green = staging, red = production or similar).

Luckily there’s a lightweight plugin for this called Contextual Adminbar Color.

You can set the colours in your WP Dashboard, but if you push / pull your sites you will overwrite whatever you set there. That’s why you’d want to add a few constants to each[1]The wp-config.php is unique to each environment. of your wp-config.php files instead.

This is what I add to my local development site.

/* Contextual Adminbar Color */

define( 'CONTEXTUAL_ADMINBAR_COLOR', 'blue' );
define( 'CONTEXTUAL_ADMINBAR_MESSAGE', 'Dev Site' );

How it works with Bedrock

If you use Bedrock, which I can highly recommend, you can use environment variables to improve this workflow further.

If you’re not familiar with Bedrock, it’s WordPress with — among other things — a different folder structure. With traditional vanilla WordPress you pull / push your files and database minus (at least) the wp-config.php, which is specific to each environment. If you want to modify something on all your environments via wp-config.php, you will have to copy and paste those changes, which can be tedious[2]Especially if you want to keep the changes in sync..

Bedrock instead uses a file to store only your sensitive data (.env) and a file roughly equivalent to the wp-config.php called application.php, which you can then sync among environments.

You furthermore have files dedicated to each environment (development, staging, production[3]You set the environment in the .env-file.), and this is where you then add the contextual adminbar color constants.

Footnotes

Footnotes
1 The wp-config.php is unique to each environment.
2 Especially if you want to keep the changes in sync.
3 You set the environment in the .env-file.