Though many of the concepts in this course are still relevant, overall this course does not reflect our current course standards.
Transcript from the "Enqueuing JavaScript in a Theme" Lesson
[00:00:00]
>> Zac Gordon: Just to kind of review, what we're going to do here is we're going to focus first on just enqueuing regular JavaScript. That first step of just getting a file to load on the page, then we're going to look at how to do multiple files. Like I said, the helper and the theme and how to make one dependent on another and what happens when you switch that dependency.
[00:00:19] Then we need to talk a little bit about my friend jQuery because there's a little bit of stuff we have to differently when working with jQuery. jQuery assumes that the dollar sign is just for jQuery, but y'all know dollar sign is used in a lot of different libraries.
[00:00:35] So, we have to do what is called a noconflict wrapper to make sure that we know, hey, this really is jQuery in this instance, and there's some stuff we'll do with that. The other cool thing that we'll realize is WordPress includes jQuery bundled in it's core, so anything that WordPress uses as a JavaScript library we can access with our own code.
[00:00:57] So, things like masonry, jQuery, backbone, Underscore, just to name a few. There's some thick box and light box stuff. Since WordPress uses these, we don't have to go and get our own script and in fact, it's a bad idea to load your own jQuery or load anything that WordPress is already loading.
[00:01:17] There's also an issue when we have external JavaScripts. So you're familiar with loading stuff from a CDN, for example. The problem is is that, if WordPress attaches a version number to the end of a CDN URL, so let's say we're going to myCDN slash view. And then, it decides to add question mark v equals 4.1.
[00:01:37] That very well could break the URL, and it won't load. So I got to show you a little bit of code that you'll need to load if you're pulling stuff down off of the CDN directly, if you're doing that for some reason. There's also some times where you don't want your java script to load on every page.
[00:01:55] So for example, if you're building a custom project section, or custom portfolio section, and you want that to be a react app, you don't want Want your react app loading every single page, you just want it loading on that page. So I'll show you some conditional code that will let you say, Hey, I just want my JavaScript to show up here, and that's gonna make everything else around it more performative.
[00:02:15] And finally we'll throw in that localized scripts at the end, passing some customed data. A few links for you, I will post up these slides so that you can have them but this is just to the straight docs. You don't need this to do what we're about to do, but if wanna take it further WordPress is pretty well documented.
[00:02:32] Oddly, it has a code x and developer site. So, it's kind of in the weird place of having two documentations, but for most of the stuff where you see developer.wordpress.org that's the newer stuff. And when you see codex in the URL, it's gonna be a little bit older, but it might not necessarily be outdated is kinda the tricky thing.