JavaScript for WordPress JavaScript for WordPress

Challenge 1: Enqueuing JavaScript into a Theme

Check out a free preview of the full JavaScript for WordPress course:
The "Challenge 1: Enqueuing JavaScript into a Theme" 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, students locate and change the wp_enqueue_script() function to load a JavaScript file into a WordPress site. - https://github.com/zgordon/frontend-masters-jsforwp

Get Unlimited Access Now

Transcript from the "Challenge 1: Enqueuing JavaScript into a Theme" Lesson

[00:00:00]
>> Zac Gordon: These are the practice exercises that we're gonna do. And let's swap over, hopefully, at this point, everybody has pulled down the repo that we have.
>> Zac Gordon: And if you go to just github.com/zgordon, it'll be pinned as the Frontend Masters just for WP. And we want to be looking in this first section here in queuing JavaScript init theme.

[00:00:30] So before we get into exactly how we're gonna do all this, just something about all of our project exercises to start of and I'll you in the code other than this might be a little bit easier.
>> Zac Gordon: Okay, so all of our exercises have two parts. They have the actual exercise that you should be playing with, and then it has completed.

[00:00:54] And completed is going to, of course, have the finished code. So the other thing that they have is a readme file in every one. So if you can on your computer, pop open in this folder and come down into 1.1 in queing js and open up the readme.

[00:01:18]
>> Zac Gordon: You'll see these instructions, so every folder that we're working with has this readme, and then it'll tell you, hey, go to this folder. Find this function, change this information, and when you go into that folder, or into that file, I'm sorry.
>> Zac Gordon: And you scroll down, you'll see these comments that match the exact same thing as the instructions.

[00:01:42] So it says, Change /path/ to assets theme.js. So like I said, I'm going to give you some broken code, and then give you the exact code to fix it. And the idea is to make this as easy as possible. So that what we're really trying to do is identify the stuff that you're gonna have to change regularly.

[00:01:58] And not spend our day coding out or typing out a bunch of stuff that we don't need to. So again, you'll scroll through, you'll see where those changes are. And that's how you're gonna follow them. Now, some of these exercises are themes and some are plugins. Everything we're looking at in this first section is a theme.

[00:02:18] So in order to run a theme, we can't just edit this here and have it magically show up in WordPress. We have to find the right folder in our computer. And put all of these exercises into that themes folder. So if you're using desktop server or local, or I'm using another one, Chassis, they're all going to be in different places depending on where you are.

[00:02:38] So let's take a moment now, just make sure that you can pull up your WordPress files. Go into WP-content/themes and copy and paste all of these exercises once, so 1.1 through 1.6, copy and paste them into your themes folder.
>> Speaker 2: Including the completed?
>> Zac Gordon: Including the completed, yep.

[00:03:03] Cuz then they'll all be there for you to edit and play around with
>> Zac Gordon: So I guess that mine's a little bit
>> Zac Gordon: Oopps, don't delete the whole folder. Okay.
>> Zac Gordon: Okay, so I'm gonna take all these files, copy and paste them in.
>> Zac Gordon: And we're good to go.

[00:03:43] Now, if you come over to your WordPress site that you should have set up. It's whatever the URL structure you set up. Go into your theme section and you should see all of those themes there. And I'll just pull mine up real quick
>> Zac Gordon: If you're not familiar with WordPress, to log in, you could just go into your site dot com/WP-admin, and that will take you to the admin area.

[00:04:47] You want to come into appearance over here and themes. And then you should see all of the themes listed there. Now, they don't have beautiful pictures everywhere.
>> Zac Gordon: And what you want to do is activate 1.1, not the completed, but the practice one.
>> Zac Gordon: And when you come over and view your site, nothing special should necessarily be happening.

[00:05:17] This is just a very basic WordPress theme that I have set up for you so because this is our first exercise together. And we're gonna be using this theme consistently through everything. I just want to show you a few different pieces of it. So the tricky thing we have to do now is again, we don't want to be editing these files that we downloaded, right, from the repo.

[00:05:36] We wanna be editing the files that are in our theme directory. So what I tend to do is just open up my whole themes folder inside my code editor. And today, I'll be using Atom just cuz it's a simple one but if you have a preferred IDE or something else that you like, don't change for my sake, keep using what you're using.

[00:05:54] But now, I'll go ahead and pull all those theme files into your editor so that we could see them all at once.
>> Zac Gordon: And before we start with the actual exercise, let me show you a few things about this file. So WordPress, if you haven't built a theme before, this is about a simple file architecture as you're gonna find.

[00:06:24] So index.php is going to control all the pages. Header will have our header code. And if I open up header, remember how I said there's a function called wp_head? Notice that there's no JavaScript and CSS here in our file, there's not even a title tag. This is the hook that WordPress uses behind the scenes to export any CSS and any HTML that we want to go in the header.

[00:06:49] And if we open up our footer.php, we'll see a wp_footer. And again, this is the tag that WordPress uses so that whenever we include something that's going to go in the footer, it's going to dump out here. And when you run WordPress, you'll see in the footer, just WordPress alone is going to have a bunch of code there, and that's how it's hooking into it.

[00:07:09] Our functions.php file is kind of all the programmy stuff that isn't template code. It all gets thrown into a functions.php file until it gets too big and then taken out as a plugin or something like that, or separate other files. So that's just to give you an idea of the different files to expect.

[00:07:26] And then inside of our assets and js, there is most of the time we're gonna be calling it theme.js. This is not a convention necessarily by any means. You don't have to call that. You can call it whatever you want. And notice that it's just going to display a message.

[00:07:42] If you haven't seen these immediately evoked functions before, is this new to anybody offhand? This syntax? Nope, okay. What this is gonna do is help scope our stuff and protect it from being put up into the global scope and then it will load it. But the other reason I did this is later when we get to jQuery we also have to use a syntax like this to pass in the dollar sign.

[00:08:04] So when our code eventually runs, all we're gonna get is a console message that says loaded, so that's what we want to get to. And if we open up our readme, we'll see the instructions. So since this is the first exercise, why don't we do it together. And then from here, you could do the next couple of exercises on your own and then I'll circle back and go over them with everyone.