Minifying your CSS and JavaScript files helps reduce page load time on your website. I always minify my css and js files but even on sites I consider "complete", I find myself going back every so often and making a few minor changes here and there. This creates a problem. Minified files are nearly impossible to edit. The good news is that you don't have to edit them. You can easily switch back and forth between your minified and non-minified files by placing a few functions in the functions.php file of your WordPress theme.
How it's done:
- Minify Your CSS and JS files and save the output as a separate file.
- Name them whatever you want but I usually go with style.min.css and child.min.js
- Create a js directory in your theme if you don't already have one and put your js files there.
- Put the style.min.css in your theme folder.
- Place the code below (minus the opening PHP tag) in the functions.php file of your theme.
- Change filenames and pathnames as necessary.
Now when you need to go back and make minor changes to a completed site, you can just set the $jt_use_minified_files variable to false and edit your non minified files. When you are done, you re-minify them and save the output over the old minified files and set the variable back to true again.
It is important that anyone else who might be working on the site knows they should not be editing the minified files. If they edit the minified file without you knowing, then you go in and edit the non-minified files and proceed to re-minify them and overwrite the old minified files, they will lose the changes they made to the minified files.
The Code Explained
First we create a global variable $jt_use_minifed_files and set it to true if we want minification on, and false if we do not. I typically try and avoid global variables but I always prefix them (usually with my initials) if I do use one. I used a global because I need to test if minification is on or not in two different functions and I do not want to change the variable in two places.
Next we need to filter the $stylesheet_uri and change it from the default (style.css) to style.min.css if $jt_use_minified_files is set to true. After that we add an action to wp_enqueue_scripts called child_load_scripts. The child_load_scripts function is simple. It enqueues the minified js file if $jt_use_minified_files is set to true, else it enqueues the non-minified file.
Function Reference
wp_enqueue_scriptget_stylesheet_directory_uri
Methods of Minification
For minification you can use the online tool I linked to above and simply copy and paste the output into your style.min.css and child.min.js, but I prefer to do this over ssh using a node_module because it's faster.
If you don't know what Node is I recommend you head on over to Nodejs.org and check it out. If you have Node installed already then I recommend you install the clean-css and uglify-js packages both locally and on your server.
From the command line:
npm install clean-css
npm install uglify-js
If you've got them installed on your server you can simply run these commands through ssh.
uglifyjs -o child.min.js child.js
cleancss -o style.min.css style.css
Automating Minification With Node
If you have Node and the clean-css package installed on your server you can use the function below in combination with the function above to automatically check if the stylesheet has been updated. If it has been updated, the function will execute the cleancss command which will minify your style.css and write the output into style.min.css. I can't guarantee this will work on your server, it may depend on your configuration. Use at your own risk.
If you're server is running on CentOS see this post to get Node installed.