Ever since I managed to switch all my websites to WordPress, I’ve greatly simplified my local development setup. I don’t need multiple vagrant boxes or docker machines anymore, so for the last 12 months or so, I’ve been running all my local WordPress sites on Local by Flywheel.
For years I ran with the commonly used setup of having seperate TLD’s for my local site and production site. For example, if my production site was billybobstexas.com, I’d set my local dev site to billybobstexas.local. This is fine until you want to move your database from local to live, and have to start messing around finding & replacing URLs in SQL dumps.
One Top Level Domain Fits All
Now I simply set up my local site to be billybobstexas.com, just like my production site, and edit the hosts file at /etc/hosts to point my domain name at the right IP address.
Well, almost. I’m too lazy to even edit my hosts file these days, so I use a hosts switcher app instead. Specifically one called Gas Mask. This way, I can use an exact clone of the live database when testing locally, and I find its just less hassle overall.
Where does WP Dev Flag come into this?
In the past, on multiple occasions, I’ve found myself editing content in the live site, when I should have been editing the local, or installing development plugins on the wrong copy of the site. Its easily done when both sites share the same domain and look identical.
I’ve created a dead simple plugin called WP Dev Flag to add a floating badge on the front end of your development site, so you can easily tell your sites apart. Let’s go through the settings here.
WP Dev Flag Options
The options page is split into two tabs, Trigger Options & Display Options.
Trigger Options
At first glance, the Trigger options look complex but it boils down to one single checkbox: Set This As Development?. Once you check the box & update the settings, it will set your current environment as development, and you’ll get a green message to indicate this.
Display Options
This tab is purely for visual customisation of the badge. You can change the position, colours, and badge text.
By default it looks like this, a floating blue badge at the edge of your browser window:
The (ever so slightly) clever part:
The plugin stores your local server variables in its own settings, and will only appear on the front-end if the stored settings perfectly match the currently detected settings. This way, even if you export the database & code, and deploy it to production, there is no danger of your badge appearing on the live site.
You can rest assured that whenever you see the badge, you’re on development.
I need feedback, of all kinds
Its an ‘edge case’ type of plugin, but I’m sure it will prove useful for someone.
The next version will have a setting for a link URL when clicked, so the plugin could then be commandeered for other purposes, such as linking to a newsletter signup or social profile.
Please do give it a try, and if you like it then please help me out with a review on WordPress.org.
Leave a Reply