How To Create a Sandbox Environment For WordPress

When you play with different layouts, content delivery methods or backend logics with WordPress without affecting your public facing site, it is handy to have a sandbox environment where you can go nuts without affecting your production environment.

There are many ways to create a sandbox environment. You can created it anywhere (e.g. local computer or entirely separate servers). In this post, I will focus on creating a sandbox environment within the same server by creating a subdomain with your hosting provider. Subdomains let you host multiple websites with one domain name.

This activity is enormously enjoyable as you can play with many different technologies and many configuration steps. You will get use tools such as cPanel, Linux server, MySQL, phpAdmin, and ETL tool. It is cool.

Prerequisite

Account with a hosting provider with WordPress installed.

SSH & Remote Database access.

OK, let’s begin!

Steps

(1) Create a subdomain

Create a subdomain. Most hosting providers let you create subdomains. If not, you probably should change the provider because it is I believe one of the critical factors for hosting provider selection. Each provider has a different way of creating it. Most of them offer the cPanel hosting account manager and you can use it to create it. When it comes to managing your account, cPanel is really your best friend. You can configure pretty much everything there.

This site is hosted on bluehost. In bluehost, you can create a subdomain through cPanel as this. You can google how to for your provider.

(2) Install WordPress in the subdomain

You can do this through cPanel by clicking WordPress installation under the subdomain. It will create a separate folder structure and database for the sandbox.

(3) Configure SSH Access to the server

For SSH access, you need to check the provider’s documentation (for bluehost here). It usually requires host server’s IP address, user name, password and private key.  I use putty to connect from my Windows machine.

(4) Move entire wp-content folder to sandbox folder in the server

The sandbox folder is created within the main folder (e.g. public_html). You need to copy the folder called wp-content. First of all, make sure to rename the original wp-content folder in the sandbox folder so that you can roll it back if something goes wrong. It is a good development practice.

# (1) go into sandbox folder and rename the original wp-content
cd public_html/sandbox
mv wp-content wp-content-backup

# (2) copy the entire wp-content from production to sandbox
cp -a ~public_html/wp-content ./sandbox/

(6) Create remote database access

You should be able to do it from cPanel or myPhpAdmin. You need to check your provider’s documentation (bluehost here).

(7) Migrate data from production to sandbox database

There are many ways of doing this. My solution is to use an ETL tool since I am an ETL developer. I used the open source ETL tool, called Talend Open Studio. In my opinion, is the best free ETL tool out there. I tried Clover and Pentaho in the past, but Talend absolutely kicks arse in terms of ease of use and functionality.

I wrote an extensive how to.

Check out my development guide for this step: How To Migrate WordPress MySQL Data From Production To Sandbox With Talend

(8) Update two values in the option table

After copying all the necessary data to the sandbox database, you still need to do change two values in the options table. This can be done from phpMyDamin (you can usually go there from cPanel). These steps can be incorporated into the ETL job, too. Changing database values is fun. So, I did it manually.

  1. You need to change option_value = 0 where option_name = blog_public. This will tick the option to discourage search engines from indexing this site. It is not a good SEO practice to let search engines index your sandbox.

Ok, now you login to wd-admin. Nah, it won’t work. You will get the error message below.

WordPress Admin – Sorry, you are not allowed to access this page.

A simple database update can resolve this error. Here is how.

  1. Change the prefix of option_name column value where it has the value <prefix>_user_roles. WordPress identifies environments by prefix. Since we brought the exact copy of the production environment, the prefix for user_roles is set to the production one. You need to change it to the sandbox one. If you do not do this, you don’t have admin right when you login to wp-admin.

It’s all done. Now, you can go to your sandbox url or log into wp-admin to see if you have the same production website.

Epic!

Front-End
TypeScript: type aliases to check type equality

This post is to analyse how the type equality check by using type aliases proposed by Matt Pocock in his twitter post. These type aliases allow us to elegantly express type equality checks in unit tests. All we need to do is to pass the output and expected types in …

Front-End
Fixing it.only type error in Jest

If you are getting a type error with it.only in Jest, it could be due to incorrect TypeScript typings or incompatible versions of Jest and TypeScript. To resolve this issue, you can try the following steps: Make sure you have the latest versions of Jest and its TypeScript typings installed …

Front-End
yup conditional validation example

Here’s an example of a Yup validation logic where the first input field is optional but, if filled, it must contain only alphabetic characters, and the second input field is required: import * as Yup from “yup”; const validationSchema = Yup.object().shape({ firstField: Yup.string().matches(/^[A-Za-z]*$/, { message: “First field must contain only …