Let’s take a look at how to add styles and scripts through our hook. It’s pretty straightforward. There are only two steps required to add styles to our pages. The first step is to register the style registering style simply means that you’re telling WordPress that you have a style sheet and you would like WordPress to know its location along with other details in the resource section on this lecture. I’ll provide a link to learn all about registering styles in order to register a style. We need to use the WP register style function under the notes section you’ll see we’re using this function correctly because it says use the WP and scripts. Action to call this function. Calling it outside of an action can lead to problems since we’re already doing that. It’s safe to assume we can use this function. This function has two required parameters. The first parameter is the handle name the handle name can be hought of as a unique name or I.D. for reference. The second parameter is the source to the style sheet.
Let’s go back to the NQ function and call the WP register style function. Now we have to pass in a handle for the first parameter. If we go back to the index template you’ll see we have quite a few style sheets being loaded. The first style sheet is a Google font so let’s call this handle. J You google fonts just like functions. It’s also common practice to prefix our handles with some initials for the second parameter. Let’s pass in the you URL we’re loading this font from a CDO n so we can just paste the URL like so as a string.
Next up is the bootstrap that CFS file. You’ll need to call the WP register style function again just like before. I’m going to use the same naming convention. The name will be j you bootstrap unlike the fonts. This file is located within our theme directory. We’ll use WordPress to help us generate a user Rel to this file. There’s actually a function that will always point to the current theme directory. This makes it easier on us as we don’t have to perform checks if the owner of the site changed the name of the theme directory right at the top of this function. I’m going to create a variable named you are I and set its value to the function. Get the file you are right you do not have to pass in anything and you don’t have to include any files to get this function to work. This function is loaded and defined for you by WordPress. You may notice this function has a similar name to the get the file path function. The difference between these two functions is the you arrive version will actually get the Web. You are out the non you arrive version gets the system path with this variable set. I’m going to pass it into the function right after this. I’m going to append the path relative to our theme folder which is slash assets slash C Ss slash bootstrap dot CSX the first two parameters are required. These next three are optional but the last two aren’t used as often.
The third parameter is what’s most important.
The third parameter is an array of dependencies sometimes your styles may depend on another style sheet to load. You simply pass in an array of panel names and WordPress will take care of loading those style sheets before this one. If WordPress doesn’t find a style sheet then this style sheet will not be loaded. For example if I wanted the Google font to load before the style sheet then I could pass in the handle name like so I’m not too worried about dependencies so we can leave this out now that we have that finished. I’m going to register the rest of the styles. It’s the same as before positive video. If you need to have what I have if we refresh the page you’ll notice that this won’t work just yet. We’ve only registered our styles. Now we must tell WordPress we would like to add it to our page. We now have to use a function called WP and Qs style. I’ve also included a link to this function in the resource section of this lecture. This function only has one required parameter which is the handle name of the style we registered earlier. You’ll notice the other parameters are similar to the WP register style function. However these are only available just in case you forget to register a style. You should always register a style though the difference between registering and queuing a file is that registering will tell WordPress about a style sheet and make it available to be called later on while in queuing will instruct WordPress to load our style sheet onto the page right away. You will not always want to in queue a style on every page as it is inefficient. There’s also plugins out there that will sometimes scan registered sales and perform actions such as modifying and concatenated style sheets together so it’s best to register first then NQ lets NQ the font style sheet right after the register functions call the function WP NQ style and pass in the handle name J you Google fonts.
Let’s do this for all the style sheets.
All right we’re almost done. I promise.
There’s only one last thing we need to do in order for all this to work. If we go back to the index template you’ll notice we haven’t told WordPress where to load our style sheets. Our template is pure HCM out. WordPress doesn’t magically scan our files and insert everything in the appropriate place. We have to tell WordPress where to load our files. So let’s do that. Go to the head section of the template. We are going to replace the style sheets and call the function WP head the WP head function is a function defined by WordPress. This function simply tells WordPress that this is the spot where themes and plugins can. In queue their style sheet and script files. Let’s refresh the page and we should see it working. If you see something similar to what I see then you’re good to go. Let’s double check some things and open the console. You’ll notice we get a lot of errors but we’ll fix these soon. What I want you to look for is any forum for errors related to style sheets. If you don’t see any then that means you loaded everything correctly. We can now begin adding scripts adding a script file is almost the same as adding a style sheet. However unlike style sheets we can load scripts files in the footer If we take a look at the template we have all our scripts being loaded into the footer. Just like adding files inside the head tag. We also have to call a function from the footer to instruct WordPress where to load files in the footer. At the very bottom of the template right before the closing body tag call the WP footer function this function allows our theme and other plugins to load their files into the footer. All right now that we have that setup let’s go to the NQ function and start adding our scripts just like style sheets.
We have to register our scripts in the resource section of this lecture. I provide a link to the WP registry script function. Let’s take a look at what WordPress has to say about this function. As you can see only the first two parameters are required and they’re basically similar to the WP register style function back inside the index template. We include a script called plugins. Let’s add this script to the footer through the NQ function. Let’s call the WP register script function and pass a handle handling the handler name will be j you plugins. I don’t have to worry about name conflicts here because style sheets and scripts are stored separately.The second parameter is the source. It’s the same as last time. You just use the you arrive variable and append the path the path would be slash assets slash J.S. slash plugins Doc J.S.
now in most cases you always want to load your scripts in the footer to allow our content to be loaded before our scripts. So how do we make our scripts load in the footer. Let’s go back to the documentation and look at the WP. Read your script function again. You’ll notice that the fifth parameter determines whether or not a script is loaded in the footer. By default it doesn’t. We have to pass in a true boolean value so that we can load the script inside the footer. Let’s go back to the function and start using this. The third parameter is this scripts dependencies. In some cases your scripts will depend on the functionality of another script. You have to pass in an array of handle needs for wordpress to make sure those scripts are loaded first before this one. In our case we don’t have to worry about dependencies so we’ll just passing an empty array. The fourth parameter is the version of the script. If you update your script frequently this can be a useful parameter to set. This is because a lot of WordPress sites have cache enabled by updating the version you’ll force WordPress to load the latest version of this script. I’m going to set this to false as I don’t really need to worry about versioning for this script. The whole point of this part of the lecture is to load the script into the footer which is the fifth and final parameter. All you have to do is pass in true. That’s it. Let’s include the plugins file using the WP and Qs script function and see if it loads on the page you’ll notice that WordPress also loads its top. Now bar for users who are logged in after confirming them it loads. Why don’t you pause the video and load the rest of the scripts. Be sure to remove these script tags after you include them. All right. So I basically just registered and in queue. The rest of our scripts you’ll notice that I also remove their inclusions from the footer. If I refresh the page you’ll see tha everything is loaded correctly except for one thing. J query. We also get a couple of errors inside the console saying that J query isn’t loaded or defined in the NQ file. I didn’t bother registering or even queuing it but why. Let’s go back to the WordPress documentation and take a look at the WP. Register a script function on the contents sidebar. I want you to click core registered scripts. You’ll be taken to a part of the page that tells you that WordPress registers a number of scripts that are commonly used by developers WordPress automatically registers a large number of scripts libraries like J query UI and underscore. If we scroll down long enough you’ll find J query so all we have to do is in queue this script before and cueing anything else. Let’s do this now.
Refresh the page and if you did everything right then you should see that any errors related to J. Query are now gone. Now before I end this lecture I want to say one very important thing. Never ever override WordPress as default scripts including J query. There are some developers out there that liked to include their own version of J query which makes it great and all but it’s really not a good idea. You aren’t the only developer using J. Query If developers constantly use their own versions of scripts then this could break a client’s site and can cause hours of debugging. It’s so much better to just use a J query version that’s consistent throughout the site inside the HP email template. We use a different version of J query but that’s only for the H email template and not meant to be usedfor the wordpress theme at all. So please don’t try and override WordPress as J. Query.
