Customizer Color Options

This tutorial is aimed at developers. My thanks to Rich Tabor for his insightful article entitled How to Add Customizer Colors to Gutenberg Block Color Palettes. After a lot of thought on the matter and countless attempts at finding a solution this article steered me in the right direction.

Very rarely do I include colour options in the Customizer in my own themes. There are a number of reasons for this with the main reason being that with these options a user can destroy all my hard work with regards to website accessibility with just a few clicks. Another big reason why I tend to stay away from these things is the degradation in site speed that comes as a result. Creating child themes with a lot of inline css in the parent theme is also not a lot of fun.

Introduction

On the latest WordPress Free Theme I am currently working on I decided to add colour options but in all honesty I am sorry I made this decision, it is a tremendous amount of work.

It is not only the options themselves that need to be coded, it is also the coding of the associated inline-styling to make things work. Good themes are supposed to maintain editor-styling so that the editor and front-end maintain a similar look and feel. Right now WordPress has two editors. Every time a user makes colour changes the editor styles for both the block editor as well well as the classic editor needs to reflect these changes.

Please allow me to show you what I did to overcome the editor-styling problems. In this little tutorial I am using just two colour options, primary-background and primary-colour.

Customizer.php

To start off I added the two options to the Customizer in the normal way. Before I could do this I re-shuffled the default panels in the Customizer a bit. I did not want the default ‘colours’ panel with its associated background-colour control to show as I wanted the theme’s colour options to appear in the themes own options panel. I added the following to customizer.php:

All this code does is remove the background-colour option. The entire colours panel now disappeared as it only had the one option inside it. Nevertheless I removed the entire colours panel as well.

Still in the same file I added a custom panel and section for use with my theme options:

Now I needed the two controls I required:

Please note that the transport has been set to postMessage. This is required to allow for live preview in the customizer.

One of the ways in which one can preserve the colour selections made by the user is to add inline-styling. I added the following function to do just this:

The actual inline-styling has obviously been simplified here. The last thing that needed to be done in the customizer is to enqueue the preview script. This I did in the standard method:

Customizer.js

To setup live preview the following needed to be added to the script that has just been enqueued:

Functions.php

Classic Editor

Let us now try to keep the classic editor in sync with the color selections made in the customizer. In functions.php I had to add support for the editor-stylesheet for the classic editor: This I did in the normal way in the setup function which is hooked to after_setup_theme.

This only allows me to add styling to the file editor-style.css. What about the colour selections made by the user? For this I needed a small function:

With regards to the classic editor this was all it took, a user can now select any colour in the customizer, the classic editor will show these changes. Any non-colour styling that is required by the classic editor can still be added via editor.style.css.

Block Editor

Now for the block editor. First I added a custom colour palette to the block editor. This I did not do in the normal way, I had to add the customizer selections to this function:

Now I had a colour palette in the editor consisting of the two colour settings I have used. All that needed to be done now was to add the custom colours to both the block editor as well as the front-end. To do this I created a function which can be used to do both tasks:

The last function I needed was a function to enqueue the editor-styling for the block editor.

You will notice that in this function I used the function I created a step back. All that still needs doing is to get the front-end to show all the colour stuff done in the block editor. To do this I simply added a line of code to the place where I already had my stylesheet enqueued.

All non-colour styling can still be added to block-editor-style.css.

Conclusion

That’s it! I now have colour options in the customizer that keep both editors updated. This was quite a bit of code but the job is not completely finished. In all this I basically only have a skeleton, all the other colour options you might need now have to be added to the different functions.

I hope this tutorial is of some use..

Start the Conversation

Your e-mail address will not be published. Required fields are marked *


*


This site uses Akismet to reduce spam. Learn how your comment data is processed.