Grow your CSS skills. Land your dream job.

Last updated on:

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.

Comments

  1. Permalink to comment#

    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.

    • Permalink to comment#

      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
    Permalink to comment#

    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');
    • Improving Frankie’s code -

      // add ie conditional html5 shim to header
      function add_ie_html5_shim () {
      global $is_IE;
      if ($is_IE)
      echo ‘‘;
      echo ”;
      echo ”;
      }
      add_action(‘wp_head’, ‘add_ie_html5_shim’);

  5. Markus Thömmes
    Permalink to comment#

    I would agree with Brian’s method. This way, the shiv doesn’t get included every time another plugin needs it. I think the register_script method would be the best method in terms of keeping the code clean.

  6. What about using wp_enqueue_script? Isn’t this the best practice way of adding scripts? I see how to only add it for ie, but does wordpress know the version too so I only add it for if lt 9?

  7. I have a site specific plugin that I use instead of functions.php. Will it have the same effect if I use this code there ? Or, does the priority thing comes with functions.php only ? :O

  8. Permalink to comment#

    One reason to do this in a functions file of any kind, is that plugins can’t change the theme’s header.php file, they can only hook to it.

    Also, @evan, wp_enqueue_script() is a best practice, but there’s no way to use it while version testing IE, so we’re between a rock and hard place.

  9. Matthew
    Permalink to comment#

    Could this not do the trick?

    function add_ie_html5_shim () {
        if(preg_match('/(?i)msie [1-9]/',$_SERVER['HTTP_USER_AGENT']))
        echo '';
            echo '';
            echo '';
    }
    add_action('wp_head', 'add_ie_html5_shim');
    
  10. Permalink to comment#

    @Matthew

    This is the code I just added to my current project:

    function add_ie_html5_shim () {
        if(preg_match('/MSIE [1-8]/i',$_SERVER['HTTP_USER_AGENT'])){
            echo "<!--[if lt IE 9]>\n";
            echo '<script src="', get_template_directory_uri() .'/js/html5shiv.js"></script>'."\n";
            echo "<![endif]-->\n";
        }
    }
    add_action('wp_head', 'add_ie_html5_shim', 50);
    

    Since we are only targeting IE8 and down, I changed the regex to only 1-8, also uppercased and added the case ignore flag (redundant, but you never know).

    Thanks for the help on this everyone.

  11. Permalink to comment#

    I don’t think this will work with one of the caching plugins activated (eg. W3 Total Cache).

    • It will run a lot of sites on both FireHost & Pagely with W3TC I have been pleasantly surprised with its ability to cope with things like this.

      `> PS
      I should tell you that I did pay for the “fragment caching” because I utilize Genesis it is faster, but you also can get direct access to W3TC and that is where the value is. Ask before you buy.

      // add ie conditional html5 shim to header
      function add_ie_html5_shim () {
          echo '<!--[if lt IE 9]>-->';
          echo '';
          echo '';
      }
      add_action('wp_head', 'add_ie_html5_shim');
      
  12. jonam

    function add_ie_html5_shim () {
    echo ‘<!–[if lt IE 9]>’;
    echo ‘<script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script>’;
    echo ‘<![endif]–>’;
    }
    if ($GLOBALS['is_IE']) {
    add_action(‘wp_head’, ‘add_ie_html5_shim’);
    }

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".