How to create a development environment for WordPress

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

When redesigning 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 into production for maintenance during this time. To do this, it is necessary to prepare a pre-production environment in which the site will be duplicated for a redesign.

There are many methods for working with WordPress. In the context of a site realized with a CMS, we will privilege a server-side development environment which will offer the advantage of working in the same environment as the site in production.

1. Creating the pre-production environment

Website creation

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

Creation of the database

After creating the site that will host the copy of your current site, it is necessary to prepare the database in which you will duplicate all its content (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 of files and database

Once the site and the database of the pre-production environment are created, all you have to do is duplicate the files and content of your site in it.

To copy the files, we recommend using our FTP Manager or doing it in SSH to go faster. For the database, you can either export it and import it via our Manager, or you can do it again in SSH if your database is large ( guide ).

Adaptation of the WordPress configuration file

The last step is to adopt the following data of the wp-config.php file  of the site in pre-production:

  • the name of the database (DB_NAME)
  • the user of the database (DB_USER)
  • the user password of the database (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 in maintenance the site of pre-production in order to avoid the indexation of this last one by the search engines. To do this, you can activate Infomaniak's maintenance mode.

2. Redesign of the site in the pre-production environment

Now that your development environment is ready, you can freely work on redesigning your WordPress site: install one of our 80 free themes  (Elegant Themes), test extensions, review the structure of the site, etc.

If you change the structure of your site and the URLs of your articles/pages change, you can use a free extension like Redirect to automatically create redirects. This will prevent your visitors from getting 404 pages while the engines reindex your site or if external sites link to your site.

3. The launch of the new site

When you're done redesigning your site, all you need to do is change the target directory from the production site to the production environment directory and change the pre-production site URLs to the domain name of the site in production through an extension like Velvet Blues Update URLs or via phpMyAdmin.

If you use a cache extension like WP-Rocket, W3 Total Cache or WP Super Cache, it will be necessary to completely empty all the cache or disable and then reactivate the plugin.

After the usual checks (missing images? Erroneous links? Etc.), all you have to do is disable the maintenance mode of your site and admire the result.

In summary, here are the steps to follow to put your site into production:

  1. change the target directory of the site your-site.com  to / prepared
  2. use the Velvet Blues Update URLs plugin to replace URLs in preprod.your-site.com articles and pages  to your-site.com
  3. empty or even disable and reactivate your cache plugin
  4. check that your site is working properly
  5. disable maintenance

4. Retrieving the latest changes

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

Next Blog >>

How to install a free SSL certificate on GoDaddy

—    Sahil Tanna