Earlier this week, I shared my approach to and the tools used for building a WordPress Plugin. In the post, I briefly touched on CodeKit, but I didn’t really talk about why I use it nor did I share how I configure it for my WordPress-based projects.
CodeKit is a platform-agnostic application – it’s meant for anyone who is doing web development – and it has been one of the single best tools that I’ve added to my WordPress toolbox in the past year.
Though there’s no single “right way” to configure it, here’s how I’ve been using CodeKit for WordPress plugin development.
On File Organization
Before dropping my project into CodeKit, I start with a boilerplate directory structure:
css directory, I have a
less directory and within the
js directory, I have a
Obviously, I use LESS to write CSS, but the
less directory serves as my working directory. Any stylesheet that resides in the root of the
css directory is generated by CodeKit.
dev directory – CodeKit combines, minifies and outputs the final version of the files into the root of the
Again, all of the files in the root of these directories are generated and output by CodeKit.
LESS For CSS
Obviously, I use LESS but I’m not one to take a strong stance on why you should use it (or why you shouldn’t use Sass). I like LESS so I roll with it.
I’ve configured CodeKit to use it’s internal LESS compiler, to minify the file, and to run Bless on the file once it has been compiled:
Since all of my LESS files reside in a subdirectory of the CSS directory, I set CodeKit to write out the compiled files to the directory above where the LESS files are stored:
And that’s it for the LESS configuration. Easy enough.
dev is my working directory, I’ve set CodeKit output the file in the root of the
This will prevent CodeKit from generating JSLint errors for globals that it doesn’t recognize or that it considers undefined.
For the most part, that’s it. All of the settings are configured at the global level so they are applied across the board to each my projects. By using a standard directory structure for organization and a global configuration, it’s really easy to get up and going with new projects (and even converting existing projects).