7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 11Length: 1.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Theme Initialization Functions

We’ll now create the functions needed in the theme to enqueue styles and scripts, remove a gap from the top of our front-end display, and add support for some important features.

2.2 Theme Initialization Functions

Hey, welcome back to building Gutenberg template layouts without JavaScript. In this lesson, we're going to go through and get the initialization functions in place in the functions.php file, so you need to load up a few style sheets and scripts and enable support for a couple of different features. So the first thing we're gonna need to do is add our PHP tags to our file. We're gonna start by creating a function to load up our styles and scripts, so we're gonna call it, function styles_and_scripts. And then in here, we need to enqueue two styles, we need to enqueue our main style sheet and we need to enqueue The Google fonts that we wanna use. To do that we're gonna use WordPress' inbuilt function wp enqueue style, wp_enqueue_style and by the way, I have installed the WordPress snipit plugin into vscodium. So if you want to have these order completed primitives filled in for you and bit of prompting on the exact function names to using in WordPress then this plugin can really help. All right so for a Handle, for the news landing page, we're just gonna call this Landingpage_style, the source, which is the address of the style sheet, we can get by using the function, get_stylesheet uri. And we actually don't need to provide any non default options for these last three parameters, so we're just gonna delete all of those. And then we're gonna end this line, you'll see there are some more of things you need to add to that function but, let's just check what we've already done first, the way to trigger this function is by adding an action so we're gonna say add action, and then we're gonna pass wp_enqueue_scripts. That tells WordPress that we wanna file this function off when it's going through an enqueuing all of the scripts and styles into the front end, and then we let it know the function we want it to run at this time is our styles and scripts function. So we just put that in as a string, and now that's ready to go. So now if we refresh our front end now we can see that we've got our style sheet is being loaded in cos that's applied to that html that we put in in the last lesson, so now we know that that function is working let's add a couple more things to it. We also need to load up the Google fonts that we need so we're gonna use that same wp_enqueue style again so let's just copy and paste to make that a bit quicker. Let's give it a handle lp shuffle loading page Google fonts, and we can get the URL of the star sheet that we need to load to bring in our custom fonts from the index.html file, of our figment HTML template. This is the URL that we need right here, and then, we're just gonna add in as a second parameter, as a string. Now, we checked out from then again, we'll refresh, open up the inspector, look inside the head and if we scroll through here, there we go. There, is, a Google Fonts being loaded in, with the handle that we specified, and you can see at the moment, that there is a big empty gap, along the top here, and we don't want to have a gap there. The reason there is a gap there, it's making a space for the, admin tool bar to appear along the top there, we're gonna get rid of that. So we'll add another function, and we're gonna name it remove_admin_login_header. And to make that header go away we're gonna use the function remove_action, and then we're going to pass two parameters, wp_head ,and the second one is _admin_bar_bump_cb. Now let's trigger this function by saying add action, in this case our two permanents are gonna be get_header, and then we'll run this function and don't forget to end your lines. So this is gonna do is, that WordPress know that when this first loading up the site not to run the function that adds in the space for that admin tool bar along the tab. So now, we refresh no more gap and that's all good to go, now, we just have one more function to add, I'm just gonna remove that space actually so that our layer is consistent. We need to let WordPress know that we want to activate a couple of the features that it offers, so we're gonna make another function and I'm gonna call it set up the theme. Function setup_the_theme, and the first thing that we're gonna add is support for generation of the title tag, so earlier on when we created a header, we didn't specify our own title tag in here, we said we wanted WordPress to do it for us. We just need to let WordPress know that we do want it to generate our title tags, which we do, by saying add_theme_support, and we're gonna turn on the feature, title-tag, and we want another add_theme_support line. And this time, we're gonna tell it that we want to use our own editor styles so that we can control how our custom post that we're gonna create looks in the back end. So we gonna add in editor styles, and because we've done that, we need to tell it what the name of the editor style sheet is, so we're gonna say add editor style. And we're gonna be using our style-editor CSS file that we created before, so just add that name in. So now that is already and now we just trigger this function with an action like we did with the others, so we're gonna say add action, and we're gonna say this one off after the setup of the theme, so after_setup_theme, and then we pass the name or that function, which is setup_the_theme. So let's check that that's working, right now, if we look in the top of our tab here, instead of that there's no functional on title tag, but if we refresh, that's the WordPress, just go to the WordPress site and that tell us that WordPress is now filing in that title tag for us. Meaning that our whole setup theme function is running as we expect it to, so that's all the theme initialization that we needed to do, we have one more step in a Theme Basics section of this course and that is, to do the full steps of creating our custom post type, we're gonna create a custom post type with just some basic settings provided. And then we're gonna add a query into our index.php file to fetch basic content from that custom post type, so we're gonna do that in our next lesson. I'll see you there.

Back to the top