Show Environment In Admin Bar Wordpress Plugin - Rating, Reviews, Demo & Download

Show Environment In Admin Bar Preview Wordpress Plugin - Rating, Reviews, Demo & Download
No ratings yet
Free
Follow for free plugins, new theme releases and theme news

Plugin Description

If you’re like me, you often have multiple versions of the same WordPress site open in different browser windows, e.g., production in one window and development in another window. And if you’re like me, you have also unwittingly edited content in the production environment thinking you were doing so in the development environment. If so, then this plugin is for you!

This plugin adds an indication of the current environment to the Admin Bar that is easier to see than examining the URL in your browser’s address bar.

Developer Notes

Out-of-the-box, 3 classes of environment are recongized:

  1. Development
    • The node added to the Admin Bar has a green background (i.e., Go ahead, it is safe to make changes).
    • If WP is running on localhost (either a loopback IP address or LAN IP address), then ‘Local’ displays in the Admin Bar.
    • If WP_DEBUG is defined & true, then ‘Dev’ displays in the Admin Bar.
  2. Staging
    • The node added to the Admin Bar has a yellow-ish background (i.e., Slow down, changes might make it into the production site).
    • It is not possible to automatically detect a staging environment, so you will need to use the SHC_SHOW_ENV_STAGING constant or shc_show_env_id_env filter, see below.
  3. Production
    • The node added to the Admin Bar has a red background (i.e., Stop/be carefull with any changes you make).
    • If neither a development nor staging environment is detected, then ‘Prod’ is displayed in the Admin Bar.

You can change that out-of-the-box behavior in 3 different ways:

Hooking into the shc_show_env_id_env filter

This filter should return an (indexed) array of strings. The value in index 0 is the “name” of the environment to display in the Admin Bar. The value in index 1 is the “class” of the environment (e.g., ‘prod’, ‘staging’, ‘dev’, or a custom class). If you return a custom class, then you must also define CSS rules for how that custom class should be formatted. See below.

For example,

add_filter( 'shc_show_env_id_env', 'my_show_env_id_env' );

function my_show_env_id_env( $env ) {
    // match staging.example.com
    if ( preg_match( '/bstagingb/i', $_SERVER['HTTP_HOST'] ) {
        return array( 'Staging', 'staging' );
    }
    // match qa.example.com
    if ( preg_match( '/bqab/i', $_SERVER['HTTP_HOST'] ) {
        return array( 'QA', 'qa' );
    }

    return $env;
}

If you return a custom class in the function you hook to shc_show_env_id_env, then you also need to enqueue CSS to style that custom class. For example, to style the ‘qa’ custom class in the example above, you could do:

add_action( 'init', 'my_show_env_init' );

function my_show_env_init() {
    if ( is_admin() ) {
        add_action( 'admin_enqueue_scripts', 'my_show_env_enqueue' );
    }
    elseif ( is_admin_bar_showing() ) {
        add_action( 'wp_enqueue_scripts', 'my_show_env_enqueue' );
    }
}

function my_show_env_enqueue() {
    wp_enqueue_style( 'my_show_env', plugins_url( 'css/my_show_env_styles.css', __FILE__ ) );
}

where css/my_show_env_styles.css contains:

#wpadminbar .ab-top-menu .shc-show-env.qa .ab-item,
#wpadminbar .ab-top-menu .shc-show-env.qa:hover .ab-item
{
    background-color: #dd823b ;
}

The background-color you choose for your custom class(es) should be relatively distinct from the background-colors used for all of the admin color schemes shipped with WP (after all, the whole point of this plugin is to make the indicator added to the Admin Bar stand out so you can easily see it and know which environment you are logged into). If the background-color you choose is not sufficiently distinct, you could add additional styling to help it stand out. For example, the stylesheet included with this plugin contains the following rule:

/*
 * our prod background-color is REAL close the admin bar background-color in the sunrise
 * Admin Color Scheme, so put a black border around it to help it stand out
 */
.admin-color-sunrise #wpadminbar .ab-top-menu .shc-show-env.prod .ab-item
{
    border: 2px solid black ;
    box-sizing: border-box ;
}

Defining constants in wp-config.php

You can also change the out-of-the-box behavior by defining 1 of 3 different constants (e.g., in wp-config.php) as follows:

// you can define one of these 3 constants
define( 'SHC_SHOW_ENV_PROD', 'Production' );
define( 'SHC_SHOW_ENV_STAGING', 'Staging' );
define( 'SHC_SHOW_ENV_DEV', 'Development' );

If one of these constants is defined, then it’s value is used as the “name” of the environment in the Admin Bar. If more than one of these constants is defined (you shouldn’t do that), SHC_SHOW_ENV_PROD takes precedence, followed by SHC_SHOW_ENV_STAGING, followed by SHC_SHOW_ENV_DEV.

If one of these 3 constants is defined, then the shc_show_env_id_env filter is not applied!

Setting web server environment variables

You can also change the out-of-the-box behavior by defining 1 of 3 different environment variables (e.g., in the web server configuration) as follows:

  1. SHC_SHOW_ENV_PROD
  2. SHC_SHOW_ENV_STAGING
  3. SHC_SHOW_ENV_DEV

If one of these web server environment variables is set, then it’s value is used as the “name” of the environment in the Admin Bar. If more than one of these web server environment variables is set (BTW, you shouldn’t do that), SHC_SHOW_ENV_PROD takes precedence, followed by SHC_SHOW_ENV_STAGING, followed by SHC_SHOW_ENV_DEV.

If one of these 3 web server environment variables is set, then the constants discussed above are not examined nor is the shc_show_env_id_env filter applied!

Conditionally hiding the environment in the Admin Bar

You can also conditionally hide the indication of the environment in the Admin Bar by hooking into the shc_show_env_hide filter. This filter should return a boolean, with true meaning “hide the environment in the admin bar”. For example,

add_filter( 'shc_show_env_hide', 'my_env_conditionally_hide' );

function my_env_conditionally_hide( $default ) {
    return ! current_user_can( 'manage_options' );
}

I was inspired to write this plugin when I saw the Blue Admin Bar plugin. I thought that was a great idea, but having the background-color of the entire Admin Bar be different was a bit jarring.

Screenshots

  1. Production

    Production

  2. Staging

    Staging

  3. Development

    Development

  4. Custom — QA

    Custom — QA


Reviews & Comments