Home » Blog Posts » Solutions » Internet » WordPress Solution: How to resolve Javascript loading issue related to “WordPress Bootstrap Theme Tutorial” by Coder’s Guide

Company News:

Recent Testimonials:

WordPress Solution: How to resolve Javascript loading issue related to “WordPress Bootstrap Theme Tutorial” by Coder’s Guide

We don’t know about you, but when we were going through the YouTube tutorial to Make a WordPress theme with Bootstrap 3 – Tutorial #2 we were just not able to get the Javascript to work, in spite of trying out every single suggestion in the comments section.

The picture below serves to highlight one of the issues you’ll encounter when the JS is not loaded i.e. upon clicking the responsive menu, nothing happens. The other issue is that the drop-down menu items don’t work/display as well.

JS-not-loading-Wordpress-Bootstrap-Theme-Tutorial-Problem-SS-0

Not only was it extremely frustrating (trying out various combinations and permutations…all of which failed to work), but we also spent a lot of time in the process…and almost gave up on the whole exercise.

As a last resort, we decided to try it in IE, to see if it worked there, and therefore could have just been a Firefox issue. Exact same problem in IE as well!

So we decided to “view source”, or in IE-speak “inspect element”, to see what it would reveal. And to our astonishment, we noticed that not only was the “script src” pointing to a wrong directory, but the JS file being referenced was also incorrect – all due to the fact that the instructions in the video were a bit out-of-whack (for lack of a better word), and as a result, almost everyone got tripped up on it.

JS-not-loading-Wordpress-Bootstrap-Theme-Tutorial-Problem-SS-0a

After noticing the above anomalies, our eyes then went down to the 3 remarked/commented lines (which were – in our case at least – inserted by the WP-Super-Cache plugin), and we knew right away that that was the problem. What seemed to have been happening was that the initial page was cached (alongwith the initial JS code file and directory), and that cached page was constantly being served up to us “as-is”, regardless of the changes we made.

JS-not-loading-Wordpress-Bootstrap-Theme-Tutorial-Problem-SS-0b

So we went in to our WordPress back-end (Plugins section => WP-Super-Cache plugin) and both turned-off caching, as well as deleted the stored cache.

JS-not-loading-Wordpress-Bootstrap-Theme-Tutorial-Problem-SS-1

JS-not-loading-Wordpress-Bootstrap-Theme-Tutorial-Problem-SS-2

JS-not-loading-Wordpress-Bootstrap-Theme-Tutorial-Problem-SS-3

JS-not-loading-Wordpress-Bootstrap-Theme-Tutorial-Problem-SS-4

We then cleared our browser cache and refreshed the page and guess what? Problem solved!

JS-not-loading-Wordpress-Bootstrap-Theme-Tutorial-Problem-SS-5

JS-not-loading-Wordpress-Bootstrap-Theme-Tutorial-Problem-SS-6

JS-not-loading-Wordpress-Bootstrap-Theme-Tutorial-Problem-SS-7

So if you’re having the same problem as we did (and have tried all of the suggestions in the video’s comments section), first check if you’re using the WP-Super-Cache plugin. If you are, then check if caching is turned on. And if it is, then the screenshots and procedures above may potentially help you resolve your problem as well – fingers crossed!.

Use the comments section below to let us know how it goes for you, or if this post has helped you in any way.

  • Let us help you learn: