0

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

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.

  • Hey, thanks so much for your input. However none of the approaches worked, unfortunately... Console returns "Uncaught ReferenceError: jQuery is not defined" in both cases. – Diogo Mar 17 '17 at 3:15
  • Can you edit your question to include your wp_enqueue_scripts() function? – Cedon Mar 17 '17 at 3:20
  • Sure thing. Done! – Diogo Mar 17 '17 at 3:29
0

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!

  • You can actually add 'jquery' to that empty array() in your script's enqueue. That tells WordPress that your script is dependent on jQuery. – Cedon Mar 17 '17 at 3:50
  • Yes, true! I figured that out soon after I posted this answer. Much cleaner solution, indeed. Well noted! – Diogo Mar 17 '17 at 8:11

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.