Bootstrap and jQuery error: $ is not defined

Question

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!

Pat J · Accepted Answer · 2022-04-04 20:44:59Z

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

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
– Pat J, Commented Apr 6, 2022 at 13:52

Stack Exchange Network

Bootstrap and jQuery error: $ is not defined

1 Answer 1

Your Answer

Hot Network Questions

Bootstrap and jQuery error: $ is not defined

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions