This is a little trick that took me several years to learn but is extremely useful. By default, WordPress loads minified versions of CSS and JS files in order to have a small impact on load times. This is excellent, but for development purposes, it can be a pain if you are trying to work within one of the minified files to fix a bug or make improvements.

What you may not know, however, is that WordPress provides a nice constant that we can add to our wp-config.php file called SCRIPT_DEBUG. When this constant is defined as true, WordPress will automatically load the non-minified versions of all CSS and JS files.

It’s as simple as adding this to your wp-config.php file, exactly as you would add the WP_DEBUG constant:

define( 'SCRIPT_DEBUG', true );

This is excellent and makes working within the core WordPress files much easier, but how about extending this to our own plugins as well?

In order to be a good citizen and put as small a foot print as possible on users’ sites, it’s best if all CSS and JS files included a plugin are minified. What do we, as developers, do then when we want to modify our CSS and JS files? Surely we’re not going to put ourselves through the annoyance of constantly minifying and unminifying files. No, that would just be silly.

It’s quite simple actually: we can simply detect the SCRIPT_DEBUG constant in exactly the same way that WordPress core does.

Instead of shipping one minified version of all CSS and JS files, we should always ship two versions with our plugins: one minified and one not.

If the SCRIPT_DEBUG constant is defined, we tell our plugin to load the full version of the file, otherwise load the minified version:

With this simple check, we can ensure that we are always loading the full version of the file while in development, but still load the minified version in production.

  1. Ajay

    Pippin,

    Great suggestion. I’ve been wondering if there was an easy way for me to do this since I’m including some CSS in my plugin now.

    Do you have any recommended site for minifying js and css?

    • Pippin

      A great way to do it automatically is with Grunt: http://gruntjs.com/

  2. David Decker

    I already began last year to integrate this concept in all my plugins that have any stylesheets or JavaScripts included – even for the admin ones 🙂

  3. Sebastien

    Do you have any other minifying tools for js and css you can recommend ?

  4. Peter Drinnan

    Good method. I was looking for a plugin but seemed like overkill. Simple is good. Grunt or my better preference Gulp, also works, but your method is slightly more “automatic”.

    Thanks.

Comments are closed.