wp_enqueue_style, versioning and conditional CSS comments

I like to enqueue my CSS styles because it has the benefit of adding a version string. A link like style.css?ver=0.7 is useful because it will force visitors to download an updated style.css when the version number is increased. Here's what I currently use in my functions.php:

<?php
if ( !is_admin() ) { 
    $theme  = get_theme( get_current_theme() );
    wp_register_style( 'your-style', get_bloginfo( 'stylesheet_url' ), false, $theme['Version'] );
    wp_enqueue_style( 'your-style' );
}

I don't really like the get_theme() line, but I am not aware of a better way to get the version info. What's good about that line is that it gets the version of the current child theme, if you're using one.One problem with enqueuing styles is that most themes need one or two additional CSS files inside conditional comments for a certain browser. Nacin pointed me to a solution:

<?php
if ( !is_admin() ) { 
    $theme  = get_theme( get_current_theme() );
    wp_register_style( 'your-style', get_bloginfo( 'stylesheet_directory' ) . '/css/ie.css', false, $theme['Version'] );
    $GLOBALS['wp_styles']->add_data( 'your-style', 'conditional', 'lte IE 8' );
    wp_enqueue_style( 'your-style' );
}?>

See also the relevant discussion on trac. Using this could lead to script concatenation problems in the WordPress core (which doesn't concern a theme developer) and if a website uses plugins like wp-minify. So you probably only want to use this in your own themes, not public ones.

7 comments

  1. avatar
    wrote this comment on

    Thanks for the brief tutorial, it was helpful for me to enqueue an external sytle sheet.

  2. avatar
    wrote this comment on

    going to try this soon, I've been confused about enque for styles, but this helps clear it up a bit

  3. avatar
    wrote this comment on

    Brilliant article!

  4. avatar
    wrote this comment on
    How can I do a conditional JS include depending on if a CDN is available or not?
    I was using the following for jquery:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    if (!window.jQuery) {
    document.write(unescape("%3Cscript src='my/local/version/jquery-1.6.2.min.js' type='text/javascript'%3E%3C/script%3E"));
    }
    </script>

    1. avatar
      wrote this comment on
      Hm, I assume you need this for local developing when offline? I'd probably do it in PHP, while registering the scripts and checking for a flag or something. You don't seem to be using WordPress though?

      Oh, and I see that displaying source in comments is somewhat broken :-|
  5. avatar
    wrote this comment on
    I came across your great article and I was wondering if it´s possible to enqueue diferent stylesheets for diferent pages? Maybe with an if - else statement according to page ID?
    Sorry If this sound a dumb question, but i´m relatively new to php and wordpress.

    Thanks for your help
    1. avatar
      wrote this comment on
      Absolutely, you can do this. Use add_action() and then use a conditional tag.

      http://codex.wordpress.org/Function_Reference/add_action

      http://codex.wordpress.org/Plugin_API/Action_Reference

      http://codex.wordpress.org/Conditional_Tags

      I think you want to use the wp_print_styles action, but you'll have to try for yourself.

Start a new thread

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