FREELessons: 12Length: 1.3 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Register Your Customizer Function

In this lesson, I’ll show you how to set up Customizer support in your theme. You’ll learn how to interact with the WP_Customize_Control class to register your own controls.

Related Links

2.3 Register Your Customizer Function

Hello, and welcome back to this Tuts+ course on writing customizer-ready WordPress themes. In this part of the course, we're gonna start setting up the customizer for our theme. We'll register our customizer functions, and we'll also define some generic controls that'll be used for text areas. The first thing we need to do is create an include file, which will include all the code for our customizer. So I've created this file called customizer.php which is in the includes directory in the theme. And at the top, I've added some comments just to remind myself exactly what that file is. Now at the moment, anything I add to this file won't actually be used by my theme because I haven't called the include from anywhere. So, the next thing I need to do is make sure I'm calling this file from my functions file. So in my functions file I'll add a line to do that. So that calls my new file. Now I just need to save my functions file, I'll close it and I'll go back to my customizer file. The first function I'm gonna write will enable me to define all of my settings and controls in the customizer. And this will hook to the customize_register action, which you can see here in the codex page on the theme customizer. I'll be adding to this function as we work through the course to add new controls for colors, text areas, and so forth. So let's write that function. First I'm gonna add some comments so I know exactly what it's doing And now I'll open up the function. And this function must have wp_customize as its object. The function needs to be attached to the customized register hook. So I'll add that now. I'll copy the name of my function in here. And that will now be hook, but obviously there's nothing in there at the moment. Now in later parts of this course, we'll start adding some controls for text areas, for logo uploads and for colors. But before I do that, I'm gonna define some generic controls for text areas. I'm adding plenty of comments as I go along so that you can see exactly what's happening when you go through the source code yourself. Making sure I avoid any typos. So my class Tutsplus_Customize_Textarea_Control extends the built in WordPress class to WP_Customize_Control, and we'll add additional text area controls using the functionality provided by that class. So the type of control is a textarea. And now I need to create a function to render the content of that textarea. Now I need to output some content inside that textarea control. So that will output a span with a class of customized control title, and as that title, will be the label for this particular control. And I'll be defining those labels for each control as we work through the course and add more controls to our file. And now I'm going to add a text area. I'll give it two rows, Style it to be 100% width. And then I need to output the link for this particular control that the text area I'll be working with because that will enable the customizer to work. And then back to finishing off my textarea element. And within the element, I'll display the value of the particular setting that we're working with. And then close the textarea element. Now I need to close my label element, And then just check my code on here. There's a typo, correct that. And that's my textarea setup. So that defines what will be output through each of my text areas. And I only need to do this once because then what I can do is I can access this Tutsplus_Customize_Textarea_Control class that I've created when I'm setting up individual text areas later on in the course. So let's save what I've done and take a look at the site. Here's the customizer, but it doesn't show anything yet because we need to add some sections and some controls and settings, which we'll do in the next part of the course. So next, we'll add a section for some text fields which will display the contact details in the header of the site. See you next time, and thanks for watching!

Back to the top