Introducing the Admin Color Bar Plugin for DesktopServer v3.8 (and Higher)
When we released DesktopServer v3.8, we introduced you to the Developer Plugin feature. Developer Plugins make managing workflow easier for developers and designers but the plugins do not remain on the live sites. We plan to build quite a few more plugins that extend the functionality of DesktopServer.
Every local dev site admin bar looks the same as the live site admin interface. This can make it frustrating when you have multiple browsers open – even if you have multiple screens. Adding a little color to help organize your workspace and workflow can go a long way in reducing frustrations and hiccups you have to deal with on a daily basis. We know this is a “little thing” but you know how it is – sometimes it’s the little things that can make a day go so much smoother!
In this tutorial we walk you through how to install and use the Admin Color Bar Plugin that we built. The plugin removes the “Hello, Dolly!” message that comes with every WordPress installation and replaces it with the words “Local Development Website.” The plugin changes the color of the admin bar to “WordPress blue” on default but you can customize that color for your different projects. We hope this quick developer plugin will be useful for you when creating multiple workspaces or just as a part of your best practices going forward.
Update DS to v3.8 (or Newer)
Make sure you are running the latest edition of Desktopserver). Update if necessary as this plugin will not work on older versions. If you have never installed DS before you will want to set up an account and download the free version. This plugin will work with both the Limited and Premium edition. Please review the directions for first time installation.
I. Install the DS Local Admin Color Bar Plugin
A) Download the zip file from the ServerPress GitHub account to your computer.
B) Unzip the file and copy to your DesktopServer folder. The destination location is as follows:
- MAC > Applications/XAMPP/ds-plugins
- PC > c:\xampplite\ds-plugins
You have now installed the Developer Plugin for DesktopServer that will allow you to change the color of your local admin bar. So – let’s go do that!
II. Using the Plugin
A) First, open DesktopServer. Make sure that you have selected “Yes. Restart DesktopServer with privileges.” and click Next.
B) Then select the first option, “Stop or restart the web and database services.” and click Next.
C) On the next screen, select “Restart the web and database services.” AND you want to make sure that the “Local Admin Bar Color” Developer Plugin is selected. Now…click Next!
D) Success! Click Next!
E) Now, click the “Sites” button in the bottom left corner.
F) Select “Visit Website” or “Dashboard” for any of your Development Sites to see the new blue admin bar!
G) You will see that the bar at the top of your website is now a nice pretty WordPress Blue (whereas before it was black.)
“WordPress Blue” is the default color for the ServerPress Admin Color Bar Color Plugin. (You can change the default color; we’ll get to that next.)
III. Customizing the Color of the Local Admin 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!