Check out a free preview of the full JavaScript for WordPress course:
The "Enqueueing Script" Lesson is part of the full, JavaScript for WordPress course featured in this preview video. Here's what you'd learn in this lesson:

After introducing the concept of enqueuing JavaScript, which is the process of loading JavaScript into a theme or administration area through the PHP functions, Zac introduces the wp_enqueue_script(). - https://developer.wordpress.org/reference/functions/wp_enqueue_script/

Get Unlimited Access Now

Transcript from the "Enqueueing Script" Lesson

[00:00:00]
>> Zac Gordon: Enqueueing JavaScript is the process of loading it onto a theme or into the admin area using PHP functions, okay? So the PHP that we're gonna use primarily comes down to these two functions. So wp_enqueue_script(); is going to be what we actually set up, and that will load our JavaScript behind the scenes into our theme dynamically.

[00:00:22] So that's great. Then, we're going to kind of hack or hijack something that was not intended for what we're using it for. But wp_localized_script(); because WordPress runs in so many different languages and it's really big on being translatable, easily translatable, and easy to run in other languages and easy for other people to translate.

[00:00:41] wp_localized_script(); was meant so that you can pass different versions of words, so you can pass different languages, so localizing the language or information into your JavaScript. So this process we hijacked because there are times we wanna take PHP data or stuff that WordPress has, and we wanna load it and make it available in our JavaScript without having to use the API, right?

[00:01:05] So if you have a PHP file, and it has some data, how do you get it to talk to that JavaScript? You could load it into the DOM, and then pull it out of the DOM, and use it that way, but you could also inject it directly and we'll look at that process.

[00:01:21] So this is what enqueue_script( looks like. It takes a few different parameters and I have them broken down, line by line. So the first parameter that we have is a unique-handle-name, and we can name this whatever we want. Commonly, it'll be something like theme-js or mythemeness or like view-js or for loading view or something like that.

[00:01:43] So this first one is something that you wanna be able to, at a glance, look at and tell what it is. And then, in other places, if you ever wanna say like, hey, pass this extra data into this file, you'll call it by that name. The next parameter is the path to the actual file itself.

[00:01:59] And so there are a few different ways to dynamically get a file. So in WordPress, if you have a theme, all of your theme files are gonna be at like, yoursite.com/wp-content/theme/nameofyourtheme/asset/js/file.js, right? But you do not wanna hard code that whole thing because what happens if your theme name changed?

[00:02:21] What happens if they installed an earlier site like all these other things? So get_stylesheet_directory_uri() is going to give us a shortcut to get into that folder, and then be at the root of our theme folder and from there, we could say, hey, go into our assets js file and grab that file.

[00:02:37] So pretty straightforward. The other really cool feature that enqueueu has is dependencies. So normally, when we load JavaScript the old school way, and we put one script tag and then another script tag and then another, we know that that order matters, right? If we try to put jQuery review at the bottom of it and call jQuery stuff before that's loaded, we have issues, right?

[00:02:59] So what this handles because in WordPress, we're not gonna be able to hard code anything, it could setup dependencies this way. So let's imagine I had two scripts, I had my helper script and I had my theme script. If this was my theme script where it says, dependency handles, I can say, handles-js, and it will automatically make sure that my handles one comes before my theme one, and we'll use this quite a lot.

[00:03:27] The other one we're actually gonna avoid most of the time and this is a great feature but it's really annoying in development, so WordPress will cache all your CSS and JavaScript files. And one of the ways it does this is by adding a version number onto it. So if you put in here, I'm on version 1 of my JavaScript file, and I save a bunch of changes in my JavaScript file, you won't see those changes necessarily show up on your site unless you clear your cache.

[00:03:53] But if you change the version to 1.2, then it'll pull it in, right? Does this make sense? Head nods, yeah? So we're gonna cheat this a little bit. And instead of passing in a version number, we're gonna pass in a timestamp down to the seconds. So this means that every time WordPress loads a page, we have dynamically put in a new version number that's just like a second or a few seconds off, so it won't cache it so that we don't have to clear our caches we're developing.

[00:04:20] But once you're done, you don't want that to happen because you want your JavaScript running as fast as possible, right? So the very last thing is something that we usually leave to true and it's a Boolean of true or false and it just tells WordPress whether you wanna load your JavaScript in the footer, if it's true and it's by default true, and you could set false and it'll put it in the header.

[00:04:41] So WordPress has two hooks that we'll look at at one point as we get into here. It has a hook called WPHead and WPFooter, and behind the scenes it feeds everything in here. So if a theme is missing WPHead, it'll break a lot and if it's missing a tag of PHP called WPFooter, that's how it injects everything in the right place.

[00:05:01] So that's enqueue script, pretty straightforward and we will look at this so many times today that if this is not making sense now, it will be literally second nature by the time we get out of here, along with this other one called localized script.