Loading minified assets in WordPress themes

It’s been a while since I landed a job at ThemeGrill. Going through the portfolio of wide variety themes, I was handed over tasks to refactor code of some legacy WP themes which were doing brilliant in wordpress.org.

Being user of Hybrid Core framework in past and big fan of Justin Tadlock, I always checked SCRIPT_DEBUG constant to load minified assets in theme. So, what exactly is SCRIPT_DEBUG constant and how to use it?

By default, WordPress loads minifed versions of core CSS and JS files in order to reduce load time. But when you have to edit or debug the code, it’s pain to look through the minified code. I actually find it impossible to look for bugs inside the minified files. So, you sometime might need to load the non-minified assets too. There is a little constant provided by WordPress which you can use to alter the behaviour.

define( 'SCRIPT_DEBUG', true );

When you define SCRIPT_DEBUG constant as true in your wp-config.php file, WordPress now loads non-minified files. As of now this is only for WordPress core CSS and JS files. But we can easily use this in our own themes. Using this technique, we will be able to load minified CSS/JS files our theme if the constant is said to false and in our development environment we can define the constant to be true to edit and debug our files.

Here’s how I implemented this in one of our WordPress theme:

With this simple change in enqueue method, we are loading non-minified files for production environment and minified files for live sites.


Startups Enthusiast. Loves to code (PHP, JS). Occasional Blogger, wannabe Entrepreneur & Amateur Philosopher

Leave a Reply

Close Menu