If you are interested, here is a short “how to” for setting up a WordPress local development system at home. Some tech talk lies ahead, but it is easily accomplished by anyone serious about doing some WordPress programming.
In my last article, I described the basics of programming WordPress using a few tools like the NetBeans IDE (integrated development environment) and simple PHP programming. A basic WordPress local development system consists of an IDE like NetBeans and a local web server. This article is about setting up a web server on your PC and using it for programming WordPress. Everything described here is open source (free), runs on Windows (as well as Linux and Apple) and widely supported.
There are various packages for setting up a WordPress local development server on your PC. The easiest one I have used is a local install from Bitnami. Just download and install. You will have your local web server up and running in five minutes. When you run the installation, you enter a user name and password for your WordPress server, as well as a name for your local web site. By local, I mean a web site that runs on your computer and home network, but is not visible to the outside world.
I give my WordPress local development server a pretend web site address, such as “test.com”. You can call yours anything you want, it doesn’t really matter. In order to access this “pretend web site”, you need to put the information about it into the Windows “hosts” file. This file is located in the C:\Windows\System32\drivers\etc sub-directory. You can edit this file with Notepad as long as you Run As Administrator. You just need to enter the local IP address of your PC as well as the fake web site name. So, for example, my server PC is located at 192.168.0.5 on my home network. The single line I added to the “hosts” file is:
192.168.0.5 test.com
That’s it. You can now access your private WordPress web site from any computer on your LAN using the pretend web address “HTTP://test.com” in your browser, as long as you modify the hosts file on each computer as described above.
By default, Bitnami installs into a folder on your PC called C:\Bitnami. You can access the web site using your browser, and you can also access all of the server files using your normal Windows Explorer.
WordPress Local Development – Connecting NetBeans and XDebug
In order to write code and upload it to your server, you just configure Netbeans so that it knows three things:
- The name of the folder on your PC where you are going to store your code. This can be a normal Windows folder in My Documents. By default, NetBeans creates a folder for you called “NetBeansProjects”.
- The name of the folder in the server where you want to upload your custom code into WordPress. This is normally the WordPress plugins folder. This folder is located within the Bitnami installation under C:\Bitnami. Since the server is just a normal file structure on your PC, uploading your custom code is easy. Every time you change your code in NetBeans and save it, a copy is transferred to the server automatically.
- The web address of your WordPress local development web site, e.g. “HTTP://test.com” as described above. This is the web site NetBeans will run while you are developing and debugging your code.
Almost there. The last thing you need to do is to activate a program called php_xdebug.dll which included in the Bitnami installation. XDebug is a debugger that you can use to monitor how your custom code runs on the server. This requires adding a few simple lines of instructions in the PHP.INI file in the PHP directory on your server. These lines look like this:
zend_extension=”C:/Bitnami/wordpress-4.3.1-0/php\ext\php_xdebug.dll”
xdebug.remote_enable=true
xdebug.remote_host=127.0.0.1
xdebug.remote_port=9000
xdebug.remote_connect_back=on
The first four lines are required to run XDebug. The fifth line is needed if you are connecting to your WordPress Local Development server from any different computer on your LAN. There are many web pages that describe how to set this up in more detail. But it is easy and it works well. After configuring XDebug, you simply run your NetBeans in debug mode and it will monitor the actual performance of your custom PHP and other code in whatever detail you desire. Keep in mind that for any changes to the configuration file to be applied, you must restart your Apache server.
At this point you have set up a completely professional WordPress local development system(IDE, Server, Debugger) in less than half an hour using open-source software. You are now ready to begin coding.
Three last things, especially if you are running your WordPress local development system on two different computers. By this I mean using PC A for development and PC B as the server.
- First, make sure that port 9000 is open and that your Windows Firewall allows the Bitnami (wordpressApache) server through. Normally, you just need to click “Allow” when the server first runs during the installation.
- Second, make sure that your IDE machine (using NetBeans) can upload code to the Server machine. This is easily done by sharing the C:\Bitnami folder on PC B server using Windows Homegroup. Make sure that you share this folder with both read and write access so that PC A, your NetBeans machine, can access it.
- Thirdly, you need to make sure that XDebug knows the location of where you are storing your custom code on both machines. This is done through an Advanced project configuration feature called Path Mapping. This is only required if you are running on two different computers. Basically, you just map the C:\Bitnami…. code path on the server PC to the local My Documents folder on the NetBeans machine. Figuring this out was my biggest stumbling block.
You can research more details for yourself. But this article covers the important settings and configurations figured out from my own research and mistakes. Now that you are set up for WordPress local development, it’s time to write and test some code.