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