FREELessons: 12Length: 1.3 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.2 Displaying Colors in the Theme

In this lesson, we’ll make use of the color selections made in the Customizer by creating variables to store these color choices. Then it will be easy to render theme elements with those colors for display.

Related Links

5.2 Displaying Colors in the Theme

Hello, and welcome back to this Tuts+ course on writing customizer-ready WordPress themes. In this part of the course, we'll continue working with the color scheme. We've already created settings and controls for colors, but what we need to do now is implement those in the theme and we'll create a function in our customizer file that will do that. So let's move on over to the customiser file. So at the bottom of my file, I've already added some commented out text to let me know what's happening here, and I'll create a function. So that's my function which we'll need to attach the WP head hook as it'll add styles to head section section of each page on my site. Now I know that this isn't ideal in terms of CSS but because I'm using variables for my colors this is the only way I can add styling to the customizer, because I can't carry those variables through to my style sheet. So there is my function hooked to the wp_head action. Now let's populate that function. First, I'll start by defining the colors. So I'm gonna create a variable, for each of my color settings. And I'll use the get_option function to fetch the value of that particular setting that's being defined by the user selecting a color using the color picker. So the first one of these is my main color. And I'll go up here to check what that's been called. So the ID for this setting is the slug that I defined in this array which is tutsplus_color1. So I'll copy that, And paste it down into my function. And then I'll repeat this for the other colors. That's color two. And then the third color is my link color which is my tutsplus_links_color1. And in line with that, I'll change my variable here to link_color1, and then my link_color2. Variable. I'll use get_option again. And it slinks color2 that I want. Making sure I've got everything typed in correctly. So that's defining four variables for me which I'll then use in my CSS. So now I need to add the classes. It's a good idea when you're working with the customizer to keep adding comments because there's so much in this include file that when I come back to it in the future and I want to add more functionality to it, I wanna be able to quickly find what's where. So now I'm adding markup so I need to close the PHP and then making sure I re-open it down here. So, I need to add a style tag and then a closing style tag. And then within my style tag, I'll add my styling. So the main color, if you'll remember, is for the side title for headings one and two, and for my main menu. The exact classes and elements you need to refer to here will vary if you're using your own theme, but in my theme this is what works. So those will then have a color which is this option here, color scheme one. So now I'll add my secondary color Now in my theme, there are borders here which I want to style using the color that's defined by the color scheme. And I'm also using it for the border of my footer. And I'm going to copy that. And use it as the border bottom. So that's my secondary color. The next one is my links color. So the color of my links and my visited links will be link_color1, and then the color of my hover and active links will be link_color2. So that's my styling added. If I save that and go back to the customizer of my site, we'll be able to test it. So here's the color scheme in the customizer and if I select one of my colors I can change it. And you can see that my main color is changing here for my heading one. If I wanted to, I could also change the body text. But I've chosen not to do that in my theme cuz it's good to have the body text as a darkish gray. Secondary color, let's make that some sort of green. You can see that's appearing here. And also, if I scroll right down in my footer in the border. My links color at the moment that's a shade of blue. I'll change that to purple and scroll up and you can see that. Now, I'm not saying this is a particularly pretty color scheme but you can see how it's working. And then, I'm hover my links if I change that and then hover over a link. You can see how that changes. So let's just change that color to get rid of that purple, make things a little bit more coordinated. So now if I save and publish that and view my site, you can see that my color scheme has been charactered to my site using the customizer. And if I inspect one of these elements, it will show you the styles that are applied. And here you've got a:link, a:visited, the color is here, and that's been carried through from the head. So here's my style in the head of the site. Again not ideal, but because I'm using variables, that's the only way to do this in the customizer. In the next part of this course, we"ll sum up what's been covered and give you some resources you can use to learn more about the customizer. See ya next time and thanks for watching.

Back to the top