Check out a free preview of the full JavaScript for WordPress course:
The "Challenge 4: Solution" 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 walks through the solution to Challenge 4.

Get Unlimited Access Now

Transcript from the "Challenge 4: Solution" Lesson

[00:00:00]
>> Zac: So in our second example, what we wanted to do was use the admin hook. So all we were doing was we had the exact same code that should all still be working properly. And instead of using the in queue scripts that would display on the front end, we're using this hook admin in queue scripts, and that would load our code on the backend.

[00:00:21] So if we activate this plug-in, and pop open the console anywhere in the admin area, we will see this code. So that works well for us. Then, in the final example, same thing, except now we have a little bit more PHP getCode going on. So for the sake of you all who haven't built plugins and might wanna use this as a little template later on, for building a plugin, what we have at first is we're setting the URL of the menu.

[00:00:46] And this is why I said don't activate too many of these at once, because if you have the same URL structure for the same plugins, that's gonna be an issue and just remember, that if you wanted to create a plugin, you probably wouldn't want to name your string edit, cuz there's already gonna be one in the admin area.

[00:01:01] So again, this is why name spacing, various places, is a helpful thing. Then, this function here is just adding a link to the admin area. I won't go into all the different things there, but you could search for add_menu_page, and then you'll see the different parameters and it should make just sense by looking at it, kind of what that's doing.

[00:01:22] Then, this is some horrible best practice for putting a bunch of HTML right inside our PHP template. Of course, you'd wanna abstract this out in to an actual template, do this a little bit cleaner. But for our purposes, it's okay, and I'll also mention that, again, this is all PHP stuff, but in WordPress, all text should be passed through something that could be filtered and translated.

[00:01:46] So if I just said here, give me an h2 with JS for WP plugin, that would be a problem, because that can never be translated into Spanish, or German, or Portuguese, whatever. So whenever you pass stuff through, you wanna make sure that 's translatable, and then just in case somebody tries to do some hockey, I got your site now, JavaScript.

[00:02:07] It's also gonna strip out type like that. What we've got is we're setting up the URL, we're setting up a page. All the stuff is PHP. It's not as important for us. What we really wanna is come down into our back end scripts, and I mention this because, what we probably want to start doing, is having both frontend scripts, and backend scripts.

[00:02:30] We can't put them into the same function, because they're tying into different hooks. And weird things will start happening, if you try to start hooking in things when they're not supposed to be there, right? This is a perfect example. So we don't want all of a sudden some admin js to be going off on the page telling them that they did some error wrong, when really they're just trying to read a blog post.

[00:02:55] So break those two up, and we're making sure we use admin_enqueue_scripts, and then, we're throwing in this extra code here just to make sure that it's only loading on our page. So if I come into plug-ins, and I activate 2.3 completed. Notice that it's gonna throw up this link over here.

[00:03:14] That was setting up our admin. This is that page, HTML, that's hard coded, and if I pop open my console, I should see that there is now back in plugin loaded, but if I go to a tools section or another page, notice that it's not there.