Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:11Length:1.3 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 Creating a File for Customizer Code and Setting Up Sections

Hello, and welcome back to this Tuts+ course on the WordPress Customizer. In this part of the course, we're going to set up the Customizer. Or rather, we're going to set up our code and our sections for the Customizer, so we can then add some settings and controls to them. So I'm gonna create an include file in my theme. And the theme I'm using here is a theme that I developed for an earlier tutorial on theme development in WordPress. So here are my theme files, and I'm gonna add a new file to this includes folder. And I'm gonna call it customizer.php. And before I start editing that, I'm going to call it from the functions file. I've added some commented out text here for where I'm gonna do it. And then I use the include function. So here I've got STYLESHEETPATH which takes me to the style sheet directory for my theme, which I've deliberately used style sheet instead of template just in case this is a child theme. This isn't a child theme, but you might be using one. And if you wanted to use an include file in a third party theme, you would have to create a child theme in order to do that. Alternatively, you could write all this as a plugin. I'm deliberately doing it in my theme, because later on, I'm gonna be editing the style sheet in my theme. And that will fit with what I'm doing with the Customizer. Most of this is about display and design, so it does have a place in the theme rather than in a plugin. It's not about functionality. So this will include that file. I'll save my functions file and close it, and then I'll go into my customizer file, and I'll start editing it. So I've added some commented out text at the top, just so I know what this is. Correct a typo there, and then I'm gonna add a little bit more commented out text above my first function. So the first thing I'm gonna do is add my sections. And this will set up my Customizer code, so that I have somewhere to put the controls that I'll later add and the controls, or the items on the screen, on the Customizer, that the user interacts with in order to make customizations and tweaks. Making sure I type wp_customize correctly because that's the object that this uses. And I attach this to a very specific hook called the customized register hook. So that's my function. And most of the functions that I'll be creating in this customizer file will be hooked to this customized register hook. And they'll also use the wp_customize object. So first, I'm gonna add a section, correct that. First, I'm gonna add a section for the header design. And this will include a banner image with a radio button for where it's gonna be positioned. So this has two parameters. The first is the idea of this section, and then the second is an array of arguments. And I'm only using one, which is the title. So that's my first one. So that will add a section called Site Header. I'm then gonna repeat that for two more sections. So those are my three sections set up. Now if I go into the Customizer right now, those sections won't be visible. And the very first time I use the Customizer like this, I panicked a little bit at that stage. I thought there was something wrong with my code. Because I'd already coded in my sections, and they were done correctly. They were done according to the codex and all the guidance that I'd seen, and yet they weren't showing up. If that happens to you, don't panic. The Customizer will only display a section that has controls within it. Because it doesn't want to take the user of your theme to an empty section cuz that could be confusing for them. Let me just edit my commented out text. So now if I go back into my site, and I select Customize, there's an error here. Customizer.php, let's take a look at that. Now there's something wrong with the way I've coded that in the functions file. Let's take a look. Yes, it's purely that I've got my syntax wrong here. So my opening inverted commas should be there, because this is PHP and this is HTML. So let's go back and refresh, and the error is gone. But you'll see that these sections aren't visible. Now that is perfectly fine. The sections don't need to be visible right now. So you can rest assured you haven't done anything wrong if you followed the code up to now. The sections will start to appear in the next parts of the course when we start adding settings to them. So that's how you set up your customizer file, and you include it in your theme. And you create those sections for your Customizer settings and controls. In the next part of the course, we're gonna start setting up some of those settings and controls. And we'll start by the header. And we'll add a setting for uploading an image and a setting for defining where it's going to be. See you next time, and thanks for watching.

Back to the top