Fast & Furious WordPress Theme Development

I’m somewhat of a productivity nut; I automatically track my time through rescuetime, try to automate my workflows and absolutely despise repetitive work. After all, life is short, why spend it doing the same thing over and over again (I’m also fortunate enough to be able to make career choices)?

As a designer, coding has always had more of this “have to get it done” feel to it. Although I respect it (which is why I’m learning), I can’t relate much to the phrase “code is poetry”. I also don’t check into the WordPress Trac all too often or even know a single feature planned for PHP 6.  However, I love developing themes for WordPress and designing functional end-user solutions. This is also why I had taken it upon myself to delve into PHP, some jQuery and plenty of WordPress functionality. My first steps could probably be characterized as the typical NotePad & FTP Client setup, the equivalent of swimming laps in quicksand. The guide below is based on my experiences & needs as a designer,  I hope that you will join in and share yours.

All of the solutions I offer below are free, except for Beanstalk (where I can offer 10% off through this link). So in other words, this setup runs at about $15/month (or $0 if you’re willing to do away with automatic deployments). Before describing my time-savers, let me show you them!

It may seem like a lot of stuff, but I find it very manageable as a one man show. As WordPress is a core part of my daily business (Individual Clients + Theme Development for Theme Force), there’s no more room for inefficient workflows. I work on more than one theme everyday and certainly make more than a single change. It’s important that this process is safe, fast and efficient. Lets discuss the actual applications that help me save time:

1) netbeans (advanced editor)

What Photoshop is to MS Paint, Netbeans is to Notepad. It’s a pimped out code editor (or “integrated development environment”) that provides a project view, supports all the  common languages and even tells you off when you’re typing something funky (“This is your final warning Noel, stop using Excel functions for PHP!“). I had originally transitioned from Notepad to Notepad++, but even that was holding me back when I started getting serious about PHP. It’s really well done and easy to use for the non-developer types like myself, definitely give it a shot:

Time-Saving Features

  • Project View – When you close a project (or the application) it remembers which files you were working on. So when you re-open a project or start Netbeans the next day, you’ve got the same files open again.
  • Code-Assist (Error Checking) – It’s very smart at detecting mistakes or typo’s which can otherwise take you plenty of “investigating”. You can also easily comment lines or assign yourself To-Do’s.
  • SVN Support - You can commit changes directly from Netbeans.
  • Out of the Box Functionality – As soon as the install was complete, I didn’t have to touch anything more; PHP, XHTML, CSS, JS, etc. all recognized perfectly.

Overall and as a “non-developer”, I really enjoy working with this tool and feel like I have a much clearer overview of the items I’m working on.

2) xampp (local testing)

Confession: I actually used to upload my files via FTP for every single change (“overwrite existing file?”), it brings a whole new meaning to pissing in the wind. It gets old quick, especially once this WordPress stuff doesn’t become a hobby anymore. As a result I found XAMPP, and haven’t looked back since. The official website states “XAMPP is an easy to install Apache distribution containing MySQL, PHP and Perl. XAMPP is really very easy to install and to use – just download, extract and start.”. The statement is bang on and WordPress runs flawlessly within the environment:

Time-Saving Features

  • No more uploading / committing for testing – Instead of having  to go through your whole upload process, you just save the file and refresh your browser, voilà! Easily the biggest time-saver on this page (along with the auto-deployment from beanstalk, essentially the same thing).
  • Easy Test Environment Setup – It’s very easy to set up a new site or instance of WordPress (no upload, cpanel or general connection lag)
  • phpMyAdmin – Also included in the package and easily accessible through localhost/phpmyadmin . This sort of easy access is great when you’re troubleshooting database related matters.
  • Out of the Box Functionality – No different from Netbeans here; plug & play.

3) tortoisesvn (version control)

(Optional: As Netbeans can commit changes too, but has fewer features) Tortoise is a straightforward tool, enabling you to have easy version control right within Windows Explorer (given that you’re using a repository). For those who don’t know, the purpose of subversion is what could be summarized as a controlled collaborative environment where every change to the code is tagged as a revision, a full audit trail if you will. I like to keep my repositories on managed servers elsewhere (in my case beanstalk). Although I back up all my files through another provider, version control and collaboration is a massive plus here:

Time-Saving Features

  • Feature Rich – Be it grabbing a newer/older revision, exporting/relocating the repository or just committing your latest goods; its dead simple and integrated within Windows Explorer (i.e. right click access)
  • Windows Integration – Tortoisesvn is not a separate application visually, it integrates into your “right-click” menu within Windows Explorer. That’s a huge plus as it’s always accessible.

4) beanstalk app (subversion hosting)

I really love beanstalk; Have a look at the screenshot below, I did a commit by right clicking a folder within Windows and 16 seconds later it had been saved to my repository as well as deployed to my 2 production environments (as you can see deployment is set to “automatic” once the repository receives an update):

Although I’ve been self-sufficient for a while now, it’s also very helpful for easily verifying changes from other contributors:

Time-Saving Features

  • Automatic Deployment - Really just what I was looking for. Once everything looks good locally, I send it off to the repository which in turn automatically gets deployed (and I only pay $15 a month for this service).
  • Manual Deployments - You can rollback a deployment to any revision or do a full deployment (i.e. all files) at any time.
  • Collaboration – Easy user setup and great overview of what changes or contributions were made.

With a money back guarantee, you have nothing to lose by testing it out (and here’s 10% off).

5) wordpress time-savers

Last but not least, when you’re actually working within WordPress, there are some great tools out there to help you out:

  • WP-Devel (link) – If you want to see what’s going on within the back-end, this is the tool for you. I love using it to call me out on issues (non-existent variables, etc.) or reducing queries.
  • WP Dummy Content (link or a static pack here) – You don’t want to create dummy posts, pages, comments every time you’re testing a new theme. Get smart and use a tool to pre-populate your installation right off the bat, be it for testing design (i.e. unordered lists) or functionality (i.e. protected posts).
  • WP3 Cheat Sheet (link) – This actually has to do more with your actual WordPress knowledge, but the fact that there are consolidated lists out there, that are print-ready was worthy enough for me to mention (and I’m a big fan).

what does your development environment look like?

My method is by no means perfect or the only way of doing things (certainly not), but it fits my work style very nicely. I’d be interested in hearing how you work or develop on WordPress (be it for themes or plug-ins), so comment below and share with everyone else!

  • Pingback: What is the best way to setup a development environment for a WordPress site? - Quora

  • Manon

    So here I am from the Smashing Mag facebook post, checking out your work and voilà another issue I’m facing as well. I’m on Mac but I’m testing out a similar workflow environment for WordPress dev. Mine is:

    TextMate, NetBeans or Aptana (coding)
    CSSEdit/Less (css coding)
    MAMP (local testing)
    Cornerstone/Kaleidoscope (versioning)
    Snippets (code library)
    Smaller (minifying code)
    Yummy FTP or Transmit (testing both out for ftp)
    Also keep numerous cheat sheets (css3, html5, wordpress, etc) on my iPad via Dropbox (trying to cut down on paper consumption) for reference.

    Seems like a lot but I’m testing out the various apps for final workflow. So far I’m in love with Cornerstone and TextMate.

    O and thanks for the awesome plugins, will be adding to my wp framework starter.

    Keep on keeping on with the great work!

  • Noel

    Hi Manon,

    Thanks for sharing your setup, very interesting! Smart idea on the iPad cheat-sheets, definitely a good one once I actually get a pad.

    Snippets is a really good idea, I just did some researching (as I’m on Win7) and found an Adobe AIR app called Snippley but seems outdated (I’ll keep hunting for a decent one).

    Think the only think you’re missing is version control though, esp if you’re going to get pretty serious about WP :) I’ll keep updating my post as I find better tools or other optimizations..

    Thanks again!

    Noel

  • Manon

    O, sorry, Cornestone is for version control. As I’m new to subversion I don’t understand though why you need both tortoisesvn and Beanstalk. I use my local drive for subversion hosting. Is that not right?

  • Noel

    Sorry, I missed it myself (the app naming actually threw me off). Tortoise is only the tool that integrates right into Windows (so I don’t event start an application per say). It acts as interface between my PC & Beanstalk. I use Beanstalk for automatic deployments, and more importantly collaboration. I just love the fact that when I make changes to this theme, I right-click -> update and it deploys right to noeltock.com & theme-force.com (while getting logged as a revision at beanstalk). The right way is probably whatever works best for you :)

  • John

    Hi Noel,

    I’ve been toying with a similar setup, though I admittedly had more steps involved. Using beanstalk, my repo downloads to a folder on my hard drive, and then I would copy over any modified files to my xampp folder for testing, then commit them to my repo from the original folder. How are you able to skip that step and use beanstalk with your wp-content/themes folder on your local xampp install? Do you not use branches tags and trunk for your repo’s?

    Thanks for the great writeup and for putting me onto netbeans… had been a notepad++ user previously.

  • Noel

    Hi John,

    Thanks for sharing! I have the tags/branches/trunk setup in place, but only really use trunk as WordPress themes don’t get that crazy (after all, I’m not a framework developer rolling something like Thesis out). Those time-savings are really worth a lot to me, more than the value tags & branches offer (to me anyway!).

    Awesome that you’re on Netbeans now, definitely the way to go :)

    Cheers

    Noel

  • http://www.chadmademedia.com Chad

    Hey man! Fascinating read. Only thing I could want is a Mac equivalent of your work flow! :D

  • Noel

    Hi Chad, glad you liked it! Regarding the mac workflow. Netbeans & Beanstalk is no problem I think (and instead of XAMPP you have MAMP?). Also check out the comment by Manon above, she was really detailed in her flow on Mac :)

    Cheers

    Noel

  • Erica

    Manon’s workflow is pretty similar to mine, except I use Espresso for coding and FTP, Sequel Pro for database editing, and Versions with Beanstalk for svn. Mac users should also check out VirtualHostX with something like VirtualBox (I use Parallels). They work great together with MAMP for testing in a Windows environment.

    I also make use of svn:externals for WordPress. It’s a great way to update all your plugins and WordPress versions in a few clicks without downloading or using FTP. With an svn client like Versions you just change the tag number to the latest version, click update, and everything is updated within seconds. Just use the WordPress and plugin repositories to get the latest versions. You may want to check if Tortoise has svn:externals support.

  • Noel

    Hi Erica,

    Thank you for sharing! Great stuff regarding svn:externals, Tortoise works with it, would just need to configure it. I’ll have to dabble around in it to be honest :)

    Thanks again!

    Noel

  • http://sideradesign.com paul

    dropbox keeps a file version history, so I put my xampp htdocs folder in the dropbox, as a free “alternative” to beanstalk.
    very useful article, thanks!

  • Noel

    Hi Paul,

    Smart thinking! Definitely a good idea if you’re trying to keep down the budget (or don’t need automatic deployments or line-by-line comparisons).

    Thanks for the share,

    Noel

  • Gary

    Although you’ve pointed out Netbeans has support for SVN, it also has support for direct saving to a remote server (via FTP or SFTP) as well. For a project configured to use a remote server and update On Save, by the time you’ve saved the file and switched to your browser, the file has already been updated waiting for your refresh. (For those that like to live dangerously and develop on live sites.)

  • Pingback: WordPress Community Links: talk about WordPress from Tumblr edition | WPCandy

  • Kumar Sekhar

    Cool man very helpful !!

  • Pingback: What are some best practices for efficient wordpress development? - Quora

  • http://twitter.com/harishchouhan Harish Chouhan

    Hi thanks for sharing this.

    I wanted to know 2 things:
    1. If ever you do some changes on the server (plugin update, etc. new content in database) is there a way to get that data and update your local setup?
    2. I have a plugin at WordPress Plugin Repo. But while developing it, I have to copy paste the files from trunk to a local wamp install. Is there a way to avoid this?

    Would really appreciate any help you could provide.

  • http://www.siteup.ro/ Vladi

    Awesome article. I enjoyed reading because I was inspired on finally setting up properly. My workflow and tools are sort of similar (on my windows machine). For now though, instead of Beanstalk which seems really cool, I use CloudForge (it has similar features as far as I can tell, including manual deployment) because it has a free option available and allows me to get confortable with the system.

    For Mac development the only change one has to make is the SVN client – for now I’m trying out Cornerstone (but it’s a paid option) so probably will stick with netbeans in the future.

  • http://www.siteup.ro/ Vladi

    Awesome article. I enjoyed reading because I was inspired on finally setting up properly. My workflow and tools are sort of similar (on my windows machine). For now though, instead of Beanstalk which seems really cool, I use CloudForge (it has similar features as far as I can tell, including manual deployment) because it has a free option available and allows me to get confortable with the system.

    For Mac development the only change one has to make is the SVN client – for now I’m trying out Cornerstone (but it’s a paid option) so probably will stick with netbeans in the future.

  • DevPress

    only retards and backyard hack develop live.

  • Amy

    Thanks for the post. I am new to netbeans and an avid lover of wordpress theming. I feel confident that beginning use of netbeans for wordpress theming is like striking gold. It is easy to set up and easy to use as well as informative to anyone new to php coding because of its rich intellesense.