Extend the WordPress Theme Customizer with Color Schemes

In today’s tutorial, I would like to show you a useful theme extension to add various color themes to the WordPress Customizer and analyze them accordingly in the frontend.

This implementation is already used in our Hamburg Theme to give the user three different color themes right from the beginning (Demo). Plus, a new theme can be added easily and quickly in a child theme with the right filter.
For the complete Customizer we need the following four components:

  • Own Customizer class
  • Registration of the Customizer
  • Providing the color theme
  • Output of color theme in the frontend

Define own Customizer class

Color themes Blue, Yellow and Burly Wood in the Customizer
Color themes Blue, Yellow and Burly Wood in the Customizer

With Customizer API, WordPress has provided an extensive interface to customize the theme on the fly as early as in version 3.4. Today we want to use this API and extend it accordingly.

Since we don’t want to work with normal select fields and checkboxes for our color theme, but emphasize the different themes visually, we start by creating our own Customizer class. This class inherits the base class. WP_Customize_Control:

Within our constructor, we have to open the constructor inherited from the WP_Customize_Control and set the relevant arguments.

The render_content() method is where it gets interesting. Here, we overwrite the existing method from the base class to manipulate the display accordingly. By default, only input text, checkbox, radio select fields and dropdown pages are supported, but for our method, we want to generate special highlighted radio buttons in each color theme.

Registration of the Customizer

To be able to use the Customizer, we have to register it. For this, WordPress has provided the hook customize_register.

Our callback gets an instance of the WP_Customize_Manager class. With this instance, we are able to define our own sections and control elements.

At first, we register a new section with the method add_section() in the Customizer panel, since we want to have a separate point.
With the add_setting() method, we can register a new setting. The $key will be important later for loading and displaying the saved settings. The “transport” is set to “refresh” by default, i.e: “When I change a value here, show the change on the fly”. The “type” is set to “theme_mod” by default. Alternatively, we can choose “option” to create an own option. However, since we want to access our new feature via get_theme_mod() later, we leave that as it is.

Tip: In the add_setting() method you can define your own “type” and set a memory routine for it later when saving it with a filter on customize_update_{type}.

Finally, we register our new class with the nice control elements using the add_control() method.

Providing the color scheme

To provide different color schemes in the Customizer, we need the following auxiliary function in several places:

This function also contains a return filter for registering own themes. The following 3 values in the theme array are important for correct display:

  • Background
  • Foreground
  • Label

The key is also the theme name and will later be added in a body class.

Sample filter for own theme

A sample filter for registering our own theme “Burly Wood” looks like this:

Output of color scheme in the frontend

After extending the Customizer and saving the according settings, we have to display them in the frontend and extend our CSS. For this we use the hook body_class in our Hamburg Theme to be able to customize our color scheme accordingly with CSS:

With WP function get_theme_mod() (we left the default value of add_setting() at “type”) we retrieve our saved “color_scheme” (our $key in add_setting()) and add it to the body element as CSS class.

Conclusion

I hope you liked the tutorial and could gain some insights into the Customizer API. The color theme extension has become a much valued standard feature in our Hamburg Theme. In many client projects we were already able to take advantage of various Customizer extensions. Which extensions for Customizer-API do you use?

Post Sharing

Author Avatar

Hi! My name is Chris and I enthusiastically develop the web from back-end to front-end at Inpsyde. When I'm not discussing accessibility, you can find me at Google+. In my spare time I study computer science, do a lot of sports, read one book after the other and blog at www.chrico.info.

Also Interesting

slack-blog

New Plugin: Slack Connector - Connect WordPress, WooCommerce and Slack

by Michael Firnkes

Initially we merely wanted to optimize our own Slack-processes. With automated notifications from our MarkettPress shop, the blog and our forums. The resul ...

Read more
vip

Inpsyde is the first WordPress.com VIP partner in Germany

by Michael Firnkes

Automattic has given us the title of WordPress.com VIP Service Partner, the first in Germany, Austria and Switzerland. Worldwide, there are only eleven com ...

Read more
wooexperts

Inpsyde is a WooExperts Gold Partner of WooCommerce

by Michael Firnkes

A few weeks ago, Inpsyde GmbH with MarketPress became a certified WooExperts Gold Partner. This is confirmation from WooThemes of our agency’s know-h ...

Read more
muenchen-blog-1000

New: WooCommerce Shop Theme München

by Michael Firnkes

A WordPress and WooCommerce theme that not only looks great, but also excels in functionality? Welcome to München. The template is an addition to our WooC ...

Read more

Comments

2 Comments

  1. #1

    very useful.

  2. #2

    Nice Post,
    Thank You For Sharing Your points.
    Useful for newbie.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">