WordPress – Environment Indicator

When managing multiple environments for a WordPress website, such as development, staging, and production, it’s crucial to differentiate between them to prevent mistakes like applying changes to the live site instead of a test environment. The following PHP snippet provides a visual cue in the WordPress admin dashboard to indicate the current environment type.

<?php

if (wp_get_environment_type() !== 'production') {
    add_action('admin_head', function() {
        $css = '<style>
            body::before {
                content: "";
                width: 100%;
                position: fixed;
                bottom: 0;
                left: 0;
                height: 40px;
                background-color: #af2e29;
                z-index: 998;
            }
            body::after {
                content:"' . wp_get_environment_type() . '";
                position: fixed;
                bottom: 0;
                left: 50%;
                height: 40px;
                text-transform: uppercase;
                font-weight: bold;
                color: #ffffff;
                line-height: 40px;
                z-index: 999;
            }
        </style>';

        echo $css;
    });
}

This snippet checks if the current WordPress environment is not set to ‘production’ using wp_get_environment_type(). If it’s a development or staging environment. Don’t forget to declare it in your wp-config.php.