A look at my Sublime Text 2 WordPress workflow
As recently as this year, I was developing WordPress sites in Adobe Dreamweaver. I say that without shame because the tool was actually pretty good. I found myself defending it every few months, but it got the job done and I didn’t feel like learning anything new.
Enter Sublime Text 2, which recently stormed into my life and made a damn fool of me. This little editor is easily one of the biggest improvements I’ve made to my workflow, ever. Not just recently or just with regards to WordPress, but ever.
If you makes websites at a serious level, you should give Sublime Text 2 a chance.
This post is my quick (well, somewhat) explanation at why I’ve so fallen for the editor and what customizations I’ve made to make Sublime Text 2 even better, specifically for creating WordPress sites. If you’re familiar with the editor itself, feel free to skip to the meat (list of my favorite packages) down below…
Arguably the best feature of Sublime Text is the use of packages, an easy (and often free) way to extend functionality of your editor. With a few clicks, you can add new features like full SFTP support, linting for errors, function autocompletes, snippets galore, even a lightweight Twitter client.
Packages makes it possible to turn Sublime into exactly the editor you want it to be. And what’s best? All your packages and settings are simple files and folders which are totally portable, making your perfected dev environment super portable. We’ll get to that later. First, we need some packages!
First, we’ll look at a tool that helps install and manage your packages, then I’ll include a full list of my favorite packages and why I can’t live without them.
Most popular packages are available through an ultra-handy system called Package Control. If you’re running Sublime Text 2, you should be running Package Control. It makes installing, updating, and removing packages a total breeze. Package Control is available free from Will Bond, or wbond, who you’ll see mentioned again later in the countdown.
To install Package Control, you’ll need to run the following command in the Sublime Text 2 console. The console is opened via the Ctrl + ` shortcut, then just paste in the following text (I know it’s long and weird looking- you don’t need to understand it, just paste it):
Once that’s done, restart Sublime Text, and you’ll find the goods under Preferences > Package Control. From there, click Install Packages and you’re on your way to a magical land.
My favorite packages
All the packages I use are available through Package Control, so feel free to just search there to install them yourself. I’ve included plenty of links below for reference, just don’t forget that most of the action is inside Package Control. Here we go:
A full-featured SFTP client from wbond, Sublime SFTP makes working on a remote server almost as easy as editing locally. With full support for FTP, SFTP, SSH, etc, I’ve found this package gets me access to just about any server I’m working on.
To make the most of Sublime SFTP, make sure you’ve opened a folder (usually my root /wp-content folder) and have your Side Bar turned on (View > Side Bar > Show Side Bar). From there, you can right click on your wp-content folder and choose SFTP > Map to remote, which will give you a simple settings file like this one. Fill it out with your credentials, remote path, etc and you’ve just made Sublime Text into a full-featured SFTP client.
One tip: in the settings file, I love to enable Upload on save, which puts my files onto the server the second I save them. It makes working remotely a breeze. Of course, this isn’t the best idea for a full-scale production server, but during development I absolutely love it.
PS: Sublime SFTP is a paid package, but I find it worth every penny. Plus, the license is per user, not per machine, so the package can travel with you just fine. There’s also a free trial if you don’t mind a nag screen, but I recommend just buying the license. wbond rules.
This package is a collection of functions and WordPress snippets that make writing template PHP a great bit quicker. Not only will Sublime Text start auto-completing WordPress function names, the package includes all the default arguments of the function, which is great in times when your memory might otherwise need a trip to the Codex.
Aside from core functions, it’s got complete functionality snippets, like custom post type templates and plugin starter templates. It’s a great tool for anyone still learning the deeper corners of the Codex and a great way to make sure you’re not making up function names (like get_the_permalink()).
When an auto-complete just won’t cut it, this package makes hopping into the Codex a snap. Simply highlight a function, right click, and you’ll find two new options: WordPress Codex Search and WordPress Function Reference. The first will perform a search on your selected text, the second will straight open a function reference URL with your selected text, like so: http://codex.wordpress.org/Function_Reference/get_template_part. It only saves a couple seconds, but when you’re in and out of the Codex all damn day, it starts to add up.
This is a fun one. The package allows you to highlight a class in a source file (like single.php and the like), and with the press of a key shortcut, you’ll be jumped to the CSS declaration in an open CSS file. For instance, say you’re in header.php and need to edit the main navigation, or .main-nav. Simply highlight the class, fire your shortcut (mine is CTRL + .), and you’ll be jumped into the open style.css to the exact line you’re hunting for. Another shortcut press, another jump. It’s a totally handy way to jump through your files without searching or remembering line numbers- things that are totally annoying in my book.
To lint is to check code for errors, and if you’re writing tons of code, it’s nice to have some form of linting built into your editor. Enter SublimeLinter, which adds error detection for just about any language you throw at it (including of course all the WordPress mainstays, like PHP, CSS, JS, etc).
Even better, each language and ruleset is completely customizable, making for insanely tweakable results. For instance, I don’t even use the CSS linter, because I’m fairly confident there. I always check when I go to production so I don’t usually feel a need to check live as I type.
ZenCoding is an easy and automated way to write HTML. If you’re not familiar with the practice, check out this intro post on Smashing Magazine. It’s a simple enough idea: use shorthand and auto-expand it into clean, quick markup. For instance, check out this example.
I don’t usually go writing whole pages with this method, but it makes shorthanding some chunks of code soooo much faster. Which is perfect for a lazy lump like me.
This offers a quick and easy way to submit public and private Gist snippets to your GitHub account. Simply highlight text, right click, and select Create Public Gist. The package will even let you enter a description and filename (defaulting from the file you’re currently inside). Go forth and share code.
I’ll admit this one is pure silliness, but I’ve found it charming and continue to have fun using it. Sublime Tweet is a package that adds full Twitter capability to Sublime Text. Send tweets, view your timeline, reply to users- all from within Sublime Text.
It’s useless, it wastes time, and I love it. There’s something satisfying about quickly checking updates in a text-only format without leaving your text-only environment. Sublime, even.
Make it portable with Dropbox
Because all your packages and settings are just plain ol’ files, it’s pretty easy to take everything into the cloud with a service like Dropbox. I’m primarily a Windows user, so the following steps will be from a PC-viewpoint, but most of this should be easily translatable to OSX, Linux, etc.
Moving your settings and packages
All your personal settings, snippets, etc are stored in your user folder, located at C:\Users\[username]\AppData\Roaming\Sublime Text 2\Packages\User. Our gameplan will be to copy those files into our Dropbox, storing them in the cloud, then pointing the original folder to our newly cloud-hosted files. The result will be instances of Sublime Text on multiple machines that all function exactly the same.
Make a Sublime Text 2 folder in the root of your Dropbox. Inside, make a Packages folder. Inside that, make Users. Once we’ve replicated the tree, simply copy in all the files you found in the original User folder. Once everything is uploaded and safe, clear out your local User folder (and make sure Sublime is closed when you do so).
Our next step will be making a symlink (symbolic link) between the old User folder and our fancy new cloud-based User folder. You do this in the Windows Command Prompt (which you’ll need to launch as Admin), using the command mklink. It’s a pretty simple idea: we’re going to symbolically link these folders together, so that our old folder behaves exactly as if the files were still present there. The command looks like this:
Once completed, the files hosted in Dropbox will be automagically present inside the local User folder. Any time you make a change in the folder (like settings, snippets, new packages), it’ll be automatically mirrored into Dropbox and thus into your other local User folders.
Astute users might notice that the actual packages themselves aren’t stored in the User folder, and that’s just fine. Package Control is smart enough to catch the packages present in the settings and automatically fetch any that aren’t present locally. Doing it this way means fewer files we need to load into Dropbox and manage ourself, and that sounds pretty good to me.
(Props to jdc0589 from Stack Exchange for this information).
Moving your WordPress build files
Something I usually do when working with WordPress files on a server is make sure to keep a complete local copy for myself. Using the SFTP module makes that amazingly easy. If I’ve started locally, I use the module to upload my entire folder tree when I’m ready to move to a server. If the build was started remotely, I use the module to grab an entire copy for myself so I can edit files locally. Any time I edit a local file, it’s automatically uploaded when I save.
Keeping two complete sets of files has saved my hide more times than I care to count. Now that I’m moving between multiple computers, I’ve moved my local files under Dropbox control, keeping that same safe set of templates even safer.
If you want to move your actual template files into the cloud, you can mostly repeat the process above (with the exception of the symlink, which you can actually skip if you’re cool with working directly out of your Dropbox folder).
This post started out as a quick list of my favorite packages and quickly grew into the monster you just scrolled past. It’s a nice parallel for the editor itself: it looks simple and is easy to get started with, but the customization rabbit hole goes as deep as you’re willing to dig.
Next up, I’ll probably write a how-to post featuring some of my favorite snippets. Snippets are an awesomely easy way to store bits of code you find yourself using often, and with some rich snippets in place, you’ll find yourself using them even more often.
What are some of your favorite packages? Have I missed any must-haves with this list? How has Sublime Text changed the way you develop WordPress sites?
DATE5th November, 2012