WordPress, add environment type to top admin menu bar

Introduction

Inspired by a recent update in WooCommerce where I’d noticed an indicator of the shops state was shown in the top menu bar (e.g. Live) I thought “wouldn’t that be handy for an environment type?”

TL;DR

This article will show how to add the environment type i.e;

• local,
• development,
• staging,
• or production

…as a small text pill into the top admin menu bar as a quick reference to which version of any given site you are currently working on. Very handy if stressed and working with several sites at the same time ;)

PHP code (left hand side)

The following code will place the current working environment on the left hand side of the top admin menu, unstyled for the moment.

function barrd_add_environment( WP_Admin_Bar $wp_admin_bar ) {
  $environment = ucfirst( wp_get_environment_type() );
  $wp_admin_bar->add_menu(
    [
      'id'    => 'environment',
      'title' => $environment,
    ]
  );
}
add_action( 'admin_bar_menu', 'barrd_add_environment', 100 );

Using the admin_bar_menu hook we can call the WP_Admin_Bar instance by reference ($wp_admin_bar) and add a new menu item via add_menu(). The array arguments work as follows;

• id
  ‘environment’ will become wp-admin-bar-environment used as the list item ID which can be referenced in CSS as #wp-admin-bar-environment.
• title
  Is the text that will be displayed, in this case calling the wp_get_environment_type(), the first character will be uppercased using PHP‘s ucfirst() function.

PHP code (right hand side)

To set it on the right hand side of the menu requires one addition and a small change.

1. An additional array argument of parent is required and set to top-secondary. This sets the menu item on the right hand side.
2. Increase the priority to 500 or above when calling the admin_bar_menu hook. This will push the item as far right as it can go if you already have other items there.

The code below contains the original code and the amendments as described above.

function barrd_add_environment( WP_Admin_Bar $wp_admin_bar ) {
  $environment = ucfirst( wp_get_environment_type() );
  $wp_admin_bar->add_menu(
    [
      'id'     => 'environment',
      'parent' => 'top-secondary',
      'title'  => $environment,
    ]
  );
}
add_action( 'admin_bar_menu', 'barrd_add_environment', 500 );

Adding some style with CSS

The styles below are formatted for SASS.

#wpadminbar {
  #wp-toolbar {
    li#wp-admin-bar-environment div {
      background: rgba(255, 0, 0, 0.75);
      color: white;
      line-height: 1.6;
      height: 20px;
      margin: 7px 12px 0 12px;
      border-radius: 4px;
      text-shadow: 1px 1px 2px #000;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
    }
  }
}

For standard CSS use;

#wpadminbar #wp-toolbar li#wp-admin-bar-environment div { … }

It deliberately uses high specificity to ensure usage without having to resort to !important for overrides.

Have a play till you find what works for you

A red background with usage of both text and box shadows won’t be to everyones taste, it’s meant as an example to get you heading in the right direction.

Final thoughts

Whilst there’s a lot more that at can be done, for example adding different colours to the backgrounds for each version, you could also add icons depicting each variant. If you wanted to get really fancy, add a drop down with URLs to each of the sites (controlled via production‘s Db and export / import into the other sites.)

This has been kept simple and possibly, like me, you too like the simplicity of the functionality. Let me know if you implement into your site(s) and if you have any other ideas to improve upon it, cheers!

Article Information

About Dave A.K.A. 'barrd'

Dave is a Bristol based Scottish Expat who has 20+ years experience of web development. Loves playing guitar, reading books, watching Sci-Fi and tinkering with tech.

Read more about Dave