How To Modify XAMPP Virtual Host & Get Localhost URLs

Developing locally speeds up the website development process. You can edit, save, test and view the website without having to upload files to a server. In a previous post we went over how to install WordPress locally using XAMPP. This is a great resource for a single website build but what happens if you need to build another website? Do you reset the database, deleting all that content? Do you have generic content so you can keep developing themes? An easy approach is to modify XAMPP virtual host files and create local development URLs with new instances of WordPress. Here’s how:

Step 1: Stop Apache and MySQL on XAMPP

When you modify the host files you need to restart the server. We find it easier to stop the service first, make the change then fire up XAMPP again.

Step 2: Edit Your Entry XAMPP Host File

This process may be slightly different on a Mac but on Windows, follow these steps:

• Right click and run Notepad as an administration.
• Open the following file by visiting C > Windows > System32 > drivers > etc > host > hosts
• If the host folder looks empty be sure to select All Files (*.*) near the file name input. It seems to be set to .txt by default.
• After the commented section add 127.0.0.1 web.dev for each development URL you are setting up. We like .dev for our local development but you can label it what you like. For example:
  • 127.0.0.1 website.dev
  • 127.0.0.1 website2.local
  • 127.0.0.1 newweb.development
• Save the file and close Notepad.

Step 3: Edit XAMPP’s vHost File

• Open C > Xampp > Apache > Conf > extra > httpd-vhost.conf in your favorite text editor
• After the commented section you add the following:
   
  <VirtualHost *:80>
DocumentRoot "LOCAL_WEBSITE_FOLDER_PATH"
ServerName web.dev
<Directory "LOCAL_WEBSITE_FOLDER_PATH">
Options Indexes FollowSymLinks ExecCGI Includes
Order allow,deny
Allow from all
</Directory>
</VirtualHost>

  LOCAL_WEBSITE_FOLDER_PATH is the path to the folder that contains all the WordPress files. Both locations in the code above are the same. Something like C:/xampp/htdocs/project_folder/
• For the ServerName you would add the local URL we created in step 2.
• Add another block for each website you need to develop.

Step 4: Restart

Restart XAMPP and text web.dev in your browser.

Now that you have WordPress running locally and local URLs set up you are ready to start developing faster than ever before.