JavaScript for WordPress JavaScript for WordPress

Adding JavaScript to WordPress Plugins

Check out a free preview of the full JavaScript for WordPress course:
The "Adding JavaScript to WordPress Plugins" 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 reviews how to place JavaScript resources into a WordPress plugin.

Get Unlimited Access Now

Transcript from the "Adding JavaScript to WordPress Plugins" Lesson

[00:00:00]
>> Zac Gordon: We've got, in queuing JavaScript in a theme. Now luckily, in a plugin, it's not going to be too much different. There's basically just one line of code that's slightly different, which is how we link to the file itself. And then there's going to be an extra hook, which will not only let us put our code onto the front-end like we did with the theme, but then also load it in the admin area.

[00:00:19] So we should be able to get through these pretty quickly. This should look very familiar, right? What's the one thing that's different? I'll give you a hint, it's in bold.
>> Zac Gordon: Remember last time it was something like something something URIs, scripts, child's template, something like that, right? So, now we have a different convention which is plugins_url, we still have the path name the same but then the actual location of where we are is being passed in dynamically with FILE, okay?

[00:00:50] So this is kind of the go to default way of doing it, because if we tried to use a PHP code that gave us a link to our theme folder, that would not help us if we were in a plugin, right? So this code is going to give us the plugin, but everything else is the same.

[00:01:05] So, no big differences there. The big difference comes from this, again, is the exact same. But we also have this option. So there are two hooks that we could use, we could use wp_enqueue_scripts, and that will take the code that we wrote and it will put it out on the front-end of our site, on every page and we could do conditional stuff as well.

[00:01:27] And if we do admin_enqueue_scripts that will put it on every page of the admin area. Now, this may not be what you want. If you want to build a plugin that has a plugin page, and you have custom code that you only want running your plugin page, or you want to edit, let's say you want to put some custom JavaScript on the edit page.

[00:01:45] You don't want that dynamically loading on the media page and all that other stuff. So, there's some conditional logic we could do by passing in the actual hook in of where we are. And then making sure that it's, I'm sorry, if it's not equal to the page that we want, this URL structure is weird.

[00:02:04] toplevel_page_, and then the name of the actual page link. So when you're in WordPress, if you're editing a post, it's edit.php. If you have a custom plugin, it could be whatever you want. So this is whatever you want but it's usually written more like this. [COUGH] So, we'll assign the variable somewhere else because you're gonna use that URL in more than one place if you're building out pages.

[00:02:29] And then we have to use global to pull it into our function and then we just concatenate the strings together. So, top level page is gonna be the exact same thing as we saw before.
>> Zac Gordon: It's the exact same thing as this, it's just being abstracted out into it's own variable.

[00:02:49] So again, what this code is saying is saying, hey, if you're not on my plugin page, return now, which is gonna end that function, exit out of this hook, and enqueue_script will never run. And this is something that's fairly common in WordPress. It's saying, hey, if you don't have this ability or if you don't have this running, die now or exit out now or return now and stop.

[00:03:12] Cool? So this is not code that you need to memorize, and honestly, to go from what we learned today into building a full plugin and a full plugin page, I'll give you the template code but it's not really something that you'd probably jump into without reading a bit more.

[00:03:25] And there's a lot of documentation. I have whole other courses just on doing that kind of stuff. So I wouldn't worry about it too much but I do need to point out that this is the case and it's worth practicing. So, again, we have these three different options here, we can get it on the front-end, we can get it on the admin area, everywhere, or we can get it just on our plugin page.

[00:03:44] And so, guess what we're doing, I'm sorry, the links again I put these in the repo now so if you look in the repo you should see slides so you could follow along if you wanna click on any of these. Again, everything is documented pretty well. You can see this last link here now is on the codex, and it has some stuff that hasn't made its way over to the newer documentation yet.