This guide details how to work on a WordPress site with a development environment.

Introduction

• This process can be used at the beginning of a staging process, i.e., the creation of a new version of your website in a live environment, on a development or test environment:
  • This allows website owners to test features, security updates, plugins, themes, WordPress updates, and content changes without risking disruptions or problems on the live site.
  • Once the tests have been performed and the changes have been validated on the staging copy, it is possible to deploy them to production (on the live site) using automated deployment tools or by making the changes manually.

Simple method

To install and prepare a new WordPress site using the Infomaniak installer without overwriting your current website:

1. Install WordPress in a second location

Refer to this other guide to create the new website (in parallel with the existing website domain.xyz) by assigning it a domain name in the format new.domain.xyz, for example, and installing WordPress via Web Applications (Infomaniak WordPress installer).

At this stage, the main website (domain.xyz) remains unchanged, and you can work on the new website new.domain.xyz without any issues. Both websites will function in parallel.

2. Replace the old site with the new one

Once the new site is finished, you can delete the old site in order to reuse its domain name on the new site:

1. Delete the old website to make the domain name available and allow you to reuse it.
2. Add domain.xyz as an alias for new.domain.xyz.
3. Reverse the alias with the main domain.
4. Remove (unlink/delete) new.domain.xyz, which has become an alias.
5. As a precaution, check the main URL of the WordPress site via the Web Applications dashboard in the Infomaniak Manager, to ensure that it corresponds to the new name and no longer to the subdomain you had chosen.

Advanced method

To work on an existing WordPress site without modifying its public version, it is recommended to proceed in 3 steps:

1. Duplicate the existing site
2. Then, work on your copy.
3. Modify the target directory of the live site to the directory of the production environment, and update the URLs of the pre-production site based on the domain name of the live site, using a WordPress plugin or via phpMyAdmin.

1. Duplicate the website to a second location

1. Refer to this other guide to create the new website (in parallel with the existing website domain.xyz) by assigning it a domain name in the format new.domain.xyz, for example, and installing WordPress using the Web Applications (Infomaniak WordPress installer).
2. Copy your existing website and paste it onto the newly created second WordPress website, using a WordPress plugin.

2. Edit the duplicated website

1. At this stage, the main site (domain.xyz) remains unchanged, and you can work on the new site new.domain.xyz without any issues. Both sites operate in parallel.
2. It is recommended to install a WordPress extension (there are dozens available) dedicated to putting the second site into maintenance mode.
3. If you modify the structure of your website and the URLs of your articles/pages change, you can use a free extension like Redirection to automatically create redirects. This will prevent your visitors from encountering 404 pages while search engines re-index your site or if external sites link to your site.

3. Replace the target

1. Once you have finished redesigning your website, all you need 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 according to the domain name of the production site using a plugin.
2. If you are using a caching plugin such as WP-Rocket, W3 Total Cache, or WP Super Cache, you will need to completely clear all the cache or disable and then reactivate the plugin.
3. If you continued to make changes to your live site during the redesign, you will need to retrieve your changes (articles, media, pages, etc.).
4. After performing the necessary checks (missing images, broken links, etc.), all that remains is to disable maintenance mode on your site and admire the result.