Register/Enqueue Polyfill Scripts in WordPress for Legacy IE

By April 10, 2016Blog, Wordpress
Internet Explorer Meme

Just add the following code to your functions.php. These are what people call polyfills for Internet Explorer. It will only load these scripts on IE8, so it won’t weigh down those valuable people that have modern browsers 🙂

Make sure to also have this line in your .htaccess file AddType text/x-component .htc

Things you can adjust:

  • Serve the js files locally, instead of from a CDN
  • Change the conditional to also target IE6-7
  • Another useful polyfill: CSS3Pie
    // IE Fixes
    function ie_scripts() {
        // HTML5 elements for IE8
        wp_register_script( 'html5shiv', ( '//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js' ), false, null, true );
        wp_enqueue_script('html5shiv');
        wp_script_add_data( 'html5shiv', 'conditional', 'lt IE 9' );
    
        // Make responsive websites and media queries work in IE8
        wp_register_script( 'respond', ( '//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js' ), false, null, true );
        wp_enqueue_script('repond');
        wp_script_add_data( 'respond', 'conditional', 'lt IE 9' );
    
        // Support for :nth-child(n), :last-child, etc in IE8
        wp_register_script( 'selectivizr', ( '//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js' ), false, null, true );
        wp_enqueue_script('selectivizr');
        wp_script_add_data( 'selectivizr', 'conditional', 'lt IE 9' );
    
        // Make form placeholders work in IE
        wp_register_script( 'placeholder', ( '//cdnjs.cloudflare.com/ajax/libs/jquery-placeholder/2.3.1/jquery.placeholder.min.js' ), false, null, true );
        wp_enqueue_script('placeholder');
        wp_script_add_data( 'placeholder', 'conditional', 'lt IE 9' );
    }
    add_action( 'wp_enqueue_scripts', 'ie_scripts' );

     

Mike Doubintchik

Author Mike Doubintchik

More posts by Mike Doubintchik

Join the discussion 5 Comments

  • David Hedley says:

    Great post, could you please explain: ‘false, null, true’.
    Thanks

    • David, the documentation for the wp_register_script() can be found here: https://developer.wordpress.org/reference/functions/wp_register_script/

      In short, the wp_register_script() accepts the following 5 parameters: $handle, $src, $deps, $ver, $in_footer —wp_register_script($handle, $src, $deps, $ver, $in_footer). To see what each parameter means, take a look at the docs.

      In our case we have:
      wp_register_script( 'html5shiv', ( '//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js' ), false, null, true );

      Where:
      $handle = ‘html5shiv’
      $src = ‘//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js’
      $deps = false
      $ver = null
      $in_footer = true

      • David Hedley says:

        Thanks Mike, looking at this, I would have assumed that $deps would be array (‘jquery’) for selectivizr but I guess I’m misunderstanding this?

        • David, you’re correct. $deps is where you would put any dependencies so that the js library isn’t loaded before it’s dependencies. In your example with selectivizr:

          wp_register_script('selectivizr', get_template_directory_uri() . 'assets/js/vendor/selectivizr.js', 'jquery', null, true);

Leave a Reply