Professional WordPress Development Environments

If you haven’t guessed, I do a lot of development on WordPress. Over the past 7 years I’ve been building on WordPress, I’ve come to find the perfect setup to help me really focus on my projects and build fast and efficiently. Of course, this is what I’ve found really works for me and my workflow/skills. While I only work from a mac, this list is based on that and I try to cover any Windows alternatives when possibly. Unfortunately I don’t personally know the good alternatives to ome of these tools so I encourage others to share their tried and true alternatives and I’ll update this list! With that said, this is nothing more than my tools/workflow that I felt would be beneficial for other WordPress developers.

Tools

  • Sublime Text 2 (Editor - Free - Multiplatform)
  • SourceTree (Version Control - Free - Mac & Windows)
  • Transmit (FTP - $34 - Mac only)
  • Vagrant (Virtual Machine development environments)
  • iTerm2 (Command Line Too Emulator - Free - Mac only)
  • Alfred (Productivity Application - Free - Mac only)
    My tools list is pretty short.. but thats because these tools take care of most of what I need. Let’s explore these tools deeper and how I use them.

Sublime Text 2

While ST3 (Sublime Text 3) is on the horizon, I prefer to use ST2 until version 3 is officially released. But the great thing is what I use for ST2 will be available for ST3 when it’s officially released :)

The biggest reason I love Sublime Text is because it’s built for speed. Time is money in this industry and the less time I can spend futzing with a mouse the better. Sublime features a “fuzzy search” feature which is basically anything you want to configure or open or install is a keystroke away. Maybe I want to open the comments.php file? All I need to do is press Command/Control + P and then type in “comments.php” and hit return! While this seems like it would be harder, and I’ll admit, it is a bit of different mind-set, but you’ll find that typing is 40% faster than visually searching with a point/click action to open files.

The next part is Sublime provides a massive collection of extensions you can install to extend your editor. Here’s a list of extensions I have installed:

  • DocBlockr - JS/PHP commenting.
  • Emmet - Improves/speeds up HTML/CSS creation.
  • Gist - Create Gist snippets straight from Sublime. Great for sharing code snippets.
  • LESS - Syntax Highlighting.
  • Phpcs - Inline PHP codesniffer (linter).
  • Search WordPress Codex - Easy way to run a search on the WordPress Codex from Sublime.
  • SideBar Enhancements - Sadly Sublime doesn’t offer extensive contextual menus. This extension fixes that.
  • Sublime Linter - Probably duplicates Phpcs but provides an extensive list of error checking for many languages.
  • SVN - Even though I use Git for version control, at work I need to rely on SVN for code deployment to our host. This plugin simplifies and centralizes SVN into Sublime.
  • Spacegray - Beautiful Sublime Text theme.
  • WordPressDev - Disable/Enable debugging or change databases from Sublime.
    While I won’t go into details of the extensions here and their repos or websites outline all of that info in-depth, but thanks to these I’m able to really stay focused in one application for the most part. You can check out the Package Manager for Sublime Text online to see what other extensions you can use. I can make a whole post about this great editor so I encourage you to learn more about Sublime Text 2

SourceTree

I use Git and GitHub. A lot. Pretty much everything I write I push to GitHub for version tracking, collaboration or just as an external backup. While I could gain more nerd points by doing all of this through Terminal, I rather prefer a nice GUI for version control. That’s where SourceTree comes in. This great application can handle Git or Mercurial version control and synchronizes easily with GitHub, BitBucket, Stash and Kiln for storage.

I prefer Git/GitHub but you can choose what ever tool you like best for Version Control. Right now, Git is the bees knees and you don’t want to be a square right? :) Even if you prefer another system besides GitHub, you have a number of others to choose from which is great. If you’re curious what I work on, feel free to check out my GitHub repos.

Transmit

While I actually don’t use FTP that much anymore as I prefer using Git/SVN for deployment systems I occasionally need FTP. Transmit in my opinion is the best out there. You can fight me on that one, but I’m not budging on this. It’s faster with connections and the number of connection types I can do with it out of the box is awesome. I can easily setup connections for Amazon S3, FTP/SFTP and WebDAV.

Not much else to say here, FTP applications are just that. I don’t always use FTP, but when I do, I use Transmit.

Vagrant

I’ve used many development environments and I’ve never really been satisfied. As I’ve dove deeper and deeper into the development world, my setup has required more. If you do basic HTML/CSS, all you need is a browser. But get a server-side language like PHP and you’ll need a server to interpret your code and build your webpages. Go further down the rabbit hole and add in WordPress, now you need a LAMP “LAMP Development Bundle”) (Linux, Apache, MySQL, PHP) stack to run WordPress. While there are great systems like MAMP, XAMPP or WAMP, there’s one big issue with these environments. They don’t match our production server where our websites will live.

Every server environment is different. Maybe your server is running Nginx instead of Apache? Or perhaps you can’t use MySQL and Apache and you need to use MongoDB with Node.js instead. Sadly, these easy to install tools just don’t cut it and give a very inaccurate development environment to test on. Enter, Vagrant.

Vagrant is a way to “create and configure lightweight, reproducible, and portable development environments”. Basically, you build the server environment (or someone else already has) that replicates your production server. So, in terms of WordPress, a large majority is using the standard LAMP stack, I would recommend using Varying Vagrant Vagrants (VVV) which is maintained by 10up. They have already taken the hard work of building an accurate WordPress development environment that matches most hosting companies.

If you build for WordPress.com, like I do, then you’ll want to check out VIP Quickstart by Automattic. Since my work is hosted on WordPress VIP, we use Quickstart for our development environment. Both Quickstart and VVV come with a ton of great tools you would need such as WP-CLI to help build comment code or tasks via command line. Last little note, to run Vagrant you’ll need a virtual machine to run the server. I prefer to use VirtualBox for that, but Vagrant supports others too.

iTerm2

I use terminal a lot. If you are not comfortable with command line, I urge you too get familiar with it if you do any kind of development. All the good tools are utilizing this such as node.js, grunt.js, git, svn, vagrant, wp-cli and many others. If you don’t know any of these tools I listed just now, that’s ok. But eventually these will hit your radar. My point here is there are some amazing tools for developers that utilize the command line and it’s important to be comfortable with it. I’m by no means a terminal expert, but I can CL like there’s no tomorrow :)

While the default terminal in the Mac is great, I like things a little more customized to my need. That’s where iTerm2 comes in. I have really tweaked the look and feel and installed some extensions to help my usage in Terminal.

Alfred

Last but not least, I need to be productive on my computer. That’s where Alfred comes in. Just like the fuzzy search in Sublime, I have the same functionality at my finger tips. While I certainly under utilize this great piece of software, I need it and I urge others to use it too. For example, I need to open Sublime Text 2, or even better Photoshop, which I never use unless I’m working on building something from my design department. I could fill the toolbar on my Mac to quickly access it, but if I rarely use it, why clutter my interface? With Alfred, its just a keystroke away. I can now press Option/Alt + Spacebar and type in “Photoshop” and it will open the application. No more searching through my applications for it.

There’s a ton of stuff you can do with Alfred that not even I use.. I can easily do Google searches through it, or use it as a calculator (which will add the results of your equations to your pastebin) and many other fun stuff that I haven’t had time to learn yet.

Conclusion

Again, this is just my workflow and tool set. I’d love to hear what others are doing! We all learn from each other and there may be better tools or systems that will boost our productivity!

Photo Credit: christiaan_008 via Compfight cc