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.
Opens WPIDE on
Code
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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.