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.

Published on Nov. 8, 2010 at 3 p.m. by Nicolas and tagged minify, wp_register_style, WordPress, CSS, WordPress theme, theme, SEO, development, wp_enqueue_style. You can follow the discussion with the comment feed for this post. Feeling generous? Donate!

7 comments

  1. avatar
    wrote this comment on
    Now that is neat. Still relevant too I believe. Will try this out soon.
    Reply to this comment
  2. avatar
    wrote this comment on
    Clever workaround and yes, still relevant : )
    Reply to this comment
  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
    Reply to this comment
    1. avatar
      wrote this comment on
      Server-side browser detection is fundamentally broken. Don't do it.
      Reply to this comment
  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. 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?
    Reply to this comment
    1. 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 http://codex.wordpress.org/Function_Reference/wp_enqueue_style and http://codex.wordpress.org/Function_Reference/wp_register_style
      Reply to this comment
  5. avatar
    wrote this comment on
    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.
    Reply to this comment

Start a new thread

Cancel reply
Markdown. Syntax highlighting with <code lang="php"><?php echo "Hello, world!"; ?></code> etc.