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.

if ( !is_admin() ) { 
        get_bloginfo( 'stylesheet_directory' ) . '/css/site.css',
    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.


  1. avatar
    wrote this comment on
    Now that is neat. Still relevant too I believe. Will try this out soon.
  2. avatar
    wrote this comment on
    Clever workaround and yes, still relevant : )
  3. avatar
    wrote this comment on
    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
  4. avatar
    wrote this comment on
    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. So, what has changed and what should be done?
  5. avatar
    wrote this comment on
    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 and
  6. avatar
    wrote this comment on
    Server-side browser detection is fundamentally broken. Don't do it.
  7. avatar
    wrote this comment on
    Another good solution would be to use [grunt]( 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.
  8. avatar
    wrote this comment on
    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


Cancel reply
Markdown. Syntax highlighting with <code lang="php"><?php echo "Hello, world!"; ?></code> etc.
DjangoPythonBitcoinTuxDebianHTML5 badgeSaltStackUpset confused bugMoneyHackerUpset confused bugX.OrggitFirefoxWindowMakerBashIs it worth the time?i3 window managerWagtailContainerIrssiNginxSilenceUse a maskWorldInternet securityPianoFontGnuPGThunderbirdJenkinshome-assistant-logo