One of the most confusing things for new web developers is when JavaScript breaks in their WordPress website. WordPress seems to be a popular gateway to bringing in new web developers, and in terms of JavaScript troubleshooting, it can be really difficult.
The reason for that is because by the time you’ve setup your Theme Blvd theme and the bajillion plugins you end up using, you’re going to have a ton of JavaScript included in your website. Not all JavaScript is going to jive together. And with JavaScript, if one thing breaks, everything else is will break that follows.
And that’s a very important concept to understand. — You may notice one component on your website isn’t working, but don’t just assume that is the problem. Your actual issue may be something broken in the JavaScript, before getting to the thing you’re noticing.
Checking For Errors
When there is a JavaScript-related issue on your website, there’s often going to be an error that will help narrow down where the issue is coming from. Similar to using your developer tools to make CSS customizations, you can use them to also view JavaScript errors in your web browser.
For example, in the Google chrome browser, go to View > Developer > Developer Tools, and then click the “Console” tab when your developer tools window comes up. Errors will show in red.
This will hopefully where the script causing the issue is, whether it’s a custom script you’ve enqueued from your child theme, or a script from a plugin you have activated.
Check Your Plugins and Custom Scripts
Most likely when you get some sort of JavaScript error, it’s going to be due to a conflict with (1) a plugin you’re using or (2) a custom script you’ve implemented. Often, you’ll be able to find an error in your developer tools console, that’ll lead you to the answer.
But if you don’t have any error telling you where the problem is, you need to troubleshoot the classic way. Basically, you just need to temporarily remove custom scripts and deactivate plugins, one by one, until you the problem goes away on the frontend of your site. This will tell you where the issue is, at least.