Roots manages JavaScript links in the same file as the stylesheet link.
So, with scripts.php
open in your editor, first, we'll check to make sure that our jQuery local fallback is connecting as it should be:
scripts.php
file in the lib
folder:if ($add_jquery_fallback) { echo '<script>window.jQuery || document.write('<script src="' . get_template_directory_uri() . '/assets/js/vendor/jquery-1.10.2.min.js"></script>')</script>' . " "; $add_jquery_fallback = false; }
/assets/js/vendor/jquery-1.10.2.min.js
As of this writing, and in the exercise files folder 03_Code_BEGIN
, the version of the HTML5 Boilerplate used in Chapter 2, Bootstrappin' Your Portfolio, is in sync with the Roots theme, so the files match.
If you need to reconcile different versions of jQuery, you'll want to update the filename here and also update the Google CDN link, which is there earlier in the file in the following lines of code:
if (!is_admin() && current_theme_supports('jquery-cdn')) {
wp_deregister_script('jquery'),
wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', false, null, false);
Recall from Chapter 1, Getting Started with Bootstrap, that this script adds HTML5 support for the Internet Explorer 8, among other good and useful things, such as updating our HTML tag classes, so we really do want it to work.
You'll find the link to Modernizr in the top section of the file within the roots_scripts()
function:
wp_register_script('modernizr', get_template_directory_uri() . '/assets/js/vendor/modernizr-2.6.2.min.js', false, null, false);
You simply need to check to ensure that the path and the filename/version match. Again, the files I've used and have provided in the exercise files match. In your case, update as needed.
plugins.js
and main.js
files and unhook the Roots equivalent. We'll do this in reverse order shown as follows:scripts.php
file in the lib
folder.wp_register_script('roots_scripts', get_template_directory_uri() . '/assets/js/scripts.min.js', false, '2a3e700c4c6e3d70a95b00241a845695', true);
We need to comment out or remove that line, so do that now.
wp_enqueue_script('roots_scripts'),
wp_register_script('plugins_script', get_template_directory_uri() . '/assets/js/plugins.js', false, null, true); wp_register_script('main_script', get_template_directory_uri() . '/assets/js/main.js', false, null, true);
wp_enqueue_script('plugins_script'), wp_enqueue_script('main_script'),
View source and you should see the following lines of code appear (replacing the original) just after the footer tag and before the closing body tag (with the full URL varying depending on the location of your installation):
</footer> <script type='text/javascript' src='http://localhost:8888/bootstrappin-portfolio/assets/js/plugins.js'></script> <script type='text/javascript' src='http://localhost:8888/bootstrappin-portfolio/assets/js/main.js'></script> </body> </html>
Test the carousel, and it should work.
Test the responsive navbar. It should collapse and gain its drop-down button at narrow window width. The button should expand and then collapse the navbar as designed!
Now let's add our logo image both to the navbar and to the footer.