Make your design business mobile: WordPress Development on the go

13,807 designers received our email newsletter last week. Click here to sign up for free.

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

Most of the design process can be done with a minimal amount of tools. The first tool you will need is your text editor. Regardless of the operating system you use, having a text editor that can do syntax highlighting as well as line numbering is a must for any serious designer. Especially if you want to be able to track down PHP bugs, or JavaScript code when the browser gives you something like ìerror on line 127 column 25î. If you aren’t already using one, I suggest you start now. It not only makes debugging your code easier, it will help you visually see your code in a cleaner format, keeping the work flow organized and easy to read.

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:

http://portableapps.com/apps/internet

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:

http://www.opera-usb.com/operausben.htm

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:

http://www.vmware.com/products/player/

(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:
http://www.turnkeylinux.org/download?file=turnkey-wordpress-2009.10-2-hardy- x86.zip

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.

About Thomas Cope

Comments

  1. This is brilliant and has given me a helluva lot to think about! It might even change the way I develop at home!

    • @Laneth Sffarlenn,

      Thanks for the feedback. Glad you found it useful. Just another note, this can also be used for a plethora of other development needs, not just wordpress, but Turnkey offers VM’s for things like Drupal and Joomla as well. There are many pre-made VM’s with portable, offline development in mind so if you develop for other types of CMS or just need an Apache/PHP/MySql environment to develop in, VM’s are definitely a good tool to have on hand and on the go.

      If you have any issues getting this up and running on your end, feel free to contact me for help or more info.

      Thanks,
      DigiP

  2. Great article. I like to use portable Notepad++ combined with WordPress installed on UniServer, which is a lightweight portable web server. It makes for a full portable development environment that I can take with me on my key-chain.

  3. This is something to really keep in mind. I never thought about mobile development in a way as you explained it. Thanks for sharing this.

  4. Interesting, I’ve never thought about carrying around an installation of XP around on a flash drive. Doesn’t it have issues with the change in hardware configuration when you boot to if from a different machine?

    Anyway, I’m a Mac guy anyway. You’ll be hard pressed to see me on the road without my MacBook Pro no matter what I’m traveling for…

    Interesting perspective though.

    • @Josh Rucker,

      Well, the WordPress VM itself is Linux. The XP part was if you wanted to test and debug the site for Internet Explorer 6-8(9) you would need either an installed XP system, or VM of XP as well.

      When you go to another machine to install VMware Player, and then launch the virtual machine from the thumb-drive, it will ask you “Did you copy or move this VM” and you just say moved, and it then loads the VM. It doesn’t care about hardware configurations so long as it supports Virtualization itself, all the drivers and code for the VM are contained within the VM and can be moved/copied to 100’s of desktops in the process, all using the same VM so long as they have VMware player installed and support Virtualization.

      So, as long as the Host OS and its Hardware support virtualization, it doesn’t matter where you use it, from a MAC, Linux, or a Windows host, they can all load the wordpress VM. The host machines CPU and BIOS must support virtualization, which as long as its a recent machine, say last 5 years or so, there would most likely be no problems.

      Also, they make a version of VMware for MAC’s and Linux. I think its called Fusion by VMware for MAC, but not sure if they have a Free Player as well for MAC. As far as I know, Fusion is not free. There is also Parallels Desktop 6 for Mac, but I’m not sure what kind of containers it can open for the VM’s. It might be able to open VMware files natively, but I’m not sure though as I don’t own a MAC.

      Virtual machine technology is not exclusive to VMware either, and there are tons of VM’s with preinstalled WordPress, Joomla, Drupal, etc, out there for people to use, just need to search for them on google.

  5. Very cool.

Join the conversation

*