Color-coded environment badges that prevent accidental changes on production sites by making the current environment instantly visible.
Environment Indicators
The Environment Indicators feature adds high-visibility, color-coded badges to your WordPress admin so you always know whether you're working on a Production, Staging, or Development site. This is the "never edit the wrong site again" feature.
Why It Matters
One of the most common and costly mistakes in WordPress development is accidentally making changes on a live production site when you intended to work on staging or development. Environment Indicators eliminate this risk by providing an unmistakable visual cue everywhere in the admin.
What It Displays
A color-coded badge appears based on the detected environment:
| Environment | Badge Color | When Detected |
|---|---|---|
| Production | Red | Live/production sites |
| Staging | Orange | Staging or pre-production environments |
| Development | Green | Local development or dev servers |
| Local | Green | Local development environments (e.g., LocalWP) |
Detection Sources
Version Info automatically detects the environment from multiple sources, checking them in order of priority:
WP_ENVIRONMENT_TYPE- WordPress core constant (since WP 5.5)WP_ENV- Used by Bedrock and Trellis setups- Kinsta -
KINSTA_ENV_TYPEconstant - WP Engine -
WPE_ENVIRONMENTandIS_WPE_SNAPSHOTconstants - Pantheon -
PANTHEON_ENVIRONMENTconstant - Flywheel -
FLYWHEEL_CONFIG_DIRconstant detection
If no environment constant is detected, the site defaults to Production (red badge) as a safety measure. This ensures you're always aware when working on a potentially live site.
Settings
The Environment Indicators feature has two configurable options under Settings > Version Info > Environment:
| Setting | Description |
|---|---|
| Show Environment Badge | Displays the color-coded badge in the admin bar |
| Admin Bar Highlight | Adds a colored top border to the entire admin bar matching the environment color |
Admin Bar Highlight
When the Admin Bar Highlight option is enabled, the entire top of the admin bar receives a 3px colored border:
- Red border - Production environment
- Orange border - Staging environment
- Green border - Development or Local environment
This provides an even more prominent visual indicator that is visible on every admin page.
Setting the Environment Type
If your hosting provider doesn't set an environment constant automatically, you can define one in your wp-config.php file:
// WordPress core method (recommended)
define( 'WP_ENVIRONMENT_TYPE', 'staging' );
// Or using the Bedrock convention
define( 'WP_ENV', 'development' );
Accepted values for WP_ENVIRONMENT_TYPE are: local, development, staging, and production.