FREELessons: 12Length: 1.3 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 Add Text Controls

In this lesson, you’ll learn how to create a control that lets users add text to their site.

Related Links

3.1 Add Text Controls

Hello and welcome back to this Tuts Plus course on writing customizer ready WordPress themes. In this part of the course, we'll add a section to the customizer for text and that will include contact details which will allow the user to edit and which will then appear in the top right side of the header, here. And to do that, firstly we'll add a section which will appear as another item in this list here. And then, we'll add the specific controls that the user will be able to interact with when they click on that section. If you want to learn more about how to do this, check out the Codex page on the customization API. In here, there's information on adding a new section and adding a new control. We'll do all this as we work through this part of the course. So, let's go back to our file. Here we still need to work within the function that we already created in the last part of the course. And you can see here, I've added some commented out text so I know what I'm adding here. The first thing I need to do is add the section. So, here I'm using the app section function which interacts with the WP customize object, and that has two parameters. The first is the idea of this section, which I'm gonna call tuts plus contact, to ensure that it's unique and the second is an array of arguments for that section. So we just one argument here, and that's the title. And note the time internationalizing in my text here. Now if I go back to the customizer in my site, that section won't actually appear yet. And that's because it doesn't have any settings in it. If you create a section in the customizer, but don't add any settings to it, WordPress won't display it. So let's add the first setting. Once again, I'm interacting with WB customize object and now I'm using the add control function. And here, I'm gonna use the class that I created earlier. This tutsplus customized text area control class to define how my control will work. And that saves me from echoing out this content, every time I add a new text control. So that's my tutsplus customized text area control plus which will define how my text area looks and each give these few parameters. So first I have the wp_customize object as the first parameter and then I need an ID. And then an array of arguments. The first argument is the label. The next argument is the section within which this control will be which is my contact section. Making sure I spell that correctly, otherwise it won't work. And then finally my settings. I'll tidy up my code by adding a final set of closing brackets and just check that that's all working okay. And then I'll save my setting and take a look at the site. [SOUND] Now, that's no good. I get the white screen of death, when I go back to my site, so something's obviously wrong. Let's go back to my code. So I've added a control, here. I know what it is. I've missed out a really important step. And that is, I haven't added the actual setting that the control is for. So let's do that. And you need to do this before adding the control. This uses the app setting function. The reason I have an error was because I was using this tutsplus address setting value here against settings for my control. And WordPress couldn't find a setting with that name. So that is the first parameter. Of the app setting function. So my setting has the ID of tutsplus address setting, and then it has an array of arguments. And that array only includes one argument, which is the default. And I'm having your address as the default because then that will show up in the site, reminding users that they need to add that via the customizer. So, now I have my setting on my control in place. Let's save that again and check the site. Much better. Now my contact details section is in place and if I click on this, I've got an address field with a default value of your address. And I can type in a new value to override that. Now at the moment, that's not actually showing up anywhere in the theme. I want it to show in the header on the right hand side here, but I'll fix that in the next part of the course. But before I do that, I'm gonna add some other concept details as well. I'm gonna add a telephone number and an email address. So to do that, instead of typing all of this code manually again, I'll copy the setting I've already created and edit it for each of the other settings. So firstly, the phone number. I'll edit where it says tutsplus address setting to make sure it says telephone. I'll edit the default value. And the label here. Making sure I don't include any typos. So, that's the phone number added. Now I'll do the same again for the email address. So, I'll save that with those three settings there and check the site again. When I go back to the contact details section, here you can see my three controls are in place. So about to tell you what text fills to the customizer. Now, the next step is to make whatever my users type in here output onto the side which is what we'll do in the next part of the course. See you next time and thanks for watching.

Back to the top