wp enqueue script – Bootstrap and jQuery error: $ is not defined


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/bootstrap15eme Doctor.1.3/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/bootstrap15eme Doctor.1.3/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!

Tatex 3 months 2022-04-04T15:06:46-05:00 0 Answers 0 views 0

Leave an answer