FREELessons: 12Length: 1.3 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

6.1 Conclusion

We’ve covered a lot of ground in this course, and we’ve added some great customizer functionality to our theme. I hope these techniques will prove useful for your future themes!

Related Links

6.1 Conclusion

Hello, and welcome back to this Tuts+ course on Writing Customizer-Ready WordPress Themes. In this final part of the course, I'll give a roundup of what's been covered and what you'll have learned and done if you've been following along. And I'll also give you links to some resources you can use to learn more about the Customizer. So, as we were working through this course we worked on a demo site with a theme that had already been provided for you. And I started the demo site by adding the theme unit test data to it. So as you can see here, there's plenty of content for us to see how the Customizer's working. We then worked with an existing theme that was provided for you at the beginning of the course. And I showed you how the theme was structured and how it worked. Once we got to grips with that theme, we started working on the Customizer. The first thing we did was add a customize_register function, which you need in order to create controls and settings for the WordPress Theme Customizer. And we defined some generic controls for text areas to start with. We then moved on to adding some contact details, and this lets users add their email address, phone number, and physical address, which will then appear in the site's heading. And you can see that in the site here and also in the Customizer, and that's added via this Contact Details section of the Customizer here. The next thing we did was let people upload a logo image, as well as defining where they wanted the logo to be positioned. So we added a hook to the header of our file, and then we created a function in our Customizer file which output some HTML and attached it to that hook. And here's our function to display the logo. We output a class based on the logo position option that people had selected, and then used that in our style sheet to style the logo and the text next to it. We then moved on to the color scheme. So we created a section in the Customizer for a color scheme and we added full settings and controls for those. And then to add the styling for that to our theme, we created a function which was attached to the WP head hook. So that's output styling in the head section of each page on our site. And you can see that function here. So now when somebody selects a color, the color scheme in the site changes. So all in all, we created four sections for the Customizer and we used a number of different types of control. In some cases we defined these controls ourselves, and in other cases we used the built-in controls that are provided by the Customizer API. And if you want to learn more about the Theme Customization API, here's the Codex page that will help you do it. And I've also given you the links to the Codex pages on some of the functions that we used as we worked through the course. Finally, this complete guide to the WordPress Theme Customizer on Tuts+ will be useful if you want to read through that and follow those tutorials in detail. Now that you know how to use the Theme Customizer in your themes, you can give people working with your themes, either your clients or any users downloading your themes or buying them from you, the option to make changes to the site without having to write any code. Good luck, and thanks for watching this course.

Back to the top