So it’s been about a year or so since Gutenberg was brought into WordPress core. And I know that there’s still some debate about whether it should have been, how it was rolled out and all of that. But it’s undeniable that it has added some really cool features.
One of those is the ability to easily add color to your posts and pages. Beforehand you would either have to use a plugin or something or you would have had to go into the text editor and, you know, add in the styling and what not, and it was all confusing, especially if you weren’t a technical user.
Gutenberg has different color settings and color panels that the core blocks and the custom blocks people create can use so that you can set colors pretty quickly.
However, there is one problem.
The default colors that it offers you are kind of random. And while there is a spot where you can add in your own color, if you’re using the same color that’s not one of the default colors over and over on your website, it can get tedious adding it in all the time.
Fortunately, there is a way to do this.
You can set your own color palette for your website that includes only the colors you want to use and that are in your business’ branding.
Here, I’ll show you how it is.
So first off, you’re going to put all of this code in your functions.php file in your theme. And first you’re going to add this line that simply adds support. And then next, you can add this function that has this array. And each item in this array has the name of the color, slug for the color, and the actual hexadecimal code for that color. And you can add as many as you want.
So here is a sample of colors I have for my website. And really, that’s all you need to do for it. Now let’s check in on what it looks like on the front end.
So we’ll come here to the post, and I’m just going to go here. I’m going to go to color settings and there we have it. It looks a little bit weird right now; Gutenberg continues to change sometimes. Sometimes weird things happen, but for the most part, these are my colors. I can change that heading all I want. See, simple as that.
So see, it’s as simple as that. Adding those color palettes will save you time and headaches, and it will make sure you’re always using the correct colors for your branding. Because your branding on your website is really pretty important.
And also make sure that the colors you’re using on your posts and pages are still accessible. Make sure it still has the right color contrast.
That’s how you can add your color palette to Gutenberg. If you have any questions, please feel free to leave them down in comments below, and I’ll do my best to answer them.
But until next time, happy WordPressing!
Leave a Reply