I am using Roots as the starter for a theme I have been working on. I then generated a print.css file, but in Chrome's case, it still is using the bootstrap-responsive.css queries, and messing things up.

This answer on SO explains the issue, and I know it fixes what I am having an issue with (tried it).

What happens is that when using this

wp_enqueue_style('roots_bootstrap_responsive_style', '/css/bootstrap-responsive.css', array('roots_bootstrap_style'), null, 'screen');

It always puts out

<link rel="stylesheet" href="/css/bootstrap-responsive.css">

When I really need it to show

<link rel="stylesheet" href="/css/bootstrap-responsive.css" media="screen">

If I try some of the other types listed on W3, some work and some don't (TV doesn't ever render anything, but print does). For example, my print one works fine:

wp_enqueue_style('roots_print_style', '/css/print.css', false, null, 'print');

How can I get this to work? Do I just do this in the header without using wp_enqueue_style, or am I missing something? I do not get any errors, and using WP 3.5.1.

  • That code works when I try it on 3.5.1 with Twenty Twelve-- so does using TV or nada. I'd guess the problem is Roots or a badly built plugin. – s_ha_dum Apr 10 '13 at 14:16
  • Thats what I was worried about. We aren't using many plugins, so I will disable those first. – jmlumpkin Apr 10 '13 at 14:40
  • Is this causing errors or issues on the frontend or is this just an attempt to get markup to look a certain way? – Tom J Nowell Apr 10 '13 at 14:41
  • Chrome uses the media queries in bootstrap-responsive when trying to print. So no rendering issues, except when printing. Getting the markup right would solve this problem. – jmlumpkin Apr 10 '13 at 14:52

I found the answer. Roots has a roots_clean_style_tag that limits everything except print as a media type.

I updated mine slightly to just allow screen as well:

function roots_clean_style_tag($input) {
  preg_match_all("!<link rel='stylesheet'\s?(id='[^']+')?\s+href='(.*)' type='text/css' media='(.*)' />!", $input, $matches);
  // Only display media if it's print
  if($matches[3][0] === 'print'){
      $media = ' media="print"';
  } elseif ($matches[3][0] === 'screen'){
      $media = ' media="screen"';
      $media = '';

  //$media = $matches[3][0] === 'print' ? ' media="print"' : '';
  return '<link rel="stylesheet" href="' . $matches[2][0] . '"' . $media . '>' . "\n";

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.