Discover in this tutorial how to add a custom color palette to the WordPress editor in Genesis Sample using code.
The WordPress editor offers by default a color palette where to 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 self-respecting modern child theme should implement it.
Let’s see how to achieve this for Genesis Sample:
Instructions for adding a custom color palette in Genesis Sample
1. Modify the appearance.php
Starting with Genesis Sample 2.8, the color palette has been moved to the appearance.php file inside the /config/ folder.
This file contains the array where the featured colors chosen from the WordPress customizer are added to the editor.
Therefore, if you want to add more colors to the custom palette you can do it by placing them in that same array (editor-color-palette).
For example, replace in the appearance.php file the following fragment:
To see this and another 1097 code snippets of this website, login or subscribe here.
Using this snippet, you add the 3 chosen colors (in this case, orange, white and black) to the palette displayed in the editor
Of course, I invite you to select the ones you want.
As a result you will see the colors you have inserted via code along with the highlighted colors chosen from the customizer.
And you know what?
These are dynamic fields; that is, when you change the highlighted color from the customizer, this change is also reflected in the color palette of the editor.
You now have all the necessary settings to customize the color palette.
Now you only need to link these options with how they will be displayed on the front side of the web; in other words, to 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, white and black). But if you have inserted more (or others) in the appearance.php code, remember to add them also in this CSS block.
If you look at the screenshots, this snippet does not remove the color picker, so the user will still have the option to choose any other color.
However, if you prefer you can also remove the color picker from the palette with a simple snippet.
Note that I have used Genesis Sample (> 2.8) as an example.
To get the effect you want with any other Genesis child theme, use this code as a starting point and adjust it to your theme with minor modifications.
Can’t you make it work? Leave me a suggestion for your favorite template through the contact form.
Conclusions
Having a defined color palette accessible from the WordPress editor helps you maintain the visual coherence of the website and makes it easier for your client to use it.
Now you know how to achieve this for the Genesis Sample child theme.
Any questions? I read you 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. 😉
