It goes without saying, one of the quickest ways to develop a web site these days is through the use of WordPress. If you have ever worked with WordPress then you already know how rapidly you can develop your site using the pre-made themes. What you may or may not know, is you can develop your own from the comfort of your own desktop without the need for Internet access. Having the ability to design and debug your site before going live allows you to fix everything without interfering with your production server or interrupting service to your visitors.
In the past I’ve coded my clients sites only to run into a number of bugs after going live. This is a common thing for any developer, and we all fall prey to it. It could something be as simple as a missing semicolon in your CSS or forgetting to close a tag in your HTML and PHP. This portable method of development has become a life saver for me in me, not just to debug code, but to develop my work off-line from anywhere I have access to a capable workstation. Whether you are on the road, in the air, at the office, or on vacation you can debug your site completely before launch. You also won’t need to spend money to host this development environment since everything will be able to fit on a portable thumb-drive and tested completely offline!
Didn’t you just say I wouldn’t have to spend any money?
One thing you might have to spend money on will be a USB thumb-drive or some form of portable media (SDHC card, portable HDD, etc). Remember, we are going for ìPortable WordPress Development on the go!î and that means some way to carry it with us while on the road. A thumb-drive of at least 4gigabytes will be needed for this project, but if you need multple installs of windows for each version of IE, then you will probably need at least a 16gibabyte thumb-drive. (XP Installs can be stripped down to about 4GB per install with the latest SP3) You can find deals at places like Wal-Mart and Staples for around $30-40 US Dollars on 16GB thumb-drives. If buying on-line, you might even be able to get them for half that price with shipping. Either way, its a good investment but not a requirement. If you have a laptop, then you can skip the thumb-drive, and just keep everything on your laptop.
Place all your eggs in one basket
For Windows users, Notepad++ is my personal favorite. Highly customizable, plug-ins, portable, OpenSource and above all else its free. For everyone else, you should have a look at jEdit. jEedit is available for many platforms including Windows, MAC, Unix/Linux and even VMS (although I don’t think you will be designing your WordPress sites using a VMS system).
What browsers do your visitors use?
The next tool you will need is simply your browser. One thing to remember when designing your site is that not all browsers render the same. For this reason, I suggest the use of portable browsers during the design process. Most of the major browsers have portable versions you can put on your thumb-drive, allowing you to take them with you on the go. They also run without needed to install.
I try to develop my sites for the top 4 browsers since they hold the greatest market share. Those would be Opera, FireFox (Gecko based), Safari/Chrome (Webkit based) and Internet Explorer (IE).
Microsoft Windows comes with Internet Explorer built in to the operating system, and as far as I know, there are no portable versions of IE short of specialized Thin-apps or third party clones. What you can do is test multiple versions of IE through the use of a Virtual Machine (more on that later). Another thing to remember is that each version of IE seems to render differently from the other. This is one of the most common complaints by web developers. Coding a site for IE alone requires extra steps to make it look the same as it does for everyone else. The downfall with IE is you cant install them all side by side (You can install version 6 along side version 7, but that is for a different article). In order to test in multiple versions of Internet Explorer you would be forced to install Windows multiple times, on different machines so each OS install can run a different version of the IE browser.
This sounds a bit silly and at the same time redundant, but in order to see how your site displays in say IE5, 6, 7 and 8, and be able to debug in real time, its a necessary evil. You could try a service like Browser Shots, but 90% of the time their site times out, and you also wont get key information on errors in order to track them down when something is broken. Thus, the easiest way to solve this, install it in a Virtual Machine (VM)!
You can download portable versions of FireFox and Chrome from:
Chrome and Safari will render almost identical since they use the same rendering engine of Webkit, so you don’t really need Safari installed as well but that is up to you. As far as I know, there are no portable versions of Safari, but you could install it in one of your VM’s along side IE.
For a portable version of Opera, see:
The nice thing about portable apps, are that they can be loaded to a thumb-drive and taken with you anywhere you go, so you can always take your WordPress development studio with you while on the road. There are also portable FTP programs, like FileZilla which will come in handy when you are ready to upload your final theme to your live site.
So what is all this talk about Virtualization?
Another tool you should have in your arsenal is a Virtual Machine Hyper Visor. Virtual Machines let you install a number of different operating systems into a virtual environment that will look and act identical to your host system. This lets you install all sorts of software without making changes directly to your computer itself, but instead only to the Virtual OS. This is not only great for production development, but also safe in the event your code causes a problem with the OS itself. Through the use of a VM, you can also save snapshots each time you modify the OS itself, so if a change you made or software you installed cause the VM not to boot or constantly crash, you can revert to a save snapshot before all your changes.
Given the affordability and size of thumb-drives, this also makes it easier to take your VM’s with you on the go. You might already own a thumb-drive, in which case you won’t have to spend any money at all. In order to run your VM, you will need one of a few tools though.
I’m not going to cover all of them, but understand there are many types of Virtualization packages available to you. Some are free, and some are commercial, all with varying degree of usability and each with their good and bad points. For me personally, I chose Vmware.
One the the reasons I use Vmware is because there are many pre-made Virtual Machines that serve specific purposes. They call them ìVirtual Appliancesî, since they act in a similar manner as you would to use a home appliance such as a toaster or a blender. One VM might be specifically for WordPress, while another for Joomla, Droopal, or just a straight forward Apache Web Server with PHP and MySql, where you can add or develop your own CMS later. The point is, these are highly available tools and free for personal use! Are you seeing a theme here?
One important thing to understand is, while your Virtual Machine itself can live on your thumb-drive or portable media, the software to launch and run the virtual machine itself requires an installation of the Hyper Visor within an existing computer. The term Hyper Visor just refers to the software that allows the VM to run, and gives it the ability to access your computers hardware, such as the CPU and GPU. In order to do this, you will want the Vmware Player.
Vmware Player is also free and you can download a copy here:
(There are also Virtual Machine Hyper Visors for different operating systems by different companies. Vmware is just one of many that make VM software for Windows, MAC and Linux)
Once you have your portable browsers, text editors, and the Vmware Player installer copied to your thumb drive, you will then need that final piece of magic that brings it all together. In order to develop and debug your site in a true Web Server environment, with the ability to execute the native PHP code of your WordPress themes, you need WordPress itself. Now, you could install Apache, PHP, and MySql on your system natively, but this also poses a risk for your desktop itself, since each of these will be making changes to your OS, while also being permanent on the machine you install it on. Through the use of a VM, your workstation remains unaffected by any issues related to the use of the additional software, and also makes it easier to take it with you on the road. Again, portability is the whole point of this article.
You can download a free, portable version of WordPress in an already configured VM from Turnkey Linux. This takes removed the install process and trying to set up all the requirements for WordPress, as well as keeping it in a nice small package:
Once you download the zip file, you can uncompress it to your thumb-drive or portable media. Uncompressed it will take up approximately 2.5 gigabytes of space and still leaves room to add your browsers and text editor, as well as any images or programs you would like to add to this portable toolbox.
Configuring our WordPress Installation
Now that you have all your tools in one place, you will want to setup your WordPress server itself. First, install Wmware player on your computer from the installer we put on your thumb-drive. Having the installer on your thumb-drive means you can work at nearly any computer you move to, so long as the hardware supports virtualization and your Hyper Visor.
After the installation, start Vmware player and select ìOpen a Virtual Machineî from the menu. Point this to our unzipped VM on the thumb-drive, and then it will show you which file to open. After you open the machine it will show up in your players menu. Then we will want to edit out VM. Click ìEdit Virtual Machine Settingsî and you are presented with a menu of options. Go down to USB controller and remove it. Since we will be running this from our thumb-drive and the machine itself will not be changed or modified in any way, we wont need access to USB ports on our host system. We also won’t need the CD/DVD drive features so we can remove them as well. Click on the network adapter and change it from Bridged to NAT. Click ok when done, and then ìPlay Virtual Machineî.
Now the machine will boot. During this process it will setup an IP address in which you can administrate the VM through your Host’s web browser. Write down the IP address for WEB option and type it into your web browser. You should now see your default WordPress site! Give yourself a pat on the back if you’ve made it this far. Welcome to the world of Virtualization!
Once you see the WordPress page, you will want to login to your WordPress dashboard. If you read the default post, you will see a link to login to your site. It also tells you the default account and password: Login as admin with password turnkey and get blogging!
At this point you don’t have to do anything with the VM itself but minimize it. You are now ready to build your new WordPress site and test your own custom themes, all while working in a non-destructive environment that won’t affect your Host’s workstation or interrupt your live website.
When you are done with your coding session, click inside your VM, and then select and press enter on ìadvanced menuî. Use the arrow keys to select shutdown and click yes and it will unload the VM. Close the player and your done!
Note: To switch in and out of the VM once you click inside its window, click both ìctrl + altî at the same time to return the mouse to your desktop environment.
Your turn to share!
I hope you find this article both informative and useful for your own WordPress development process. Please share your thoughts in the comments below.