PSD to HTML conversion PSD to HTML conversion PSD2HTML.com with over 300 professionals takes the designs to HTML and beyond

Code Snippet

Home » Code Snippets » WordPress » HTML5 Shim in functions.php

HTML5 Shim in functions.php

Might as well keep your header.php clean and insert the shim from the functions.php file.

// add ie conditional html5 shim to header
function add_ie_html5_shim () {
    echo '<!--[if lt IE 9]>';
    echo '<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>';
    echo '<![endif]-->';
}
add_action('wp_head', 'add_ie_html5_shim');

The shim is to enable HTML5 elements to be able to be styled through CSS in Internet Explorer versions less than 9.

Subscribe to The Thread

  1. Richard says:

    Um, I don’t see why this is better than putting it in header.php. Someone could just as well argue that it should be in header.php, so as to keep functions.php clean, no? Are there any performance benefits with either method? Is there any benefit (in terms of workflow, “neatness”, performance or other) in doing it this way?

    One benefit I can see is to have a functions.php “template” with stuff that you’d always want to have in any site, including the shim (would it make sense to have modernizr, etc like this as well? or could that cause problems).. any other reasons?

    on another note, in what order is all the add_action(‘wp_head’, ‘whatever’) stuff actually outputted? In the order that it exists in the functions.php? What about plguin stuff, how is that order determined? I imagine that this has been answered elsewhere…

    • add_action accepts a third parameter for priority, if you need to order what gets added in what order despite their placement in the source order.

    • Richard says:

      Thanks for that tidbit, Chris.. I should have looked before asking.. :)

      How about my other questions? Any performance benefits (or other)?

      I do like my functions.php template idea; I’ll get working on it right away.. :)

  2. Carri Craver says:

    I am curious too as to why it is better to put this in the functions.php instead of the header. Is it just a workflow preference for you? Or is there a specific benefit?

  3. It’s better to put it in the functions.php file because as mentioned you can control priority that way with code. This can become important with plugins and extensive customization and conflicting code bases.

    I keep my functions.php clean by making a whole new folder ‘lib’ that store my theme library, which is essentially all the snippets and code I’ve come across that I find myself using over and over.

    In the last 2 years its grown from a few files to sub folders with files in them, it’s a mini framework now that adds commonly used functions.

  4. Since we are using PHP, shouldn’t we detect IE using wordpress built in global variable $is_IE as below:

    
    // add ie conditional html5 shim to header
    function add_ie_html5_shim () {
        global $is_IE;
        if ($is_IE)
            wp_register_script ('html5shim', "http://html5shim.googlecode.com/svn/trunk/html5.js");
            wp_enqueue_script ('html5shim');
    }
    add_action('wp_head', 'add_ie_html5_shim');
    • good thinking, but this will also add the script for IE9 users, which is unnecessary.

      why not use BOTH the $is_ie var and conditional CSS so as to keep the code tidy in webkit/gekko browsers? ;)

      // add ie conditional html5 shim to header
      function add_ie_html5_shim () {
      	global $is_IE;
      	if ($is_IE)
         	echo '<!--[if lt IE 9]>';
          	echo '<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>';
          	echo '<![endif]-->';
      }
      add_action('wp_head', 'add_ie_html5_shim');

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~