In modern web development, the use of various environments such as local, development, testing (QA), staging, and production is standard practice. These environments allow teams to develop, test, and preview changes before their deployment to the live version of the site. However, despite their importance in the development process, developers often encounter confusion among these environments. Such confusion can lead to errors, for instance, making changes in the production environment instead of development.
How then can we minimize the risk of such errors and increase the team’s efficiency?
The Importance of Differentiating Environments
Confusing development environments is easy, especially when working under deadline pressure, on multiple projects simultaneously, or simply due to human error.
Unfortunately, even the slightest mistake can have serious consequences, including data loss, website malfunction, or unwanted changes in content available to users. The company may incur losses, and you or your employees may be reprimanded. Visual differentiation between environments serves as a constant reminder of which environment the developer is currently working in, reducing the risk of accidental errors.
An Effective Solution to the Problem of Development Environment Confusion
One effective way to solve this problem is by visually distinguishing the WordPress admin panel with different colors depending on the development environment. This approach not only increases the developers’ level of attentiveness but also facilitates faster and more intuitive differentiation between environments, reducing the likelihood of errors.
Implementation of Color Highlighting for the Administrator Panel
To start, let’s define which colors will be associated with each environment. For example, we could use:
- standard black color for the local development environment
- blue for QA (testing) and for development
- orange for staging
- red for production.
Next, I’ll demonstrate how to apply these colors to the WordPress admin panel using simple functions and CSS styles, making work in different environments not only safer but also more comfortable.
And let’s also add information to the admin bar indicating which environment we are currently in:
This will help the team adapt more quickly to the new color scheme, and in the future, it will also assist newcomers to the project.
Specify our current environment
The color choice will be specified in the WordPress environment constant.
On each environment (local, dev, qa, stage, prod), you will need to add the WP_ENVIRONMENT_TYPE constant with its value to wp-config.php. Choose the necessary one and add it to your config:
define( 'WP_ENVIRONMENT_TYPE', 'local' );
define( 'WP_ENVIRONMENT_TYPE', 'development' );
define( 'WP_ENVIRONMENT_TYPE', 'staging' );
define( 'WP_ENVIRONMENT_TYPE', 'production' );
The source code
You can install the script via Composer following this instruction https://github.com/renakdup/colorize-wp-adminpanel-for-environments
Or you can follow instuction of this article and download script into your site.
I would recommend to save it in a file /wp-content/mu-plugins/ . If you don’t have mu-plugins directory, then you can create it. adminpanel-env-color.php
<?php
/**
* Adminpanel environment color for WordPress.
* It helps to highlight environments in color. Developers, Content Managers,
* and others will never confuse the environment where they work.
*
* Author: Andrei Pisarevskii
* Author Email: renakdup@gmail.com
* Author Site: https://wp-yoda.com/en/
*
* Version: 0.3
* Source Code: https://gist.github.com/renakdup/36f4a8474d0cb13ecadf0393811d5330
*
* Licence: MIT License
*/
namespace Renakdup\AdminpanelEnvColor;
AdminpanelEnvColor::init();
final class AdminpanelEnvColor {
public static function init() {
add_action( 'admin_head', [ __CLASS__, 'add_admin_bar_style' ] );
add_action( 'wp_head', [ __CLASS__, 'add_admin_bar_style' ] );
add_action( 'admin_bar_menu', [ __CLASS__, 'add_admin_bar_env_item' ], 100 );
}
public static function add_admin_bar_style() {
$adminpanel_colors = apply_filters(
'renakdup/adminpanel_env_color/colors',
[
'local' => null, // default wp color
'development' => '#2271b1', // blue
'staging' => '#cc6f00', // orange
'production' => '#6d0d0f', // red
]
);
// phpcs:disable WordPress.CodeAnalysis.AssignmentInCondition.Found, Squiz.PHP.DisallowMultipleAssignments.FoundInControlStructure, WordPress.Security.EscapeOutput.OutputNotEscaped
if ( $color = $adminpanel_colors[ wp_get_environment_type() ] ) {
echo '<style>
#wpadminbar { background-color: ' . $color . '!important; }
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu { background-color: ' . $color . '!important; }
</style>';
}
// phpcs:enable
echo '<style>.rd_adminpanel_env_color a {
box-shadow: inset 0 32px 5px rgba(0, 0, 0, 0.5) !important;
padding-left: 30px !important;
padding-right: 30px !important;
}
</style>';
}
/**
* @param $wp_admin_bar \WP_Admin_Bar
*
* @return void
*/
public static function add_admin_bar_env_item( $wp_admin_bar ) {
$args = [
'id' => 'rd_adminpanel_env_color',
'parent' => 'top-secondary',
'title' => 'ENV: ' . ucfirst( wp_get_environment_type() ),
'href' => '#',
'meta' => [
'class' => 'rd_adminpanel_env_color',
'title' => 'Your environment',
],
];
$wp_admin_bar->add_node( $args );
}
}
The source code you can copy from my GitHub Gist as well.
If you want to chagne colors or environements types, you can use filter renakdup/adminpanel_env_color/colors .
If you need to disable the admin panel recoloring for specific roles, you can use remove_filter() or slightly modify the source code.
Conclusion
In conclusion, color highlighting of the WordPress admin panel is not only an effective solution to the problem of confusion among development environments but also a key tool for enhancing productivity and security for developers. It allows teams to easily navigate between projects, minimizing the risk of accidental errors.
Such minor changes to the interface can have a significant impact on the efficiency of work processes, making daily tasks more intuitive and less prone to errors.
WordPress developers and administrators looking to optimize their workflows should consider implementing color highlighting of the admin panel as a standard practice for all their projects.
