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

Srikanth AD wrote this comment on Sept. 19, 2010, 11:51 p.m.

Thanks for the brief tutorial, it was helpful for me to enqueue an external sytle sheet.
Brent Lagerman wrote this comment on Feb. 23, 2011, 6:35 p.m.

going to try this soon, I've been confused about enque for styles, but this helps clear it up a bit
JiGuang wrote this comment on March 17, 2011, 8:20 a.m.

Brilliant article!

Dan wrote this comment on July 21, 2011, 11:37 a.m.

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>

Nicolas Kuttler wrote this comment on July 21, 2011, 11:52 a.m.

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 :-|
Pedro Santiago wrote this comment on Oct. 12, 2012, 12:22 a.m.

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
Nicolas Kuttler wrote this comment on Oct. 19, 2012, 12:38 p.m.

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.

7 comments

Reply