# Staging Banner on the Front End for Logged-In Users

> Shows a bright fixed banner at the top of every page for logged-in users on development and staging sites, so nobody edits the wrong copy of the site.

- Type: PHP
- Runs: Frontend only
- Category: [Developer](https://wpide.com/library/category/developer/)
- Tags: staging, environment, development, safety
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/dev-environment-front-banner/

## Code

```php
add_action( 'wp_body_open', function () {
    $env = wp_get_environment_type();

    if ( 'production' === $env || ! is_user_logged_in() ) {
        return;
    }

    $colors = array(
        'local'       => '#00a32a',
        'development' => '#2271b1',
        'staging'     => '#d63638',
    );

    printf(
        '<div class="wpide-env-banner" style="position:sticky;top:0;z-index:100000;padding:6px 12px;background:%1$s;color:#fff;text-align:center;font:600 13px/1.4 -apple-system,BlinkMacSystemFont,sans-serif;">%2$s</div>',
        esc_attr( isset( $colors[ $env ] ) ? $colors[ $env ] : '#d63638' ),
        esc_html( strtoupper( $env ) . ' site: changes here do not affect the live site.' )
    );
} );
```

## Notes

Set WP_ENVIRONMENT_TYPE in wp-config.php; production sites show nothing.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Staging Banner on the Front End for Logged-In Users" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/