Check out a free preview of the full JavaScript for WordPress course:
The "Localize 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:

Zac examines the wp_localize_script() function, which allows taking data from PHP to make available to Javascript.

Get Unlimited Access Now

Transcript from the "Localize Script" Lesson

[00:00:00]
>> Zac Gordon: So, like I said, what localized script was intended to do originally was take different versions of a language, or take different versions of a word, and pass it in. You can pass it in as Spanish, you can pass it in as French, and swap it out dynamically on the frontend.

[00:00:12] But what we're gonna do is hack it to pass in some valuable data that we'll need for interacting with our WordPress site. So, just like the other one, it takes the, well, I'm sorry. It takes the handle of the file that we enqued. So, before if we named our file when we were enquing it theme/js, we put theme/js here to let it know what to load.

[00:00:34] The next one is the name of the variable we want to attach all the values to in our JavaScript. So, when we run this, there's going to be a global variable, like window dot name for js will be a variable. We can just run it in the consult and get the value.

[00:00:50] So, this is a good thing and kind of a bad thing that's going to be made publically available or not publically on page, but you could access it. It's great for scripts because, if there's stuff we need to figure out from WordPress, for example, if we wanna figure out the name or the URL of our site, this is dynamic content that could potentially change.

[00:01:08] How do we figure out? What about the name of it or the description of our site? All of these are things that someone could change on a whim, on the fly, so these are type of things that we could pass in. And this is all page PM not really going to get into the details of what this is doing.

[00:01:23] But you could take a look at it and guess, hey, this top one is going to give me some sort of sanitized version of the url to my site. And then the bottom one is going to give me the name of my site, right. We could figure out that much.

[00:01:35] It's about, it's much as we need to know about this. And I'll give you the exact data we need to pass in at different times, but this is the other major thing that we do need to know about. So between localized script and wp enqueue scripts That's going to be where all the magic happens.

[00:01:52] Last little bit, like I said WordPress needs to take these things that we setup so take our JavaScript file, poured it into the backend magical caverns of WordPress and then dump it out on to the page at the right time. And the way we do that is by hooking into WordPress' action and hook system.

[00:02:13] So, where we see wp_enqueue_scripts here under add actions. This is telling WordPress, hey at this exact time, when you're about to load all the scripts onto the page, whether it's CSS or JavaScript. Go ahead and run my script too. So WordPress is chugging along. It's building out your page.

[00:02:32] It has the head stuff. It's getting close down to the footer now, and then it's going to see this and say hey I've got to include. Glued this in queue script, and I've got to localize it and pass it some custom data. Bless you. So these few things together are what we're going to work on with our first few exercises and getting comfortable with this stuff