How to create a development environment for WordPress

In this article, you will discover how to work on a WordPress site with a development environment.

During the redesign of a WordPress site, it is useful to be able to work on a copy of the site with a similar development environment without putting the site in production into maintenance during this time. To do this you need to prepare a pre-production environment on which the site for the redesign will be duplicated.

There are many methods for working with WordPress. With a site created with a CMS, we favor a development environment on the server side which will offer the advantage of working on the same environment as the site in production.

1. Creation of the pre-production environment

Creation of the site

The first step is to create the site on which you are going to copy the current version of your Internet site. It is therefore necessary to create a new site (for example, preprod.your-site.com) with a directory of its own on your web hosting. To do this on Infomaniak, simply follow this guide taking care to create a new directory (for example /preprod) that is not located in the folder of your site currently in production.

Creation of the database

After you have created the site that will host the copy of your current site you need to prepare the database in which you will duplicate all its contents (pages, articles, comments, etc.). If needed, this guide shows you step by step how to create a new database and a new user for your development environment.

Copy the files and the database

Once the site and the database of the pre-production environment is created, it only remains for you to duplicate the files and the content of your site within that pre-production environment.

To copy the files, we recommend that you use either our FTP Manager or SSH to go more quickly. For the database, you can either export and import via our manager, or once again do it using SSH if your database is large (guide).

Adaptation of the WordPress configuration file

The last step is to adapt the following data in the file wp-config.phpin the pre-production site:

the database name (DB_NAME)
the database user (DB_USER)
the database user’s password (DB_PASSWORD)

If the site in production is in https, it will also be necessary to activate an SSL certificate on the pre-production site (guide).

Finally, we advise you to put the pre-production site in maintenance to avoid it being indexed by search engines. To do this, you can enable the Infomaniak maintenance mode.

2. Redesigning the site in the pre-production environment

Now that your development environment is ready, you can freely work on the redesign of your WordPress site: installing one of our 80 free themes (Elegant Themes), testing the extensions, in-depth review of the site structure, etc.

If you change the structure of your site and the URLs of your articles/pages change, you can use a free extension such as Redirection to automatically create redirections. This will prevent your visitors from landing on 404 pages while the engines re-index your site or if external sites have links on your site.

3. Putting the new site in production

When you have completed the redesign of your site, all you have to do is change the target directory of the site in production to the directory of the production environment and change the URLs of the pre-production site based on the domain name of the site in production using an extension such as Velvet Blues Update URLs or via phpMyAdmin.

If you use a cache extension like WP-rocket, W3 Total Cache or WP Super Cache, you will need to completely empty all cache by disabling and then re-enabling the plugin.

After verifying usage (missing images? faulty links? etc.), you simply need to disable the maintenance mode of your site and admire the result 🙂

To summarize, here are the steps to follow to put your site in production:

change the target directory of the site your-site.comto /preprod
use the plugin Velvet Blues Update URLs to replace the URLs in the articles and pages from preprod.your-site.com to your-site.com
empty and also deactivate and then re-activate your cache plugin
check the proper functioning of your site
disable the maintenance

4. Recovery of the latest changes

If you have continued to change your site in production during the redesign of your site, it will be necessary to recover your changes (articles, media, pages, etc.).

****

Infomaniak hostings and Cloud Servers are optimized for WordPress and offer many advantages for this CMS: