0

I'd like to use WordPress with Bootstrap but WordPress does not load jQuery properly so I get this error message:

Uncaught TypeError: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.

This is from my functions.php:

function add_theme_scripts() {
    wp_enqueue_style('bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css');
    wp_enqueue_style('style', get_theme_file_path() . '/style.css');
    wp_enqueue_script('jquery');
    wp_enqueue_script('Popper', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js', array('jquery'), null, true);
    wp_enqueue_script('Bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js', array('jquery', "Popper"), null, true);
    wp_enqueue_script('script', get_theme_file_path() . '/assets/js/script.js', array('jquery', 'Popper', 'Bootstrap'), null, true);
}
add_action('wp_enqueue_scripts', 'add_theme_scripts');

Could you please help me with this issue? Thanks a lot in advance

Improve this question
9
  • 1
    Have you directly confirmed that jQuery is not loaded? ignore bootstrap and open the browser dev tools and try to use jQuery directly, e.g. enteriing jQuery in the dev console and pressing enter. if it returned undefined then it isn't loaded. You can also look at the source code to check if jQuery's JS file is present, and the network tab. Don't rely on bootstrap to check, it may be incorrect
    – Tom J Nowell ♦
    Commented Aug 15, 2020 at 23:21
  • Yes, I tried that: ReferenceError: jQuery is not defined
    – Mark
    Commented Aug 15, 2020 at 23:25
  • And does your theme or a plugin elsewhere attempt to deregister and re-register jQuery so that it uses a CDN?
    – Tom J Nowell ♦
    Commented Aug 15, 2020 at 23:28
  • No, it does not. It's really weird. :(
    – Mark
    Commented Aug 15, 2020 at 23:38
  • As Tom also said, can you try looking at your page in view-source mode to find the script tag where it is trying (and presumably failing) to include jQuery? If it's there, can you look at the Network tab in your browser's debug tools to see if the file loaded properly: was there an error, and what is it, or if there was no error can you check that the server response for that file looks right, i.e. like a version of jQuery?
    – Rup
    Commented Aug 15, 2020 at 23:44

1 Answer 1

Reset to default
1

I forgot to add a default case to the switch...case statement of my add_script_attributes function in the functions.php file. Sorry that I did not see this before.

From my functions.php:

function add_script_attributes($tag, $handle) {
    switch($handle) {
        case "Popper":
            return str_replace("src='https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js'", "src='https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js' integrity='sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo' crossorigin='anonymous'", $tag);
        case "Bootstrap":
            return str_replace("src='https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js'", "src='https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js' integrity='sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI' crossorigin='anonymous'", $tag);
        default:
            return $tag;
    }
}
add_filter('script_loader_tag', 'add_script_attributes', 10, 2);
Improve this answer
4
  • 1
    What's "a default case"?
    – Jacob Peattie
    Commented Aug 16, 2020 at 2:59
  • 1
    This answer doesn't make sense, and refers to code that isn't in the question, can you edit it to include examples?
    – Tom J Nowell ♦
    Commented Aug 16, 2020 at 11:40
  • @JacobPeattie The default code block from a switch statement.
    – Mark
    Commented Aug 16, 2020 at 20:18
  • @TomJNowell Sorry, I've added the code snippet to the answer now. My functions.php is very long, and I did not think that this snippet would be relevant. That's the reason why I did not add it to the question.
    – Mark
    Commented Aug 16, 2020 at 20:18

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.