Customizing Local Admin Color Bar

You can quickly and easily set the color of the admin bar to anything you’d like. As a best practice, we recommend you avoid using red or green colors for the admin bar. There is not a technical problem with using red or green, it is a UI issue within the admin interface while using Airplane Mode. If you have Airplane Mode installed, the indicator color for the plugin is a red or green dot in your admin bar. If you set your admin bar to a red or green, chances are the Airplane Mode indicator dot will “disappear” and you will be frustrated and/or confused if trying to utilize the Airplane Mode.  Of course if you never use Airplane Mode then you could set your admin bar to any red or green color you want!

A) Access wp-config.php

1) To change the admin bar color you will need to access the wp-config.php file for the specific development site you are working on. To find this file you will want to navigate through Finder or Explorer on your local drive.

2) On a Mac, you will go to Finder > Documents > Websites > Specific Website > wp-config.php file. For the purpose of this tutorial we will work with the  www.admincolor.dev folder. Your dev folder will be titled different; this title’s file name will reflect whatever you named your local .dev site when you set it up through the DesktopServer.

B) Open the file in your text editor

1) Open the wp-config.php file with the text editor of your choice.

2) You are going to copy and paste this snippet into the wp-config.php file for each individual development site:

define(‘DS_COLOR’, ‘your color of choice’);

You can use a color name (like ORANGE or PINK) or you can use hex codes. We’ve chosen to a utilize hex code. The highlighted area is where we copied/pasted/customized the snippet above.

C) Save and close the file. 

D) View the Site!

Head back over to your Development Website panel and select the website or dashboard view for the corresponding website.

For this tutorial that means I’m going to click on the Visit Website button associated with the AdminColor.dev site.

And boom! Here is my newly updated Local Admin Color Bar updated with the awesome fuchsia!

We find this is really helpful when we have several development sites open at the same time. We can quickly shift between projects without worrying about breaking (too many) things!