Loading jQuery stuff

sage
1

Hello, I’ve addes a menu-plugin (Mega Mein Menu) to my site and also I’ve created a slider with Flexslider. The Flexslider is installed with Bower.

In order to get flexslider work, I put this code in header.php:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script src="http://localhost:8888/meubelmakerinamsterdam/wp-content/themes/nicer-pix/bower_components/flexslider/jquery.flexslider.js"></script>


  <script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
  </script>

But than my menu isn’t working. Probably a jQuery conflict. Console doesn’t give an error.
Now I installed Soil. This deals with that kind of stuff I think? Anyway, my menu won’t work at all anymore.

So hope someone can explain me how and where I can activate Jquery and also if the code for the flexslider is on the right place.

Thank you,
Martijn.

2

3 things that stand out by looking at your code:

  1. You’re manually adding scripts in header.php instead of enqueueing them (see lib/assets.php)
  2. jQuery is already enqueued, and now you’re adding a secondary jQuery (that’s also very outdated… 1.6.2 came out in 2011)
  3. You’re directly referencing a file in the bower_components directory

Sage already loads jQuery, and you should follow the documentation on including 3rd party scripts via Bower in order to load Flexslider. Then you can do $('.flexslider').flexslider(); from within assets/scripts/main.js.

If the docs and existing threads on this forum aren’t helpful enough for you, I recommend my screencast (or the book) which covers how to do all of this:

1 Like
3

Thanks a lot! That makes sense.