How to minify WordPress theme stylesheets properly

If you build WordPress theme you'll eventually come to the point where you want to minify the stylesheets. But the WordPress theming system has a fundamental flaw: It expects theme headers like name, version information etc. to be in the style.css.

This is bad because removing the headers from the css file more or less breaks the theme in the eyes of WordPress. Not to mention that you waste bandwidth and have to expose the theme information to the world.

You could use a plugin of course that minifies the CSS on the fly, but why waste memory and CPU cycles for something that can be done once with a script?

So how do you get around this? The solution is rather simple. Use the default style.css file only for the theme headers, and don't make the browsers load it. Use a different file for your real CSS. Here's a snippet for your functions.php that accomplishes this.

 <?php
if ( !is_admin() ) { 
    wp_register_style(
        'my-style',
        get_bloginfo( 'stylesheet_directory' ) . '/css/site.css',
        false,
        0.1
    );
    wp_enqueue_style( 'my-style' );
}?>

The site.css file in this example could be created by minifying a site-src.css file. I use a trivial PHP script to do such things, but I won't add it here because I have no idea where I got it from or who the author is.
Anyway, there are many minify scripts available for download.

8 comments

Vernon Fowler wrote this comment on Feb. 19, 2012, 9:08 a.m.

Now that is neat. Still relevant too I believe. Will try this out soon.
Piotrek wrote this comment on March 10, 2013, 12:15 a.m.

Clever workaround and yes, still relevant : )
Icing wrote this comment on June 10, 2013, 9:24 a.m.

Hey Thats a very useful solution. Combining and minifying CSS is a very important matter. While doing the same on my site I came across your post. I wonder why this hasn't gotten more attention. While doing this on my site, I am stuck. Can you write a detailed method on how to get this done. Like- how do I 'don't make the browsers load a particular css'. Is there any php work required for that? Looking forward to your reply. Thanks
Icing wrote this comment on June 12, 2013, 12:09 p.m.

Hi I was trying to do this on my website. Before proceeding, I contacted the author of Responsive theme. He says that this code is outdated and is not the best practice today. http://cyberchimps.com/forum-topic/which-php-file-contains-the-code-that-registers-and-enqueues-style-css/#post-102773 So, what has changed and what should be done?
Nicolas Kuttler wrote this comment on June 12, 2013, 12:28 p.m.

They just changed their own theme, that has nothing to do with a generic way of loading css. My code would belong inside your functions.php and should run during the wp_print_styles action or somesuch. See the docs for http://codex.wordpress.org/Function_Reference/wp_enqueue_style and http://codex.wordpress.org/Function_Reference/wp_register_style
Nicolas Kuttler wrote this comment on June 12, 2013, 12:29 p.m.

Server-side browser detection is fundamentally broken. Don't do it.
Hubisan wrote this comment on Jan. 15, 2014, 11:15 a.m.

Another good solution would be to use [grunt](http://gruntjs.com/) to minify the style.css (and all other .css or .js files) automatically after changes. It's possible to keep a so called banner which will not get minified. That's perfect for the header inside style.css.
Ali wrote this comment on May 9, 2015, 3:22 p.m.

hi, I will be very thankful if someone explain me what is wrong in my code or suggest me some other way of doing it. i am actually implementing a plugin and i need to add some .js and .css files but i am not able to add them , have a look at my approach: add_action( 'init', 'load_my_style_scripts' ); add_action('comment_post', 'show_message_function'); function load_my_style_scripts() { wp_register_style( 'reset', plugins_url('/css/reset.css', __FILE__) ); wp_enqueue_style( 'reset' ); wp_register_style( 'style', plugins_url('/css/style.css', __FILE__) ); wp_enqueue_style( 'style' ); wp_register_script( 'jquery-2.1.1', plugins_url('/js/jquery-2.1.1.js', __FILE__), array('jquery')); wp_enqueue_script( 'jquery-2.1.1' ); wp_register_script( 'main', plugins_url('/js/main.js', __FILE__), array('jquery')); wp_enqueue_script( 'main' ); wp_register_script( 'modernizr', plugins_url('/js/modernizr.js', __FILE__), array('jquery')); wp_enqueue_script( 'modernizr' ); wp_register_script( 'velocity.min', plugins_url('/js/velocity.min.js', __FILE__), array('jquery')); wp_enqueue_script( 'velocity.min' ); } I am able to call that function effectively but .js and .css files are not being included. really frustrated , please explain

8 comments

Reply