It seems you have 2 jQuery libraries loaded. You also have one from:
https://code.jquery.com/jquery-3.1.1.slim.min.js
Make sure to only load the one from WordPress itself.
Did you add this code, or is it your theme doing this? You will want to check if you can disable that third-party jQuery. You will run into more problems like this.
Oh I see, Yes I did this myself because I needed a jquery with “integrity” tag (for my bootstrap cause bootstrap 4 only works with that). But when I delete that line of code it doesn’t work either.
Also in my functions.php file I have “array(‘jquery’)” at multiple files, am I supposed to do this only at the first file?
I don’t have any experience with Bootstrap 4, so I cannot give the best advise on that. There are some themes on wp.org based on Bootstrap 4, you might look at them for inspiration.
One option could be that you choose to only load the jQuery from the third-party. Then you dequeue the WP jQuery and you enqueue the jQuery you want using the same handle ‘jquery’.
I don’t think this is best practice or even recommended. I am just throwing an idea out.
One complication that there seems to be is that you load a jQuery of quite a different version, that is also labeled as slim. That seems quite suspicious to me. It might have missing functionality, like slideDown(), and also not be backwards compatible with a lot of stuff in WordPress.
And the “array(‘jquery’)” is probably for dependencies? That sounds right. But I don’t know why bootstrap claims it is not loaded. It might be the order is wrong? But dependencies should handle that.
Are you sure you are enqueue-ing stuff right?
Found the problem, I think I loaded every file that used jquery in the footer so the jquery would only load in the footer. Thanks for telling me to look to other themes, cause I couldn’t find info online yet since Bootstrap 4 is quite new, I think I will find my answers in other WordPress themes created with Bootstrap 4 🙂
ps. I found out how the other themes did it. They simply downloaded the bootstrap files instead of using the CDN version.
I’m sorry, I thought it was fixed. But it is not.
How do you see I have multiple jquery files? And is it still the case? I removed the bootstrap jquery version and only am including it at 1 point now.
It is still being loaded.
You can right-click on the page and select “Inspect element”.
Then check the console tab for error. You can also check the network tab too see what files are being loaded. Or check the Inspector tab in the html head or the footer.
Oh I see, I loaded bootstrap in header and footer (probably forgot to take it away some time). I also took it away from the footer and now it works.
Thanks for the help. 🙂
