FREELessons: 12Length: 1.3 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Interacting With the Customizer

Hello, and welcome back to this Tuts +course on writing customized and ready WordPress themes. In this part of the course, I'll give you an overview of the theme customization API, which consists of the classes, hooks, and functions that you need to use, in order to add customizer capability to your own themes. So, here you can see the theme customization API, and this documentation on the codex includes full details of all the different aspects of the API that you'll need to use. When you're adding customizer functionality to your theme, the first thing you need to do is create a function that is hooked to the customized register action and that action is fired whenever the customizer is opened within the admin screens. And within that, you need to do a few things. Firstly, you'll create sections, which will be added to the customizer in addition to the default ones. And then, you'll add settings. And those will be individual settings such as some text, a color, or anything else you need. And those will hold the values that you'll use as in portal select via the customizer. So, those are then held in the WP options table. And then finally, in order for people to actually be able to interact with those settings, you'll add controls. And each of those controls will be added within one of the sections that you've created. If you want to, you can simply add a control to an existing section. So, here's the customizer with the sections added that we'll be working on as we work through this course. And, some of these are default sections that already exist. So, there's the Site Identity section, Menus, Widgets, and Static Front Page. Now, those are default sections of the customizer, so if you wanted to, you could add your controls to those sections. But what we'll be doing in this course, is add our own sections, with settings and controls in them. So, that's the same customization API. Let's take a look in a little more detail of the specific elements of it. So firstly, you've got the customized register action. And, this is the action that fires when the customizer is opened. When you create a function that you'll be hooking to this action, such as mytheme_customize_register here, you always have to give it the WP customize object because that object is an instance of the WP customized manager class which controls the theme customizer screen. So, the first thing you'll do when you're creating functions for the customizer is write a function that hooks to the customized register action and then within that function, you'll add all of your sections, your settings, and your controls. So, let's move on to seeing how you add a section. To add a section, you use this add section method, which is a method of WP customize manager class. If you're not used to working with classes and object-oriented PHP, this will look a little unfamiliar to you. But it works in a very similar way to a function if you're used to writing those. So, here you've got a WP customized object and then add section. And it has two parameters, firstly, there's the idea section and then there's a set of arguments, which is an array. And, here are some of the arguments you can have. So, once you've added your sections, you'll then need to move on to adding settings, and here, you work in quite a similar way. Again, within your function that you're hooking to this action, you will be using the add setting method. And again, that has two parameters, the ID of your setting, which will then be saved in the WP options table, and an array of arguments. Then, once you've got your setting in place, you need to add a control, because without a control, your users won't be able to add values to that setting. So, you then move on to using the add control method. Again, that has parameters of an ID and some arguments which are an array. Now, when you are creating controls, you can use classes that have already been defined for you in WordPress. So, you see here in this example, which is add control and then as its first parameter, it's got new WP_Customize_Color_Control, so that's accessing the WP customize color control class that creates the color picker control for you. And, we'll be using the Color_Control class, and we'll also be using the Image_Control class to allow people to upload images. There's also the WP_Customize_Control which lets people enter text. We'll be creating our own class that extends that class and adds a few more options to it. And, here you can see some example functions in the codecs of how you have different types of control. So, that's how you add sections, settings, and controls to the customizer. Once you've done that, you'll need to output the settings in your theme and to do that, you use the get_theme_mod function which we'll be doing as we work through this course. So we'll use that to identify the value that someone has given a setting via control and then use that either to output some content in our theme, such as some text or an image, or alternatively in a function in our customizer, to add some styling. And we'll also be using the WP head hook we're we'll be hooking some CSS. And, we'll work through all this as we go through the course and you'll get to use all of these different aspects of the Theme Customizer API. Finally, if you want a bit more information, here's a Tuts+ Guide, on the WordPress Theme Customizer and how it works. And next part of the course, we'll start setting up the Customizer. We'll create the function that will contain all of our sections, settings, and controls and we'll set up an interface for text areas, which we'll then use in a later part of the course. See you next time and thanks for watching.

Back to the top