Flexslider won't work with WordPress' jQuery | Dependencies

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' );

Topic wp-dependencies slideshow jquery Wordpress

Category Web


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


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.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.