0

When I try to use the Flexslider with 'built-in' jquery, the Flexslider won't work. When I use my own myjquery file, It works as if nothing ever.
Do I always have to use my own jquery file even wordpress has its own?

  • Wordpress' (built in) jQuery vserion: 1.11.3
  • Flexbox required jQuery version: 1.7+
  • myjquery = jquery version: 1.12.0

Summary: flexbox should work with jQuery of WordPress.


More Details

Flexslider doesn't work when I use Wordpress' jQuery. It works when I add my own myjquery.js which is jquery 1.12.0 and when I dequeue original jquery wp_dequeue_script('jquery');.
It looks like WordPress' jQuery is not visible for my Flexslider and custom.js file.

Errors:
When I run the site with WordPress with its own jQuery there is one error:
$ is not a function file: 'custom.js:2:1' what means that jquery is not found but it's included in header (I've checked). My conclusion is the dependency array('jquery') doesn't work. I've tried to use wp_register_script('flexbox', ...) with different function (even without dependencies and false, false or true, true, etc..)

When I use 'myjquery' there is no errors and plugin works correctly.

The content of 'custom.js': $(window).load(function() { $('.flexslider').flexslider({ animation: "slide" }); });


Register and include styles & scripts (part of the functions.php file):

wp_register_script( 'bootstrap-js', get_template_directory_uri() . '/bootstrap/js/bootstrap.js' );
wp_register_script( 'myjquery', get_template_directory_uri() . '/js/jquery.js' );
wp_register_script( 'flexslider', get_template_directory_uri() . '/js/flexslider.js', array('jquery'), false, true );
wp_register_script( 'custom-js', get_template_directory_uri() . '/js/custom.js', array('flexslider'), false, true );

// Enqueue :: styles & scripts
function mytheme_enqueue_items() {
  wp_enqueue_style( 'my-main-css' );
  wp_enqueue_style( 'bootstrap-css' );
  wp_enqueue_style( 'bootstrap-responsive' );
  wp_enqueue_style( 'flexslider-css' );

  // wp_enqueue_script( '**myjquery**' ); // **flexslider works correctly when uncommented**
  wp_enqueue_script( 'bootstrap-js' );
  wp_enqueue_script( 'flexslider' );
  wp_enqueue_script( 'custom-js' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_items' );
  • Why your register scripts are outside the function? – Mayeenul Islam Feb 16 '16 at 20:10
  • What version of jQuery are you using for myjquery (that flexslider works with)? It could work with the version you've tested with but not with the version that is included in WordPress. Further, what actually happens when it "won't work?" Are there errors in the console? – Megan Feb 17 '16 at 1:43
  • @MayeenulIslam to get possibilities to use them for other functions not just for this one. It's not wrong practice and doesn't matter in this case. – rafr3 Feb 17 '16 at 9:54
  • 1
    It is not a very bright/smart idea to run your code outside a function, or hook as in this case. Plugins and child themes can't remove them, and I believe all of that code runs completely out of context. Creating <link> tags outside the <head> tags is invalid HTML, which is not W3C complient (all websites must comply) – Pieter Goosen Feb 17 '16 at 10:12
  • 1
    $ is not a function is something that was handled many times on this stack. You have a jquery conflict. All custom scripts should be running in no-conflict mode – Pieter Goosen Feb 17 '16 at 10:32
1

The problem was jquery conflict (error $ is not a function).
All custom scripts should be running in no-conflict mode.
I've used jQuery(...) instead of $().

0

First off, you should be registering your scripts in the same function that you enqueue them with.

Your comment flexslider works correctly when uncommented suggests that you might just be missing this:

wp_enqueue_script( 'jquery' );

Though jQuery is "built-in," you still need to enqueue the script with the handle. Basically, WordPress includes the files and does the wp_register_script part, but you still need to enqueue it, which tells WordPress you want to load it.

Edit:

Sorry, I just noticed that you have jQuery as a dependency in your wp_register_script. So you shouldn't need to enqueue it like I suggested above.

  • I've doubt that dependency doesn't work but it should, because version of jQuery of WordPress core is 1.11.3, the Flexslider requires 1.7+. I've tried to use wp_register_script('flexslider', ...) with different arguments. When I try to use the above code (without myjquery) debugger notices error: $ is not a function :: file 'custom.js' The custom.js file is flexslider's start script. This means that the jquery library is not used but it's included in header (I've checked). – rafr3 Feb 17 '16 at 9:50
  • Glad you got it figured out! :) – Megan Feb 18 '16 at 2:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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