Connecting our JavaScript files

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:

  1. Look for the following lines, which are midway down the 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;
}
  2. We need to check and make sure that this path and filename matches our path and filename:

    /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);
  3. Next, we need to double-check our link to the Modernizr script.

    Note

    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.

  4. Finally, we need to create links to our plugins.js and main.js files and unhook the Roots equivalent. We'll do this in reverse order shown as follows:
    • Start editing the scripts.php file in the lib folder.
    • Roots combines plugins and custom scripts together in one file and registers that script using the following line of code:
      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.

    • Then, also remove the corresponding line, just a few lines after the previous line of code:
      wp_enqueue_script('roots_scripts'),
    • Now, we'll register our two script files as shown in the following lines of code:
      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);
    • Then, we'll enqueue them with the following lines of code:
      wp_enqueue_script('plugins_script'),
wp_enqueue_script('main_script'),
    • Save it and then refresh the page in your browser.

    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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset