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" Lesson
[00:00:00]
>> Zac Gordon: Welcome back you all, you've have sometime to work through the exercises. What I am just gonna do now is go through the completed codes. So, I won't activate every theme and show you all the steps, but I will point out some important things that are worth knowing about.
[00:00:13] So let's start of in our 1.2 exercises. And I am actually gonna be playing around with the completed ones, cuz it has all the code already done. So if I come into my functions.php in my completed 1.2, what we're trying to work on here is dependencies. So we have two different versions of this, or I'm sorry, two different files being in-queued.
[00:00:35] We have a config file and we have a theme file. And the important thing that we wanted to do was to make our theme file dependent and load after our config file, and the way we do that is by passing in the parameter of the handle from whatever it is that we wanted to use.
[00:00:54] So in this case so it's jsp Config-js and that's what we're plugging in here. And then when we load the page we should see one load and then the other after it. So, that's our 1.2. In our jQuery example there's two things we have to look at. One is in the functions.php.
[00:01:14] Notice that, we are not enqueuing jQuery anywhere here all we're saying is make it a dependency. And because jQuery is included with WordPress Core, we don't have to do any extra work, it's just gonna make sure that jQuery is loaded on our page and I'm pooling in jQuery masonry as well here, shoutout to you Dave, buddy of mine.
[00:01:34] Okay, and this URL is very important and worth going and checking out as well because it is gonna show you all of the libraries that come bundled with WordPress. So some of them are a little bit older. A lot of them are like the jQuery UI library and then some are very Word Press specific as you get further down.
[00:01:56] But some things maybe like a lightbox or different things could be helpful for you. TinyMCE for example is used in Word Press internally, and then some internal Word Press stuff. Coming down, we see Backbone in Underscore are included, which we talked about why some of the features that built with that, and you could also see the stuff that's removed.
[00:02:16] So we're way past the days of scriptaculous and prototype, although I remember them no longer in WordPress core. So all I did was pull in jQuery, you may have played around with other ones, there's really no right or wrong way. And then the other thing that's important to mention is our actually theme.jsfile.
[00:02:35] And when we work with jQuery in Word Press, we cannot rely on the dollar sign just being available to jQuery. So what we're doing here is we're saying, hey, when this Function is being called here, pass in jQuery to it and rename jQuery as a dollar sign when you pass it in to the inside of this function here.
[00:03:00] So we don't need to use this, we can actually remove all of this and just type jQuery, instead of the dollar sign. And a lot of WordPress core or some of the WordPress core code that you may see uses this method just because it's a little bit safer.
[00:03:16] However, for convenience sake one of the reasons you're using jQuery is probably you want it to be easier if you are using it. So follow this method it's very important otherwise you'll get some unexpected results. Yeah, question?
>> Speaker 2: So If you didn't include that, is the dollar sign going to default to a different library, elsewhere, or is it assigned it all in elsewhere?
[00:03:37]
>> Zac Gordon: It's going to depend, I mean, this has existed since you still had people using prototype and other ones that were very dollar-signy. So nowadays we don't see as much of that, so it would depend on what's loaded. It may actually still work, but you may potentially get some issues, I think.
[00:03:53]
>> Speaker 2: I just wanna make sure that you're saying which one you'll be on every time.
>> Zac Gordon: Yeah, although I don't think, no, Word Press is, I don't think it's actually anywhere in it doing this for you. But you could test it out just by deleting this and checking it real quick.
[00:04:11] I'd be curious what you find, yeah.
>> Zac Gordon: But it's definitely, it's in all the docs and everything saying that you really want to work with them that way. Okay, so the next one up is in queuing external libraries. So sometimes it's faster to load stuff off a CDN instead of having it in your own repository, specially if its something that's being used commonly a lot.
[00:04:35] So in this case we're pulling in view right down off the repo. And then we're including it as a dependency, the same as we did with jQuery. The difference here is that WordPress is going to try to attach this time code or if we didn't have a time code, and let's just say that we left it blank.
[00:04:54] If we leave this blank WordPress is automatically going to change it to the version of WordPress at its end. So there's no way to set this to null which is kind of annoying sometimes I wish that this worked, but it doesn't. So we're going to leave this as is and then use some WordPress hooks to make sure that nothing is added to end of this.
[00:05:15] Because if we had ver=4.8 and we try to load that in the browser, it's going to give us an invalid URL and that won't work. So that is not an option for us. So down here is some code where all I had to do is change cdn to unpkg, and that will make sure that, this is stripped anytime that a JavaScript file is loaded.
[00:05:43] If it has this in the URL it will not apply the version number. Or it will remove the query argument of versions. So depending on how much PHP you're familiar with. The other thing I could show you here is that if you ever start working with multiple CDNs, you could just do an or, and then this could be other.
[00:06:05] And it'll get a little nasty if you have too many of them, but completely valid, it'll work.
>> Zac Gordon: So this block of code, keep in mind, and copy and paste it anywhere that you need to remove that version number because it's breaking. I also left some code down here that you could uncomment and what this will do is apply the same thing to any CSS.
[00:06:27] So sometimes CSS could be more forgiving, it does depend on they're serving stuff up. But if again you're trying to link to some external CSS thing and it's adding a version number and breaking it. Then you can run it through that filter as well. But you'll notice that down here I'm linking directly to a Google Font, and it doesn't break it.
[00:06:47] So that's pretty nice. But Google fonts are used to take other parameters, so it's probably just ignoring those, notice that it already has like he stuff going on, the arguments.
>> Speaker 2: So are both of those necessary? You have to do the time stamps, and then you also have to remove the version of function?
[00:07:06]
>> Zac Gordon: No, you don't have to do time here. I'm just leaving it because it's not actually possible to set it to null. If we didn't do time, and we left at this, it would set it to the version of WordPress. So I'm just leaving time but maybe this would actually be a little bit more clear and make sense.
[00:07:22]
>> Speaker 2: And then, if you use that function, that's gonna take care of the same thing?
>> Zac Gordon: It will actually solve it, this won't take care of the problem.
>> Speaker 2: Okay, at this point.
>> Zac Gordon: And this won't take care of the problem, you actually have to go in and hardcore remove it itself.
[00:07:37] Because it always wants to fall back so that even if you don't know what version your on it will be able to catch it based on some data. And again when you go to push to production for your own you wanted then start tracking these. So remove time and change it to 1.5, 1.6 as you roll out new versions.
[00:07:55] And that will allow it to be cached better, cuz if you have this then it's going to assume that it's new stuff every time.