Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

PHP

Scott Loveless
Scott Loveless
6,594 Points
Posted by Scott Loveless
Scott Loveless
6,594 Points

Solution for loading conditional css and js for Bootstrap 3.3.6 (current)

As per the tutorial, I have disregarded these scripts: 

<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>

You may have noticed that the IE10 viewport hack uses css and js. I used the same practice of loading scripts and applied it to the CSS. Here is my functions.php file:

<?php

function theme_styles() {

    global $wp_styles;

    wp_register_style( 'ie10_css', get_template_directory_uri() . '/css/ie10-viewport-bug-workaround.css' );

    $wp_styles->add_data( 'ie10_css', 'conditional', 'IE 10' );

    wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' );
    wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );

}

add_action( 'wp_enqueue_scripts', 'theme_styles' );

function theme_js() {

    global $wp_scripts;

    wp_register_script( 'html5_shiv', 'https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js', '', '', false );
    wp_register_script( 'respond_js', 'https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js', '', '', false );
    wp_register_script( 'ie10_js', get_template_directory_uri() . '/js/ie10-viewport-bug-workaround.js', '', '', false );

    $wp_scripts->add_data( 'html5_shiv', 'conditional', 'lt IE 9' );
    $wp_scripts->add_data( 'respond_js', 'conditional', 'lt IE 9' );
    $wp_scripts->add_data( 'ie10_js', 'conditional', 'IE 10' );

    wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '', true );

}

add_action( 'wp_enqueue_scripts', 'theme_js' );

?>

I do not have a way to test on older versions of IE to see if the conditional statements work correctly but everything appears to be working with this code in place.