Starting a New WordPress Plugin with Sublime Text

Starting a new project is always fun — no unfamiliar code to grok, no need to worry about breaking existing features.

Then … the setup begins

Copy and paste the files from a previous project.

Delete a bunch of files.

Whack blocks of unneeded code.

Update jQuery.

Download and unzip libraries from Github.

“Yay!” turns into “Ugh …”

What if you could set up a new project in seconds, without visiting a dozen different websites and Github repositories? And all from the comfort of your favorite editor?

Here’s how to quickly bootstrap a new project in Sublime Text. The example involves creating a new WordPress plugin, but the principles apply to any project.

Fetch installs libraries for you

Fetch is a brilliant, flexible plugin for Sublime that makes it a snap to grab the latest versions of your favorite open source libraries and frameworks.

Once you install and configure Fetch, you can install the latest version of jQuery from Sublime with a simple command:

fetch-file-list

Installing Fetch

If you haven’t already installed Package Control, you’ll need to do that before you can set up Fetch.

Once you have Package Control installed, launch the Command Palette, type install package, hit Enter, then type fetch. Hit Enter one more time and Package Control will install Fetch for you.

Configuring Fetch

Fetch can download either single files or packages, which are just zip files containing several files.

Fetch comes preconfigured with one file, jQuery, and one package, HTML5 Boilerplate. Adding more files and packages is just a matter of making a quick change to Fetch’s configuration file.

Let’s configure Fetch to download WordPress Plugin Boilerplate, which makes it easy to get up and running when you’re starting a new WordPress plugin.

First, launch the Command Palette and type fetch: manage, then press Enter to open the Fetch configuration file in a new tab.

The jQuery and HTML5 Boilerplate entries illustrate how to add your own files and packages:

{
  {
    "files":
  {
    "jquery": "http://code.jquery.com/jquery.min.js"
  },
  "packages":
  {
    "html5_boilerplate": "https://github.com/h5bp/html5-boilerplate/zipball/master"
  }
}

Notice that in both cases, the links allow you to always get the latest versions of these projects. The jQuery link isn’t tied to a specific version of the library, and the Github link always gets the newest commit to the master branch of HTML5 Boilerplate.

Also note the zipball portion of the HTML5 Boilerplate link. When you want to download a collection of files, Fetch expects a link to a zipped archive, which it will then extract for you to a folder of your choice. Github allows you to download the latest version of any project by appending /zipball/master to the project’s URL, which works well with Fetch.

Here’s the Fetch settings file after adding the WordPress Plugin Boilerplate package:

{  
  {
    "files":
  {
    "jquery": "http://code.jquery.com/jquery.min.js"
  },
  "packages":
  {
    "html5_boilerplate": "https://github.com/h5bp/html5-boilerplate/zipball/master",
    "wordpress_plugin_boilerplate": "https://github.com/tommcfarlin/WordPress-Plugin-Boilerplate/zipball/master"
  }
}

This example is available for download as a gist.

Using Fetch

Now let’s use Fetch to bootstrap a new WordPress plugin.

Launch the Command Palette and type fetch package, press Enter, then type wordpress and hit Enter again.

Fetch prompts you to enter the path where you’d like to unzip your package:

fetch-choose-file-path

After you type a path and press Enter, you’ll see the download progressing in Sublime’s status bar.

Once the download completes, open Windows Explorer or Finder and browse to the path you specified, where you’ll see a plugin-boilerplate folder. Rename that folder to whatever you’d like to call your plugin, then drag it into Sublime to open the folder in the side bar.

That’s it—you’re ready to go. You’ll probably want to save this folder as a new Sublime project by clicking Project | Save As … so you can easily reopen it later.

fetch-completed-project

Note: Having to open your file browser and rename the plugin folder is a little clumsy, but that’s due to a quirk in the WordPress Boilerplate Plugin project, not a shortcoming of Fetch. The WordPress Plugin Boilerplate project uses the plugin-boilerplate subfolder to organize all of the php, js and css files and folders, instead of keeping them in the project’s root directory. Fetch expects the files to live in the root directory. The HTML5 Boilerplate project is structured this way, and you can install it right into the root directory of an existing Sublime project, providing a much smoother workflow.

P.S. That’s not the only way to smooth out your workflow in Sublime. Get the Sublime Text Tips newsletter to see how:

http://sublimetexttips.com/newsletter

Comments

  1. says

    awesome guide! I am very new to Sublime Text and need to learn more about how to maximize workflow with it. Any good articles you know of on make a custom plugin with this boilerplate in ST2?

  2. says

    I keep seeing people talk about Sublime but have become so used to using Espresso that finding it hard to make the jump. However this sort of automation might be enough to make me.

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *