Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:19Length:2.2 hours
  • Overview
  • Transcript

4.1 Better Custom Font Loading With wp_enqueue_style()

Hey, this is Kezz. Welcome back to Web Processing Creation with Underscores. In this lesson you're going to learn how to load your custom font CSS files in in a better way and you might actually call this the correct way to load in any custom CSS file into a WordPress theme. Instead of a CSS import, we're going to be using WordPress's WP enqueue style function. This allows a couple of important things to happen. One, it will load the CSS files in properly in the header with a link element instead of a CSS import, which is faster by default. And two, because it's being loaded now through the WordPressing queuing system, it means that people who are using plugins that will combine and minify CSS will be able to grab the CSS that you're loading in your theme and bundle it up with any other CSS that they have coming in from other plugins and what have you, and they'll be able to crunch all of that in together in the most efficient form for their site. But to get all this going, we're gonna have to just put together a couple of small PHP functions, and just like when we're working with our SASS files, we wanna make sure that we do all our customizations in a way that we can easily track later so that when upgrades come out, we don't have to wonder about what we'll need to do to replicate our changes into the updated files of the base theme. We're going to start that by creating a file just to hold our own custom functions. We are going to create that in the root folder of our theme and we are going to name it custom_functions.php. Into that new file, we're going to add this code. Now what we have here is a custom function and we've named it Enqueue Styles Scripts. And that's because we're also going to be setting up some scripts in here later that we'll be learning. But for now let's just focus on the styles that we're learning. Now we're using WordPress' WP Enqueue style function and there are two pieces of information that you need to send through this function. First, you need to give your style sheet that you're loading in a unique name. So, in this case, we've gone with G fonts for Google fonts. And then, secondly, you need to provide the address of the location of that style sheet. And we've just taken the same URLs that we were loading in via CSS import, and we've put them inside this function. And we've done the same thing with our Font Awesome. We've put Font Awesome as the name of the style sheet, and then we've used that same URL that we were using in a CSS import earlier. And once we have our function in place, then the next thing we need to do is we have to have something set that function off. And that's where we're using WordPress' Add Action function. And this line here. Now WordPress has a system of hooks and actions that let you set off particular functions at various points in WordPress' process running. Now, in this case, when WordPress fires of it's WP enqueue script, then we say at that time we want it to also run our enqueue style script function. So basically, WordPress reaches a certain point in its loading process, and it sort of shouts out to all of the themes and plug ins and says hey, if anyone's got any scripts they want to load, now's the time. And that's what we're hooking into. We're in return saying, yes. We've got some things we'd like to do. And then we're just saying, will you please load up this style for our Google fonts? And can you also please load up this Font Awesome style sheet? Now that we've written our custom function, the next thing we have to do is actually attach it to our theme somehow. Right now it's just kinda sitting there by itself and WordPress doesn't know that we have code here that we want it to execute. And what we're gonna do is we're going to open up the themes functions.php file and we're gonna include our custom functions file into it. Like with everything else, though, we want to make sure we're keeping track of which files we've modified. So, to start with, make a duplicate of the original functions file. And then rename that duplicate to functions-original. And then just put an underscore at the start of that file name. And the reason we're putting an underscore there is that when you then sort all of your theme files alphabetically, those underscored files will just jump right to the top. And you'll be able to instantly see which files you have changed in this root folder. And also, if you need to, you'll be able to open up that file and just copy its contents into the file that you've been modifying. So you'd be able to roll back easily, at any time. Okay, now, open up your functions.php file for editing. Scroll all the way to the bottom. And add this code. Now this line at the very bottom that we've just added is going to load in our custom function's php file. And that will run everything that we just created. So we're using require which is just basically a way of saying include this file. We're using WordPress' get template directory function which allows it to accurately find the location of your theme folder regardless of what type of setup the user has. And then we're just adding our file name onto the end of all of that. Because we're now going to be loading in our custom font files using the WP enqueue styles function, we can get rid of our CSS imports. So in your custom vars mix-ins file, comment out the lines where you were using the CSS import for those files. And now even though we've gotten rid of those CSS imports, you can still see that after we save and compile, we have all of our custom fonts just as they should be. And if we inspect our code, now we see we have a link element pulling in our Google font, and we have another link element pulling in our font awesome. In the next lesson you are going to learn how to add a fully touch friendly responsive menu into your theme and this means that if you have someone who is on a larger screen but still doesn't have the access to the hover interactions, they're still going to be able to access all levels of your menu. I'll see you there.

Back to the top