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