FREELessons: 12Length: 1.3 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.1 Adding Color Controls

Users will want to choose custom colors for their theme so that it matches their business’s branding. In this lesson, I’ll show you how to create color picker controls for editing the color scheme.

Related Links

5.1 Adding Color Controls

Hello and welcome back to this tuts+ course on writing customizer ready WordPress themes. In this part of the course we're gonna move on to colors, which will let our users create a color scheme using the customizer. So we'll create some color controls using the color picker. So let's back focus to our customizer file and set ourselves. Here you can see of add some common about text inside tutsplus customize register function. And here I'll need to add a section, some settings, and some controls. First, the section So I use the out section function with the first parameter BBID of the section which will be tutsplus colors. Making sure I tag that correctly. And then the next parameter is an array of values. This only includes one value, which is the title of the section. Which will be color scheme. So that's my section created. Now as you'll remember, nothing will show up in the customizer until I've actually added some settings and controls to that section. So I'm gonna add four settings and controls for four elements of the color scheme. There'll be the main color, the secondary color, and then two colors for links. So let's start with the main color. So I'm adding comments as I go, so I know exactly which elements I'm gonna be styling using this particular color. The first thing I do here is create a variable with an array of values, and I'll call that variable text colors. And I'll be adding values to this array as I go along. So within my array I need a few items. First is the slug, which I'll give the idea of tutsplus_color1. Which is a unique ID for that particular color. Then I want a default value for this particular text color. And I'll take that from my existing theme styling. And then finally I need a label for the color. Which will be main color. So this array of values for my main color has been added to my text colors variable. And then I'll repeat the same thing for the other colors. So I'll copy that, paste it in for my secondary color and then edit that. So again, I'm adding a comment, so I know exactly what I'm gonna be styling using this secondary color. So I need a different slug for this because this will be the unique ID, which is tutsplus_color2. The default will be a different color. And then the label will be secondary color. So now I'll copy that again to create my third color, which will be for links, but not active or visited. So I'm giving that a new slug, which is tutsplus_link_color. A new default value. Which again is taken from my theme styling. And then again the label will need changing, so that will be links color. So I'll copy that again to create my fourth text color. And this'll be links when they're hovered on. I'll give that a slug of tutsplus_links_color2 and I'm gonna change the first one to be links_color1. Then I'll copy my color from the style sheet, paste that in there as the default. And change the label. So those are my variables which will be used for the controls and the settings. So now I need to add settings and controls for each of those four colors. So instead of having to repeat this code four times, I can use for each loop and then use the values from my text colors array to populate that loop each time. So now WordPress will repeat the codes in here for each of those text colors as it works through them. So let's start with the settings. I'll use the same add_setting function as I've been using previously, but I'll use the values in my array to populate the parameters. So the first parameter is the settings ID, which is the slug that I've already defined. And then the second parameter is an array of values. So my default value is the default that's already been defined in my array. The type would be an option which is one of the types available to you. And then I'll need to add the control. So I will use the add control function that I have already been using. And here I want to use the WP_Customized_Color_Control class that's already defined by WordPress. So here I add new WP_Customize_Color_Control. And then that class itself has some parameters that I'll need to add. So the first parameter is the object which is WP_Customize. Then I want the unique ID for this control which is the slug of that text color variable or the value in my array. And then, I need to add an array of values, similar to the controls that we've already created. So the first value in my array will be the label. The next value will be the section that this controller's in. And I'll copy that from the section that I've already defined up here, which is my tutsplus_colors section. And then finally, the settings. Again I've defined that in my textcolor array. I'll tidy up my code, check that all my brackets are in place, that all looks fine. Save my customizer and go back to my site. So if I click on color scheme in the customizer, you'll see that I now have these four colors and I can click on each of those to access the color picker. So that's my colors controls added. Now the next step is to add those into the theme based on what people select, which is what we'll be doing that in the next part of the course. See you next time, and thanks for watching.

Back to the top