Mark McNeece of 365i

<p>Environment Indicator adds a prominent visual indicator to the WordPress admin bar showing the current site environment. This high-visibility indicator helps prevent accidental changes on production sites by making the environment instantly recognizable to logged-in users.</p>
<p>Perfect for developers, agencies, and teams managing multiple environments (development, staging, production) across different sites.</p>
<h4>Key Features</h4>
<p><strong>Smart Environment Detection</strong><br />
* Automatically detects environment using WordPress core constants (<code>WP_ENVIRONMENT_TYPE</code>)<br />
* Supports popular hosting providers: WP Engine, Pantheon, Kinsta, Flywheel<br />
* Legacy Bedrock constant support (<code>WP_ENV</code>)<br />
* Subdomain-based heuristics (dev.example.com, staging.example.com)<br />
* Manual override option for custom setups</p>
<p><strong>Customization Options</strong><br />
* <strong>Custom Colors</strong> – Match your branding or personal preferences for each environment<br />
* <strong>Custom Labels</strong> – Rename DEV/STAGING/LIVE to LOCAL, UAT, PRODUCTION, or anything you prefer<br />
* <strong>Role-Based Visibility</strong> – Control which user roles can see the indicator (great for client sites)</p>
<p><strong>Visual Enhancements</strong><br />
* Admin bar label (always visible)<br />
* Full admin bar background coloring (high-visibility option)<br />
* Browser tab prefix – instantly identify environments across multiple tabs<br />
* Top border in wp-admin screens<br />
* Admin footer watermark<br />
* Dashboard widget showing environment status and system information</p>
<p><strong>Export/Import</strong><br />
* Export settings as JSON to deploy across multiple sites<br />
* Import settings from JSON file<br />
* Perfect for agencies managing client sites with consistent configurations</p>
<p><strong>Multisite Compatible</strong><br />
* Full support for WordPress multisite installations<br />
* Network-wide settings when network-activated<br />
* Per-site settings when activated on individual sites</p>
<h4>How It Works</h4>
<p>Detection runs in this order:</p>
<ol>
<li>WordPress core constant: <code>WP_ENVIRONMENT_TYPE</code></li>
<li>Legacy constant: <code>WP_ENV</code></li>
<li>Hosting provider constants (WP Engine, Pantheon, Kinsta, Flywheel)</li>
<li>Subdomain patterns (dev, staging, test, qa)</li>
<li>Default to LIVE if no detection</li>
</ol>
<p>You can always override automatic detection and manually select the environment.</p>
<h4>Perfect For</h4>
<ul>
<li><strong>Developers</strong> – Never accidentally deploy to the wrong environment</li>
<li><strong>Agencies</strong> – Manage multiple client sites with consistent environment indicators</li>
<li><strong>Teams</strong> – Everyone instantly knows which environment they’re working in</li>
<li><strong>Managed Hosting</strong> – Works out-of-the-box with WP Engine, Pantheon, Kinsta, and Flywheel</li>
</ul>
<h4>Zero Impact on Visitors</h4>
<p>The indicator only displays for logged-in users. Public visitors see no performance impact or visual changes.</p>
<h3>Development</h3>
<p>Development of this plugin happens on GitHub: https://github.com/BSolveIT/environment-indicator</p>
<p>Bug reports and feature requests are welcome!</p>


365i Environment Indicator

Displays a color-coded DEV, STAGING, or LIVE indicator in the admin bar to prevent accidental changes on production sites.

Joe Fusco

<p>As a developer, it can sometimes get confusing flipping back and forth between production and development sites. This plugin offers a gentle and anthropomorphic reminder that you are logged into a production site while still allowing unobstructive use.</p>
<h4>Demo</h4>
<p><a href="https://cloud.githubusercontent.com/assets/6676674/16306084/82afaf78-392a-11e6-85e6-d881b0d81943.gif" rel="nofollow ugc">See .gif</a> (Actual animation is much smoother)</p>
<h4>Usage</h4>
<p>Download and activate plugin. No configuration required.</p>
<h4>Animation Requirements</h4>
<ul>
<li>Must be logged in as admin</li>
<li>Cannot be a <code>.dev</code> domain (plugin ignores them)</li>
<li>Browser must support css animations</li>
</ul>
<h4>Browser Support</h4>
<ul>
<li>IE 10+</li>
<li>Edge</li>
<li>Firefox</li>
<li>Chrome</li>
<li>Safari</li>
<li>Opera</li>
<li>iOS Safari</li>
<li>Android Browser</li>
<li>Chrome for Android</li>
</ul>
<h4>Contributing</h4>
<p>Contributions are welcome on GitHub. https://github.com/josephfusco/wp-breathe</p>


WP Breathe

Easily identify a production site by making it visually breathe for admins.

365i Environment Indicator vs WP Breathe