JavaScript for WordPress JavaScript for WordPress

Challenge and Solution 3: WordPress Plugins

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

In this challenge, Zac demonstrates how to work through an exercise to enqueue JavaScript to a WordPress plugin in multiple ways.

Get Unlimited Access Now

Transcript from the "Challenge and Solution 3: WordPress Plugins" Lesson

[00:00:00]
>> Zac Gordon: So, the practice exercises are pretty much the same as before. Let's do the first one together, make sure that it works, cuz we are in plugins now and not themes. It's gonna be a little bit different, and then you can do the other two on your own, okay?

[00:00:13] What we need to do first is get the files, so come back over to the repo,
>> Zac Gordon: And go into section two, enqueue a plugin and copy all these files. And then, instead of putting them in your theme's folder, paste them into your plugins folder.
>> Zac Gordon: Okay, so now you should have all of those there and we're going to close out the themes that we're editing, and let's drag our whole plugins folder into our theme editor.

[00:01:00]
>> Zac Gordon: So, we've got that code ready, and now I need to mention something about it on the backend. So, there's a page for plugins.
>> Zac Gordon: When you're working on these, please don't leave them all activated at once. You may start to get some compatibility issues because some of the code is shared, and some of the stuff is the same.

[00:01:27] I tried to make it so that it would potentially work, but what I'd like you to do is when you're working on, for example, in queueing the frontend JavaScript. Let's all activate 2.1 together right now. And then, when we're done with it, deactivate it like that, and then go onto 2.2, okay?

[00:01:45] So, everybody go ahead and activate 2.1 right now.
>> Zac Gordon: And then, in our 2.1 JS folder, we're going to come down into the read me and just look at the instructions real quick. Okay, so we're going to open up a file called somethingPHP frontend.js-js, and then we're looking for nq scripts.

[00:02:09] Okay, we know what that is, and then we want to just change the file name, and then pass in file. That's it. Okay, let's check that up. So, if I come in to my jsforwpfrontend.php, this is the information about the plugin. And then remember, like I said, sometimes WordPress will have conditional code at the beginning that will exit out of all the rest of it.

[00:02:34] So, if somebody is trying to access this plugin directly, it will tell on, hey, you don't have access and take them out. Okay, so change path to file.js to use plug ins URL and then pass it to parameters. This is going to be my first, and this is going to be my second.

[00:02:57] Okay, so I'm going to delete this code here This code right here, delete that and say, plugins_url and it's gonna take two parameters and we'll do this easy way. We'll just copy this code,
>> Zac Gordon: Paste it in and then copy FILE and it's a second parameter, so they need to be comma separated.

[00:03:19] So you need a comma right here And then file. Okay, I'm not trying to make your lives difficult, but this is the convention. Again, this is something that needs to become second nature. You need to be able to like remember okay I've got plug ins url, I put this in here, I put that in there.

[00:03:35] And, from there, I'm going. And, for now, if we, we should be able to just come to our site. The plug in is activated. Notice, I still have my JavaScript from before. But now I've got plug in JS loaded. Sweet. That's perfect. And it's coming from my main JS file, which is inside of my assets.

[00:03:56] JS main right here. Plug in JS loaded, okay