Using Multiple Stylesheets with WordPress

Posted by on Nov 11, 2009 in Uncategorized | 0 comments

The other day I ran into a problem. I was designing a WP theme that had a widgetized sidebar. The h3 in the page widget showed correctly in Firefox, but not Internet Explorer. I spent a ton of time on the theme so I wasn’t wanting to search the net to find the css fix that displayed correctly in both Firefox and IE so I made a stylesheet for Firefox and a stylesheet for IE. This is how I did it. In the header just below the header hook, I placed the following code:

1
2
3
4
5
6
7
8
9
10

<?php wp_head(); ?>
 
 <?php $browser = $_SERVER['HTTP_USER_AGENT']; ?>  
  <?php if (strstr($browser, "IE")) { ?>  
  <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/ie-style.css"
 type="text/css" media="screen" />  
 <?php }else{ ?>  
 <link rel="stylesheet" href=<?php bloginfo('stylesheet_url'); ?> 
type="text/css" media="screen" />  
   <?php } ?>

Line 3 returns the user’s browser information. Lines 4 and 5 tells the browser if you are IE, then use the IE style sheet. Normally to retrieve the style sheet you would just put the following code in your header:

<?php bloginfo('stylesheet_url'); ?>

,but since I needed to use multiple style sheets. I used

<?php bloginfo('template_url'); ?>/ie-style.css

to locate the first style sheet. This code tells the browser that the IE stylesheet is located in the folder where the WP theme resides. Line 7 and 8 then tells the browser if you are Firefox, use the default style sheet.

I figured out how to do this for WordPress after reading this post. I then just thought about how to apply it to WordPress and the above solution is what I came up with. I hope this helps someone. And if you have any better workarounds than this, please feel free to share.