Installing a web server on your computer

The first step to configure a local development environment is to install a local web server on your computer. This will transform your computer into a system capable of displaying web pages and performing all tasks related to rendering a WordPress website locally.

Having a local web server has many benefits, as follows:

• It provides a quick response to the frequent page refreshes that are made as plugin code is written, tested, and refined, since all information is processed locally
• It removes the need to constantly upload new plugin file versions to a remote web server to validate code changes
• It allows development to take place when no internet connection is available (for example, when traveling on an airplane)
• It offers a worry-free programming environment, where you cannot bring down a live website with a programming error or an infinite loop

There are many free packages available online that contain all of the web server components necessary to run a WordPress installation. This recipe shows you how to easily install one of these packages.

How to do it...

1. Visit the XAMPP website (https://www.apachefriends.org/) and download the appropriate XAMPP package for your computer.

Note

XAMPP is available for Windows, macOS, and Linux platforms. The screenshots in this recipe were taken from XAMPP version 5.6.30 on Windows 10. The installation steps and exact dialog content might vary based on your choice of platform.

2. Optional on Windows: Disable the Windows User Access Control (UAC) feature to give full permissions to XAMPP to install itself on your system (look up the steps to perform this procedure on your favorite search engine).
3. Launch the XAMPP installer (xampp-win32-5.6.30-0-VC11-installer.exe on the Windows platform).
4. Acknowledge the warning message about User Access Control (UAC) and click on Next to start the installation process.
5. On the following screen, which lists all of the components that can be installed, uncheck the boxes for FileZilla FTP Server, Mercury Mail Server, Tomcat, Perl, and Webalizer, then click on Next:

6. On the Installation folder screen, leave the default value for the installation directory if possible (c:\xampp), since some references to this folder will be made in this book, then click on Next.
7. Click on the Next button to proceed with the web server installation.
8. Make sure that the option to start the Control Panel is checked and click on Finish once the installation is complete.
9. Select your preferred language for the XAMPP Control Panel and click on Save to launch the application.
10. Click the Start buttons for Apache and MySQL to launch these modules. Their names will be highlighted in green once they have been successfully started, as shown in the following screenshot:

11. Open a web browser and navigate to the address http://localhost to display your local web server's welcome page:

12. Open the c:\xampp\apache\conf\httpd.conf file in a text editor (for example, Notepad).
13. Search for the DocumentRoot configuration option and change its value to a different location on the disk to avoid keeping your project files under the original installation directory. For example, you could set it to a new directory designed to hold your local development installation of WordPress, such as DocumentRoot "C:/WPDev".

Note

Notice that forward slashes are used in this path. You should be careful if you copy and paste a path from a file explorer window.

14. Search for the Directory option and change it to the same path that was used for DocumentRoot, that is, <Directory "C:/WPDev">.
15. Save and close the httpd.conf file.
16. Create the directory specified as DocumentRoot, if it does not already exist on your computer.
17. Open XAMPP Control Panel.
18. Stop and re-start the Apache service for the new configuration to take effect.

Note

Trying to access the local web server's welcome page will no longer work after having performed steps 14 through 20, since the new directory specified is currently empty. This will be corrected in the next recipe.

How it works...

The XAMPP package contains all of the components necessary to run a web server capable of hosting a WordPress website on your computer. These components include:

• Apache web server
• PHP interpreter
• MySQL database server
• phpMyAdmin database management interface

The XAMPP package also includes other components, which are not required to run a local WordPress development site.

Once XAMPP is installed and started, the keyword localhost that we type in the web browser is recognized by the operating system as a request to communicate with the web server on the local computer and the Apache web server displays the welcome page from its documentation.

The XAMPP documentation is a set of flat HTML files located in the c:\xampp\htdocs directory on the Windows platform. This is the web server's default working directory.

The last few steps of the recipe instruct the Apache web server to look for the local website's content in a new directory. This is a safety precaution to be sure that site files are not deleted inadvertently if XAMPP is uninstalled. It can also help in managing multiple sites on a single computer.

There's more...

While XAMPP is a full-featured local web server package and is available on the three major operating systems, there are many others available online. Most of these packages will run the required web services on the computer directly, while more advanced packages, such as Varying Vagrant Vagrants (VVV), will virtualize a Linux-based web server on your computer to create a more accurate replica of a final deployment environment optimized for WordPress. Here is a list of some of the most popular local web server packages: For Windows:

• WampServer (http://www.wampserver.com/en/)
• EasyPHP (http://www.easyphp.org/)

For macOS X:

• MAMP (https://www.mamp.info/en)

For Windows, Mac, or Linux:

• Varying Vagrant Vagrants (https://varyingvagrantvagrants.org)

Note

For a more complete list of web server packages, visit https://en.wikipedia.org/wiki/List_of_AMP_packages.

Creating a remote web development environment

If it's not possible for you to set up a local web server to develop WordPress plugins, or if you are planning to share the development tasks with one or more people, then an alternative to setting up a local web server is to create a remote development environment.

The easiest way to create such an environment, assuming that you already have a web hosting account set up, is to create a sub-domain off your main domain. This will allow you to create a standalone test installation for WordPress that will still provide safety from affecting a live site, but will not carry the other benefits of a local installation.

See also

• The Downloading and configuring a local WordPress installation recipe