Speed Up Your WordPress Theme Development Using CodeKit

Speed Up Your WordPress Theme Development Using CodeKit

As a developer, you probably know the pain of having to constantly refresh your browser every time you update a file. Having the changes you made or an error you created already displayed as soon as you get to your browser is an amazing convenience that I’ve come to count on thanks to CodeKit.

When you throw in automatic pre-processing of SASS and LESS files, along with minfication and combination of JavaScript files, you will wonder how you ever lived with out it. The best part is you can set this all up in five minutes or less, and that includes downloading time.

Red car

Although there are a number of options out there to easily accomplish all, today I’m going to share how to do this with CodeKit, a simple app that has quickly won a place in my heart.

To get the most of what I will be showing you in this article, you will need to be developing your site locally, which you really should be doing anyway. I outlined my strategy on how I do this and deploy to a production server in a recent post, which includes instructions on setting up a local server with DesktopServer.

For a quick guide to setting up a local WordPress site, you can also see Sarah Gooding’s post on using DesktopServer.

Also, keep in mind that CodeKit is only for Macs. At the end of this post there are some alternatives to CodeKit for Windows and Linux.

Meet CodeKit

codekit-2-700px

If you’re not already using CodeKit, then it’s time to download the demo and give it a try. CodeKit combines countless utilities into one. It’s easy to use with a great GUI. Its features include:

  • Pre-processing for SASS and LESS
  • Checking the syntax, minify and combine Javascript
  • Optimizing your images for you
  • Automatic browser refreshing

I can’t overstate how much of a time saver it is to have your browser refreshed for you faster than you can switch to it from your code editor or IDE.

Unfortunately, CodeKit can not refresh Firefox, but given how useful this app is, I can over look that one black mark.

Setting Up CodeKit

just-right-click

All you need to do to set up a project in CodeKit is launch the app and drag the project folder into the left side of the window. If need be, you can right-click the folder’s icon once it is there and set project settings, like output paths. But most of the time the defaults work as is.

Sure, someone is always going to be there to tell you that you can do all of this with Grunt, Node.js and/or Compass. I trust that they are right, but the point of this is to speed up development. I can do  it in 5 minutes by downloading, installing and setting up CodeKit. Or I can spend hours, if not days, learning a how to use something and configure it.

I chose the quicker way and got everything I need.

Also, CodeKit does have a scripting language for advanced tasks that the GUI doesn’t support. It looks pretty simple, but that is beyond the scope of this tutorial.

Preprocessing and Minfiying Scripts And Styles

Setup your javascript processing in seconds.

If you are working with SASS or LESS in your theme, you need a way to render the files into CSS files that the browser can use. CodeKit makes this super simple and will even show you where your errors are when they happen.

CodeKit gives you four options for how compact you want your CSS to be, from not at all to completely minified. It also can optionally add code numbers from the SASS or LESS files to the CSS output, which is useful for debugging.

CodeKit can also be used to minify and do syntax checks on your JavaScript files. The settings are all done from simple drop-down menus.

Combining Resources

It is common practice for all of a theme’s JavaScript functions, including the functions that initialize jQuery plugins and other libraries, to be in one file. This has obvious performance benefits over loading separate files, but in my opinion it complicates development.

If I want to see the functions for initializing my slider plugin, I go to the file for that, not look in the section of another file.

In addition, when that function causes an error, I look at the file name of the file showing an error in my JavaScript console in order to see what the error is related to.

imports

Luckily, CodeKit makes it very easy to combine JavaScript files.

First you need to create the combined file. Like everything CodeKit makes, this a very simple process.

First, add a new file to your theme’s js directory and give it a name like “theme-functions.js.” You can leave this file empty.

In CodeKit, you simply drag the files you want to import into the “Imports:” field for the new file.

Once you’re done, make sure you have the “Concatenate and Minfiy” option set and then click “process.” This creates a file called “theme-functions.min.js” that you can then enqueue the standard way.

Simple enough right?

In the next section I will show you how to set up a “dev” mode, including a way to switch between using the separate files and just the combined file.

Adding A “Dev” Mode

So far in this article I’ve shown you how to automatically minify and combine your themes stylesheets and javascript files. This speeds up your development and improves your page load time, but it can be a bit of a headache for debugging in your browser.

With all of these steps in place, you’re going to see most of your errors occurring on line 1, which is not the most useful message.

This can lead to a lot of time spent manually changing the source of files from the minimized to unminimized versions, which is a pain and is just asking for mistakes to happen.

Instead, it’s better to add a “Dev” mode to your theme that can be switched on and off by changing one constant.

To set this system up, you simply need to define a new constant in your theme’s functions.php. Its value will be false, but the definition will be wrapped in a conditional to check if it hasn’t already been defined.

This will enable us to activate our dev mode from wp-config.php by defining the constant as true before functions.php runs.

{code type=php}

/**DEV MODE**/
//If is set to true then CSS and JS will load from minimized versions
if (! defined(‘SLUG_DEV’)) {
define( ‘SLUG_DEV’, false );
}

{/code}

By the way, because of how this is set up, you could potentially set dev mode to true in your local development environment while letting it stay false in the live production server.

Now that the dev mode constant is in place, we can use it to append a suffix of “.min” to file names to switch between minified and unminified files, like this:

{code type=php}

function slug_add_scripts() {

$suffix = ( defined(‘_SLUG_DEV’) AND _SLUG_DEV ) ? ” : ‘.min’;
wp_enqueue_script( ‘theme-functions’, “/js/theme-functions{$suffix}.js”, array( ‘jquery’ ), ‘5.0.2’, true );

}

add_action( ‘wp_enqueue_scripts’, ‘slug_add_scripts’);

}

{/code}

Note that $suffix is being outputted in brackets as part of a string. This will only work if the string is surrounded by double quotes, instead of single quotes.

If you are going with the many files combined into one approach as I discussed above, dev mode can be used to switch between adding the files separately, which is good for debugging, versus one file, which is good for performance.

You can do this in a similar manner by checking if your dev mode constant is true or not.

{code type=php}

function slug_add_scripts() {

if ( defined(‘_SF2_DEV’) AND _SF2_DEV ) ? ” {

wp_enqueue_script(‘script1′, get_template_directory_uri().’/js/script1.js’, array( ‘jquery’ ), null, true );

wp_enqueue_script(‘script2′, get_template_directory_uri().’/js/script2.js’, array( ‘jquery’, ‘script1’ ), null, true );

wp_enqueue_script(‘script3′, get_template_directory_uri().’/js/script3.js’, array( ‘jquery’, ‘script1’, ‘script2’ ), null, true );

}

else {

wp_enqueue_script(‘theme-functions’, get_template_directory_uri().’/js/theme-functions.min.js’, array( ‘jquery’ ), null, true );

}

}

add_action(‘wp_enqueue_scripts’, ‘slug_add_scripts’ );

{/code}

Note that in this example I skipped adding the ‘.min’ suffix. It makes no sense to have minifed versions of the separated files or a minfied version of the combined one.

Also, keep in mind that you can use this same strategy to switch between the separate files of a framework like Bootstrap or Foundation and the combined version.

What Else Can It Do?

We’ve just scratched the surface of what CodeKit is capable of. It can compile other languages like Coffescript, HAML and PAML. Using CodeKit and the Kit language, developed by CodeKit’s developer Bryan Jones, you can easily include one HTML file in another and use variables.

CodeKit Alternatives

CodeKit is made for Macs only and costs only $28. If you are not a Mac user or do not want to spend the money, which I think is money very well spent, there are alternatives.

Koala is a free app with Mac, Windows and two different Linux versions. There is also Prepos, which cost $24 and supports Mac and Windows.

As I’m very happy with CodeKit and my Mac, I have not used Koala or Prepos. I also do not own a Windows computer to test them on.

Previous to upgrading to OSX Mavericks I used LiveReload, which doesn’t have all of the features of CodeKit and makes setting up browser refreshing a little tricky, but it offered support for the older version of OS X I was running at the time.

Are You Experienced With CodeKit?

What cool thing have you gotten CodeKit to do? Let me know in the comments. Have you used any of the CodeKit alternatives?

Please share your experience. I’d love to know more about what else you can do with this awesome app.

Image credit: Leszek.Leszczynski.