jQuery from parent theme loaded with many other scripts in a single min.js file

Question

I´m building a child theme for a parent theme that loads in its functions.php all its scripts in a single minified JS file. And it does so before the closing body tag by setting the last parameter of wp_enqueue_script() to "true"

However, note that this single file includes several libraries before the developer´s code shows up at the very bottom. So, by scrolling down the file, you´d get: jQuery, Parsley, Slick, Select2 and, finally, developer´s code.

Like I said, all in the same file, one after the other, resulting in a BIG file (242kb minified, over 20K lines of code).

So, when creating my custom jQuery scripts in my child theme, I´m able to load them on the page, but none of my scripts work. Console shows "Uncaught ReferenceError: $ is not defined" which, I assume, indicates that jQuery is not installed...

But jQuery IS in that single minified file I mentioned before. And my theme uses jQuery... So I´m puzzled. Why is it not working?

I suspect this has something to do with this approach made by the parent theme´s developer, where he did not install jQuery like you normally would. Overriding the original file by copying it entirely only to include a few simple lines seems not the way to go... any thoughts on how to solve this?

I´m loading my script in my child theme´s function.php like this:

define( 'BLK_BOX_VERSION', '1.0.0' );
define( 'BLK_BOX_TEMPLATE_URI', get_stylesheet_directory_uri() );
define( 'BLK_BOX_THEME_SLUG', 'black-box' );

if ( ! function_exists( 'headerNavBar_script' ) ) :

function headerNavBar_script() {


wp_enqueue_script( BLK_BOX_THEME_SLUG . '-scripts', BLK_BOX_TEMPLATE_URI . '/static/dist/scripts/navbar-scroll.js', array(), BLK_BOX_VERSION, true );
}
endif;
add_action( 'wp_enqueue_scripts', 'headerNavBar_script' );

Answer 1

change all $ to jQuery and enque script this way so your script will load after loading jQuery and since wordpress do use prototype so we cannt use $ user jQuery

wp_enqueue_script('name_of_script','path',array('jquery'));

Answer 2

WordPress loads jQuery in noconflict mode. Therefore, but default, you cannot use $(). You can fix this one of two ways.

1) Change $() to jQuery() in your script.

2) Wrap all your jQuery in an anonymous function as follows:

(function($) {
   // Your Code Here
})(jQuery)

Note: Option 2 only works if you're not loading scripts in the header. If you do there's some slight stuff you need to do to make it work.

I would remove your copy of jQuery in your minified script and just let WordPress handle loading it.

Answer 3

Finally got it to work!

In addition to wrapping my jQuery in an anonymous function, like belinus kindly suggested, I needed to add wp_enqueue_script('jquery');right before enqueuing my script.

This was an answer provided by Gavin Simpson at Stack Overflow: https://stackoverflow.com/questions/28248113/jquery-is-not-defined-in-wordpress-but-my-script-is-enqueued-properly

It worked!