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.