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

WordPress From Bootstrap to WordPress Setup a Bootstrap Theme Add Bootstrap JS via the functions.php File

Posted by Ted Weddell
Ted Weddell
Courses Plus Student 331 Points

ie-emulation-modes-warning.js is not mentioned in this lesson

I'm guessing another script has been added to Bootstrap since this course was published. At the point of removing IE 9 scripts I have...

<!-- 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>

There is no mention of the script outside the [if] statement, so not sure what I should do with it. For now I'm just adding it below where I hooked the other scripts, in functions.php, and commenting it out, until I know otherwise how to treat it.

UPDATE: In the footer I found ...

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>

Same as above, I'm commenting it out in functions.php until I know what to do with it.

Paul Crow
Paul Crow
21,558 Points
Paul Crow
Paul Crow
21,558 Points 
<?php


function theme_styles() {

    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/html5shiv/3.7.2/html5shiv.min.js', '', '', false );
    wp_register_script( 'respond_js', 'https://oss.maxcdn.com/respond/1.4.2/respond.min.js', '', '', false );
    wp_enqueue_script( 'ie_emulation', '/js/ie-emulation-modes-warning.js', '', '', false );
    wp_enqueue_script( 'ie_viewport', '/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( 'ie_emulation', 'conditional', 'lt IE 9' );
    $wp_scripts->add_data( 'ie_viewport', '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' );

?>

This is my functions.php file for the lesson after applying conditionals to the new .js files involving IE debugging/workarounds. The two javascript files are part of the local directory structure so they're wp_enqueue script, not wp_register_script. Then when adding their data, be sure your conditional is correct (Is it less than 'lt' IE 9, or is it IE10 specific?)

5 Answers

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

There are conditional statements you can use for this :)

Check this out https://gist.github.com/wpscholar/4947518

Christine Schneider
Christine Schneider
234 Points
Christine Schneider
Christine Schneider
234 Points

I have the same question, but do not quite know what I should do - the link to the Github page confuses me as it is just outside my depth of understanding.

What exactly should I do with this line:

<script src="../../assets/js/ie-emulation-modes-warning.js"></script>

Also, what is the effect of completely deleting the line anyway?

mark mun
mark mun
5,026 Points
mark mun
mark mun
5,026 Points

I just and went ahead and added this code to the footer.php

<code> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script> if (navigator.userAgent.match(/IEMobile\/10.0/)) { var msViewportStyle = document.createElement('style') msViewportStyle.appendChild( document.createTextNode( '@-ms-viewport{width:auto!important}' ) ) document.querySelector('head').appendChild(msViewportStyle) } </script>

</code>

Ted Weddell
PLUS
Ted Weddell
Courses Plus Student 331 Points
Ted Weddell
Ted Weddell
Courses Plus Student 331 Points

Thanks Zac. I assumed they should be conditional but wasn't sure, since they are not conditional in the original Bootstrap files. So... conditional they shall be.

By the way, I really enjoy your courses. You're very thorough, easy to understand, and you make learning fun!

Seray W
Seray W
3,063 Points

Hey, could you possibly please post a picture of what you did, I was looking through the Github page but I was very confused :)

António Magalhães
António Magalhães
4,695 Points
António Magalhães
António Magalhães
4,695 Points

i made download of the archive - ie10-viewport-bug-workaround.js to the folder "JS". And added this: wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/ie10-viewport-bug-workaround.js', array('jquery'), '' , true);

is this right?