Redbull, Baldness and IE6

Okay, I will give you all ONE guess at what is the bane of the internet?

If you guessed Farmville Facebook requests, then you are close.

But the correct answer is Internet Explorer… and more specifically IE6.

I think the real answer to why web developers seem to lose their hair at alarming rates is a toss up between three things:

• Too much Redbull
• Enlarged brains pushing the hair follicles out off the head
• Internet Explorer 6

So in order to save what hair we have left I wanted to provide this little tutorial on how to add an Internet Explorer specific stylesheet to your website.

This tutorial isn’t about what to put in the stylesheet to accommodate the craziness and weirdness that is IE6, but rather a simple way to “insert” an additional stylesheet into your site without messing around with core theme files. (The reason why it is important to NOT mess with core theme files is so that upgrading is simplified for future upgrades.)

So we will use our functions.php file to insert the additional stylesheet. I’ll first set up the code and then I’ll explain what the code does. One of my goals in these tutorials I’m writing for WebDesign.com is to teach developers how to READ PHP even if they don’t understand how to write PHP. If you can read PHP (like reading a sentence) you will slowly begin to identify certain characteristics of the language. It also makes it easier for you to tweak existing PHP without the need to fully understand the entire PHP language.
The code you would put into the functions.php file is as follows:

function ie_stylesheet() { ?>
<!–[if IE]>
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_directory’) ?>/ie.css” type=”text/css” media=”screen” />
<![endif]->
<?php }
add_action(‘wp_head’, ‘ie_stylesheet’);

The only other thing you will need to do is to put your special Internet Explorer stylesheet in your theme directory. (In the example, I have named the stylesheet ie.css.) So now you might be wondering exactly what is going on in the code.

We are dealing with hooks in this code. We know this because of the last line that begins with add_action. We are telling WordPress that we want to perform an action (add_action) in the hook (wp_head) and that action is doing the ie_stylesheet function. So the next step is to figure out WHAT the function ie_stylesheet is doing. In this example it is very easy because we are just inserting the code that is located between the two brackets { code }. One thing to note, since we are inserting this code into a PHP file (essentially the index.php file (which is calling the wp_head.php file)), we need to make sure we “close” the PHP bracket before we insert the code and then “reopen” the PHP bracket at the end of the code. And so because the function ie_stylesheet is inputing the code that links to the ie.css file, we have successfully added the IE specific stylesheet to our website correctly.

One side note: because CSS is hierarchical, it is important that this function and hook action be the LAST function added to wp_head to avoid css conflicts. So, to make it simple just put the above code at the END of your functions.php file.