FREELessons: 12Length: 1.3 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 The Customizer Interface

In this lesson, I’ll demonstrate the Customizer interface. I’ll give you a preview of the controls that will be created during the course.

Related Links

2.1 The Customizer Interface

Hello and welcome back to this Tuts + course on writing customizer ready WordPress themes. In this part of the course, I'll give you a quick overview of how the customizer works and how the specific controls and sections that we'll be adding to the customizer will look when we're finished. So they're two ways to access the customizer. Once you've looked into the site from the front end, you can simply click on Customize here, or alternatively, from the admin screens, you can go to Appearance > Customize. So that takes us to the Customizer. Now, when you first open the Customizer, when you start on this course, and before you've added the code that we'll be creating as we go along, you'll find that there are a few default sections that WordPress adds for you. And these are the first four sections you can see here. Site Identity, Menus, Widgets and Static Front Page. Now, those duplicate some of the functionality that you might be used to on other admin screens. Such as in the appearance section or the settings sections. So the site identity here is where you can edit thee title and a description of the site on the tagline. You can also add a site icon that is used here in the browser or if somebody saves your site to the home screen on their phone there will be an app icon for it, as well. So if I was to edit this tagline [BLANK AUDIO] you can see that that will be reflected in the screen here. Now, this just gives us a preview of what's gonna happen if I change anything via the customizer. Nothing actually changes on the live site, and that's one of the great things about the customizer. You can use it to make changes, test them out, see how they look, and then you can undo them if you want to. Now, if I wanted to save what I've done and publish it to my site, I'd simply click the Save & Publish button. But I'm not gonna do that, I'll just delete what I've just done and go back. So the next default item is Menus. There are a few menus here, these have been imported by the theme test unit data that I've populated this site with, and I can assign each of these menus to the primary navigation slot. So here we've got all pages, and that's assigned primary here. So if I wanted to, I could add new items to my menu from here and then test out and see how it looks. The next item is Widgets. So I can add widgets to any of my widget areas right from here and see how they look. And then, I've got the settings for a static front page. At the moment my site is set up to display latest posts on the front page, but I could easily change that by selecting a static page here, and then Front Page and Blog for my front page and my posts page. So if I then click on this Blog link, you'll be able to see exactly what it looks like. So that's my front page. And if I click on the link to the home page, it'll take us to that front page now. I'm just gonna revert back to the latest posts, and then go back. Now, we're moving on to the sections we'll be creating during the course. So the first section we'll create will be for contact details. And that will include three text fields. And you can see that these text fields are output up here in the header. So the customizer lets you add text fields whose values are saved in the WP Options table, and you can then use the get mod function to output the values in those fields any way you want to in your theme. The next section we'll add in this course is for images. And this lets the user upload a logo which you can then place anywhere in your site. And you can see here, we've got it in the header. So if you wanted to upload an image, you'd simply click on Change Image or upload in the first place and you can select something from the media library, or you can upload a file from your computer. So that's how an image control works. We've also got radio buttons, which is another type of control we'll be setting up, and that gives the user the option to choose one of them. You could also create drop down lists if you wanted to. So going back to the main Customizer screen, the final section we're gonna create will be for the Color Scheme. And this lets you use the color picker, which is created using a class in WordPress as part of the theme customization API. So you access that class, and you create your own color pickers, with default colors as needed. In this course you'll then use CSS to output styling in the head of your page, the style's particular elements with both colors. So those are some of the most common sections and controls that you use with the themed customizer. In the next part of the course, we'll have a look at the theme customization API. I'll show you the classes, the functions, and the hooks that we'll be using as we work through the course. See ya next time, and thanks for watching.

Back to the top