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.

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

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.

Reply to this comment
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

Reply to this comment
JiGuang wrote this comment on March 17, 2011, 8:20 a.m.

Brilliant article!

Reply to this comment
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>
```
Reply to this comment
1. 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 :-|
  
  Reply to this comment
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

Reply to this comment
1. 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.
  
  Reply to this comment

Search

Network

Image Stream

Github activity

Pingbacks

wp_enqueue_style, versioning and conditional CSS comments

7 comments

Start a new thread

Recent comments

Recent updates

Aktuelle Änderungen

Search

Network

Image Stream

Github activity

Tag cloud

Pingbacks

wp_enqueue_style, versioning and conditional CSS comments

7 comments

Start a new thread

Recent comments

Recent updates

Aktuelle Änderungen