Though many of the concepts in this course are still relevant, overall this course does not reflect our current course standards.
Transcript from the "Challenge 2: Solutions, Part 2" Lesson
[00:00:00]
>> Zac Gordon: Next, let's come down to conditionally loading. So, this is something, as I mentioned, is helpful when you only want your JavaScript to load on a certain page. For example, if we look at all of the different conditional tags that we can use, I don't know why, sometimes I just like looking through this page.
[00:00:17] I don't know, it's cool to see what's out there. Is home, is it the front page? Is it a single page, is it a single page with an ID of 17 or Irish Stew, or is it an array of things? Is it, there are so many different of these, not all of these are appropriate, but certain things like, is it a certain page, or is it the about me page?
[00:00:39] If it is, then I want to load my JavaScript there or I don't want to load it. What I did is single, and this means is it a single blog post page. The other thing you could do is put a exclamation point in front of it, and then this will check to make sure that it is not a single page.
[00:00:59] We'll see some other stuff later when it comes up of. We could say, is it a specific page template, and we'll create some custom stuff to use it. So, we'll come back to conditionals a little later. It may not apply to you, but it's helpful to know that it's there because there's nothing more painful than trying remove stuff when you can't figure out how to get it off the page and it's your own code.
[00:01:21] All right, so.
>> Zac Gordon: All right, last exercise, and this is super important. So, if we wanna get into the API stuff, we have to know how to pass data out to our JavaScript file. The few important parts here is what file are we attaching this to, or what needs to have access to it.
[00:01:47] So, in this case, it's jsforwp-theme-js, and anywhere that's available it will make this available. We can name this whatever we want, but because it's in the global namespace, you don't want to name this something like, well, you probably wouldn't want vars anyway. Like globals, or something that's going to possibly be used by another app and then be overridden, right?
[00:02:09] We do have to worry about that with JavaScript, so I always namespace it and then call it vars, or globals, just depending on the mood I'm in, or lets or cons. I don't know, you can do whatever you want, and then here I'm passing out the URL of the site which is one of the template tags.
[00:02:28] And there are literally hundreds of these, so this is where knowing the PHP and theme and plugin side of WordPress before we get into the JavaScript stuff is really helpful. Because this stuff and blog info is very common anytime you're displaying the name of the site, or I could change this to description and things like that and get different values out of it.
[00:02:50] On the frontend, I'm going to actually load this one, I'm going to come in and do 1.6
>> Zac Gordon: 1.5. Looks like I broke something, sorry, one second.
>> Audience Member: Is it maybe not on the complete one?
>> Zac Gordon: That's it, thank you sir. Okay, Line 16. Okay, thank you. Okay, 116 is loaded, let's see we should get our site now.
[00:03:42] Okay, and now notice, down here in the console, I'll start in the theme.js So in my theme.js I now have access to jsfawrp_vars, again this is exactly what I named in my functions.PHP down here jsfawrp_vars. And then whatever the property is that I set so the site URL and the site name are the two one's.
[00:04:10] And then when we load this, we're going to see this data. Again not the original use case but this is how we're gonna pass things like nonsenses and the URL to access the API correctly into our java script and get that. That's probably the most common things we'll be using it for, so For authenticating and for getting dynamic data that we need.
[00:04:33] Okay? So that pretty much wraps it up now. I think we fielded about all the questions we have, so if there's any?
>> Audience Member: Well, there's one question.
>> Zac Gordon: Is there? Okay.
>> Audience Member: Yeah, from the chat just looking to see if there's a theme. That uses View that you can think of.
[00:04:49] Do you have an example?
>> Zac Gordon: Let me come back to that later cuz I'm actually going to, when we get in a little bit further, I have a View demo. And there are some, but I'd have to go back and look them up. There are more React and Angular themes at the moment than there are View.
[00:05:08] And there's more instances of people doing small stuff with Vue. I know a good one. Go to xwp.co.
>> Zac Gordon: xwp is one of the WordPress VIP shops, and they recently rebuilt their whole site using Vue, so great example.