1

I'm trying to use the Bootstrap collapse component and just can't get it to work. I believe the HTML is proper, but whenever I click on the element that should trigger the collapse, I get an Uncaught ReferenceError: $ is not defined error in the console, pointing to the custom.js file which contains the $('.collapse').collapse() function. I assumed that I'm just enqueueing the scripts in the wrong order, but everything seems okay to me:

function my_scripts() {
    wp_enqueue_script( 'bootstrap-jquery','https://code.jquery.com/jquery-3.6.0.min.js', '', '1.0.0', true );
    wp_enqueue_script( 'bootstrap-js' , 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js', array('bootstrap-jquery'), '1.0.0', true );
    wp_enqueue_script( 'my-js', get_template_directory_uri() . '/js/custom.js' );

    wp_enqueue_style( 'bootstrap-css', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css', '', '1.0.0', 'all' );
    wp_enqueue_style( 'my-css', get_stylesheet_uri(), array(), _S_VERSION );
    wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700', false );

}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

Am I missing something important, as I really can't figure it out. :/

Thank you!

1 Answer 1

0

WordPress uses jQuery (and others) in noConflict mode, meaning that $ isn't automatically available. To use $ in your jQuery script, wrap your code in this:

jQuery( document ).ready( function( $ ) {
    // $() will work as an alias for jQuery() inside of this function
    // [ your code goes here ]
} );

Reference: the User Contributed Note from 'bcworkz' on the manual page for wp_enqueue_script()

Also note: you shouldn't try to load a new jQuery (which is what your bootstrap-jquery seems to be doing, if I'm reading this right). Instead, add jquery to the dependencies:

function my_scripts() {
    wp_enqueue_script( 'bootstrap-js' , 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js', array('jquery'), '1.0.0', true );
    wp_enqueue_script( 'my-js', get_template_directory_uri() . '/js/custom.js' );

    wp_enqueue_style( 'bootstrap-css', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css', '', '1.0.0', 'all' );
    wp_enqueue_style( 'my-css', get_stylesheet_uri(), array(), _S_VERSION );
    wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700', false );

}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
2
  • 1
    This did the trick, thank you!
    – Tatex
    Commented Apr 6, 2022 at 13:45
  • If this worked for you, please take a moment to mark it as the accepted answer. That will help others who may be having the same problem as you. (It'll increase my site karma, too, but that's secondary.)
    – Pat J
    Commented Apr 6, 2022 at 13:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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