I do most of my WordPress development using a test environment that I installed on a Ubuntu Virtual Machine (VM). This let’s me play around as much as I want without any risk to my production website or my computer; everything is contained within the VM, and it costs me nothing because I only use open-source and/or free software (read about it at http://wp.me/p1iF71-4x).
However, I prefer to do the actual development and testing from Windows 7 because I prefer using it to any other OS. While my VM is running my WordPress installation, I can access the files from my Windows host OS and use development tools like Notepad++ to access the WordPress files via my home network.
To accomplish this, Ubuntu will need to install a sharing service so Windows can “see” it using the virtual network adapter. When we’re finished, the VM will appear to be just another computer on the network.
First, navigate to opt/lampp/htdocs and right-click on the wordpress folder. Select “Sharing Options” to open the window.
Check the box for “Share this folder” and click thebutton when prompted. You’ll need to enter your password.
Once the service has been installed, you’ll see thewindow as confirmation.
Close the confirmation window, then click thebutton in the new window that pops up.
Log back in to Ubuntu to enable the new service. Now you should be able to see the VM as a computer on your network from the host OS.
When you access it, you’ll need to provide the username and password of your Ubuntu login. I suggest checking the “Remember my credentials” box if your host OS is already password-protected in order to avoid having to re-enter the login information in the future.
Notice that the wordpress folder is not visible? That’s OK. Because the sharing service wasn’t installed until now, the folder wasn’t actuall shared when we checked the box to share it previously. Go back into Ubuntu and (re)share the folder. This time you won’t be prompted to install the sharing service. Instead, you’ll have to check the box for “Allow others to create and delete files in this folder” in order to allow access to the files from another computer (i.e. your host OS). You can also check the box for “Guest access” if you don’t want to enter your Ubuntu login information in order to access it (this gives anyone on your home network access to the folder, so use with caution).
Now you can refresh the view of your VM in Windows and you’ll see the wordpress folder.
From this point you can create, modify, and delete files in the wordpress folder just as you would in Windows. Notepad++ and other development tools should have no problem accessing files within this folder.
Configure the WordPress Site for Access from Another Computer on the Network
In order to test your development changes, you’ll want to open up your WordPress test site in a browser frequently. You can switch to the VM and open it in Firefox, but this gets a little tedious because it requires a few extra clicks and/or keypresses.
To access your WordPress site from the host OS, you can type the IP address of the VM or the network share name followed by “/wordpress” in your browser. The first time you do this, however, you’ll probably notice that the site lacks any styling or images. This is because by default WordPress looks for most of its supporting files via the “localhost” path. On the VM, localhost points to the XAMPP server running WordPress. On the host OS, however, localhost points to the host computer, not the VM. This is why none of the supporting files are loaded.
To fix this, we need to tell WordPress to look in another location besides “localhost” that results in the correct path. Open your WordPress site on the VM, login to the admin dashboard, and go to thepage.
Change the WordPress address (url) setting and the Site address setting to “http://your-vm-computer-name/wordpress” or the IP address of your VM. I used “http://josh-virtualbox/wordpress” because the computer name of my VM is “josh-virtualbox.” Enter the appropriate information for your VM, and make sure it is spelled exactly the way that your host OS sees it on the network.
Note: If you use the computer name of the VM, the WordPress site will not load properly in the VM if you try to view it in Firefox (because that path isn’t valid to the VM). If you use the IP address, it will work in the VM and the host OS. However, if the IP address changes (e.g. if it is assigned dynamically by DHCP), the site will not load properly in either OS. Set a static IP for the VM if you decide to use the IP address instead of the computer name.
I suggest using the computer name for now. You can always access the admin settings for the site from the host OS and change it to an IP address or back to localhost if you need to view the site in the VM. For now, though, you’ll be doing most of your development in Windows, so there’s no need to access the site from within the VM.
That’s it for now! Once these changes have been made, you’ll be able to use your WordPress development environment from your host OS (or any computer on your network) and view the site as you make changes. If you have any suggestions to improve on these steps, leave them in the comments!