0

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

6
  • Have you checked errors in console?
    – Robert hue
    Jul 2, 2015 at 9:10
  • Yes, when using the one that works in Firefox, opera says jQuery('.flexslider... is not a function, and likewise in Firefox for the one that works in Opera
    – Adrian
    Jul 2, 2015 at 9:14
  • How are you including Flexslider?
    – Howdy_McGee
    Jul 2, 2015 at 13:59
  • After the HTML markup, I have the following: <script defer src="<?php bloginfo('template_url'); ?>/jquery.flexslider.js"></script> <script type="text/javascript"> (function($){ "use strict"; $(document).ready(function(){ $('.flexslider').flexslider({ slideshow: true, animationSpeed: 400, initDelay: 100, animation: "slide", animationLoop: true, itemWidth: 258, itemMargin: 26 }); }); })(this.jQuery); </script>
    – Adrian
    Jul 2, 2015 at 14:01
  • Please do not post big code blocks in comments, use the "edit" link underneath your question and add your code there. It's very hard to read as a comment.
    – Howdy_McGee
    Jul 2, 2015 at 14:52

3 Answers 3

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);
1
  • This did not work in Firefox
    – Adrian
    Jul 2, 2015 at 10:07
0

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).

2
  • tried this and again it works in Opera but not Firefox :-( jQuery(window).ready(function( $ ) { $(window).load(function(){ $('.flexslider').flexslider({ slideshow: true, animationSpeed: 400, initDelay: 100, animation: "slide", animationLoop: true, itemWidth: 258, itemMargin: 26 }); }); });
    – Adrian
    Jul 2, 2015 at 10:05
  • Maybe the problem is with flexslider? There seem to be some browser related issues with this plugin. Maybe you should try another plugin and see if that works. If so, the problem is not in the way you queue jquery, but in flexslider.
    – cjbj
    Jul 4, 2015 at 12:49
-1

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
  });
});
1
  • This is just replacing one version of jQuery with another (which actually works in a lot less browsers).
    – bonger
    Jul 2, 2015 at 21:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.