Using colour schemes to easily distinguish between live and test installations of WordPress

When the web team took on management of the University’s WordPress multi site installation we actually inherited two instances: live and test.

Working with two almost identical installations I discovered a sense of mild anxiety whenever I had both installations open side by side: which version was I currently working with? Was I just about to do something that could potentially break the live site?

I found the answer in admin colour schemes.

New feature blindness

Having used WordPress since version 0.7.1 in 2003 there are certain aspects that I take for granted and am more or less blind to. One is timezone. It was only when the clocks went forward in the spring that I discovered that there was an option to set the timezone as London, UK which automatically updates when the clocks change. Prior to that, for I don’t know how many versions of WordPress I had been using the default value of UTC+0 and had to manually change it every time the clocks went back or forward.

Admin colour schemes

Another feature that I realised that I was blind to was admin colour schemes. When I first started using WordPress in 2003 it had only one interface colour scheme, in later versions it went up to two, but I always stuck to the default.

It was literally only a couple of weeks ago (about six months after it was introduced) that I realised that as of WordPress 3.8 the software shipped with eight colour schemes:

There are eight admin colour schemes installed by default in WordPress 3.8+

There are eight admin colour schemes installed by default in WordPress 3.8+

As soon as I realised this I updated my user profile on our test installation and changed it from ‘default’ to ‘sunrise’.

This bright red interface (below, right) gives me immediate feedback that I am currently working in the test installation.

WordPress admin interfaces side by side: black on left is live; red on right is test

WordPress live installation (left); WordPress test installation (right)

I certainly recommend that if you are working with multiple installations of WordPress (not just live v test, perhaps but different locations or clients) and you are not already making use of admin colour schemes: do look into it.

My favourite Web developer add-ons for Firefox

Mozilla released Firefox 4.0 on Tuesday—it has already been downloaded 16,041,437 times; that’s about 92 downloads a second!— and there is a lot to commend it for: a clean look, that’s not too far away from both Google Chrome and Internet Explorer 9 and it’s much faster too.

While I use Google Chrome for most of my day-to-day browsing I still use Firefox for Web development, largely thanks to the number of mature add-ons available for it. These are my favourites:

1. Firebug


Firebug is the number one reason that I use Firefox. Sure, Chrome and Internet Explorer have their own Web developer tools but none of them come close to Firebug for its awesomeness.

That said, I recently tried out Opera Dragonfly and I was really impressed.

2. Web Developer


A close second is Chris Penderick’s Web Developer toolbar that adds all sorts of useful tools to Firefox: disable CSS, outline headings and tables on the page, show HTML classes and IDs, show image sizes as overlays on the images. Brilliant!

3. ColorZilla


The most useful feature of ColorZilla for me is the eyedropper tool that allows me to sample a colour on a Web page and find out the RGB or HEX value for it.

4. HTML Validator


HTML Validator does exactly what it suggests that it does: it shows HTML validation information in the Firefox add-on bar (what used to be the status bar) at the foot of the browser viewport.

It’s very useful for at-a-glance error checking; obviously, recognising that HTML validation is an ideal and a guide rather than a hard-and-fast rule.

5. Wappalyzer


Wappalyzer is a new add-on for me that adds to Firefox the functionality that I’ve been enjoying with the Chrome Sniffer extension in Google Chrome.

It shows you in the AwesomeBar what technologies are being used, e.g. JavaScript framework, server type, content management system, web statistics, etc.

6. RSS Icon in Awesombar


For some unfathomable reason Mozilla has removed the RSS icon that appears in the AwesomeBar when you visit a page that has an RSS autodiscovery tag, such as the University homepage.

That’s where RSS Icon in Awesombar (sic) comes in. It… well, puts an RSS icon in the AwesomeBar.

7. Tab Mix Plus


There are some options within Firefox that I still cannot believe are missing. There is still no way to, by default, open your homepage when you open a new tab.

Tab Mix Plus allows you to set this option—and a whole lot more, like being able to duplicate existing tabs, or protect or lock tabs so that you don’t accidentally close them.

Over to you…

What are your favourite Firefox add-ons, for Web development or otherwise?