Learn how to add a custom color palette to a Genesis child theme that is not yet optimized for the WordPress block editor.
WordPress block editor offers by default a color palette where you can choose the tone for text blocks, headers or buttons.
But if you want, you can limit the color palette, which helps you maintain aesthetic consistency and makes it easier for your client to use.
And, in my opinion, any modern child theme should have it implemented.
Besides, it’s very simple. You’ll see. 😉
Instructions to add a color palette for WordPress block editor in Genesis
1. Modify the file funtions.php
Add the following fragment in functions.php:
To see this and another 1097 code snippets of this website, login or subscribe here.
Using this snippet, you enter the 3 chosen colors (in this case, orange, black and white) into the palette shown in the editor. Of course, I invite you to select the ones you want.
But you can still go a step further and add to the palette the accent colors you have chosen from the WordPress customizer.
In the case of Genesis Sample, there are two: “link color” and “accent color”.
To see this and another 1097 code snippets of this website, login or subscribe here.
Now, in addition to the colors you have inserted by code, you also see the accent color that is chosen from the customizer.
Even better?
These are dynamic fields. That means that, when you change the accent color from the customizer, the change is also reflected in the editor’s color palette.
You already have all the settings needed to customize the color palette.
Now all you need to do is link those options to how they will be displayed on the front of the website; in other words, apply styles.
2. Edit the style.css file
To do this, enter the following snippet in style.css:
To see this and another 1097 code snippets of this website, login or subscribe here.
In this example I have added 3 colors (orange, black and white). But if you have inserted more in the functions.php code, remember to add them in this CSS snippet too.
As you can see in the screenshots, this fragment does not remove the color picker, so the user will still have the option to choose any other color.
However, if you’re interested, you can also remove the color picker from the palette with a simple snippet.
Note that I used Genesis Sample as an example.
To achieve the effect you want with any other Genesis child theme, use this code as a starting point and adjust it to your child theme with small modifications
Conclusions
Having a defined color palette accessible from the WordPress block editor helps you maintain the visual consistency of the site and makes it easier for your client to use.
And, as you just saw, you can add it to any Genesis child theme that is not yet optimized in a few easy steps.
And this is only a part of the features to be implemented. I suggest you to check the tutorial with all the alterations you need to make to your child theme to make sure it’s compatible with the block editor.
Any questions? Let me know in the comments.
And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉
