jQuery no conflict

Question

I just want to once and for all get some clarity on jQuery within Wordpress as I can never remember from one project to the next how things should be done.

The particular example I am talking about is for flexslider. On the site I am working on now I have tried:

jQuery(document).ready(function($) {
  $('.flexslider').flexslider({
    slideshow: true,
    animationSpeed: 400,
    initDelay: 100,
    animation: "slide",
    animationLoop: true,
    itemWidth: 258,
    itemMargin: 26
  });
});

This works in Opera but not Firefox, and have tried:

jQuery(document).ready(function($) {
  jQuery('.flexslider').flexslider({
    slideshow: true,
    animationSpeed: 400,
    initDelay: 100,
    animation: "slide",
    animationLoop: true,
    itemWidth: 258,
    itemMargin: 26
  });
});

This works in Firefox but not Opera, other browsers not yet tested.

What is the correct way to do this to work in all browsers?

Thanks

Answer 1

I prefer this:

(function($){
    "use strict";
    $(document).ready(function(){
      $('.flexslider').flexslider({
         slideshow: true,
         animationSpeed: 400,
         initDelay: 100,
         animation: "slide",
         animationLoop: true,
         itemWidth: 258,
         itemMargin: 26
      });
    });
})(this.jQuery);

Answer 2

To make jQuery work in noconflict mode you need to wrap all the functions in your js-file like this:

jQuery(window).ready(function( $ ) { Your functions here });

You can now use the $ selector as usual:

$(window).load(function(){ Stuff here });

or

$(document).ready(function(){ Stuff here });

I usually use the former, because document.ready sometimes conflicts with the Wordpress theme modifier (no idea why).

Answer 3

To answer this question, it is more about how you call jQuery rather than how you call the function.

I have just changed my direct link to jQuery to the following:

if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
   wp_deregister_script('jquery');
   wp_register_script('jquery', "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js", false, null);
   wp_enqueue_script('jquery');
}

This is taken frmo CSS Tricks and posted in functions.php, this now makes the following work on all browsers:

jQuery(document).ready(function($) {
  $('.flexslider').flexslider({
    slideshow: true,
    animationSpeed: 400,
    initDelay: 100,
    animation: "slide",
    animationLoop: true,
    itemWidth: 258,
    itemMargin: 26
  });
});