Adding a custom color palette to a WordPress theme using theme.json

Find out in this tutorial how to add a custom color palette to the editor blocks in a WordPress theme using code.

In a previous tutorial I explained how you could add a color palette to a theme. That process required two steps:

1. Add support to the theme using add_theme_support( 'editor-color-palette', array() )
2. Defining colors in the stylesheet (style.css)

But with the arrival of WordPress 5.9 we can achieve the same thing in one step, using the theme.json file.

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 modern theme worth its salt should implement it.

Let’s see how to get it for any WordPress theme:

Instructions on how to add a custom color palette to a WordPress theme

A. Add or modify the theme.json file

In case the theme doesn’t have it, you have to create a file called theme.json and place it in the root of your theme.

Once you have done that, add the following code :

Using this snippet, you add the 4 colors (blue, orange, white and black) to the palette shown in the editor:

If you notice besides the new defined colors, the default palette is still displayed. If you want it to disappear and only show the custom palette, use this fragment instead of the previous one:

This would be the new result:

You can see that in this case only the 4 colors you have defined as color palette are shown.

Of course, I invite you to select the ones you want.

If you look at the screenshot above, this snippet does not remove the color selector (the rectangle with gray and white squares), so the user will still have the option to choose any other.

However, if you prefer you can also remove it using this snippet instead:

This would be the result:

B. Modify the theme.json

In case your theme already has a theme.json file you can modify the existing color palette to the one of your choice. To do so, change the fragment following "palette ": [ until the end of it (]).

Conclusions

Having a defined color palette accessible from the WordPress editor helps you maintain the visual consistency of the website and makes it easier for your customer to use it.

Now you know how to get it for any WordPress 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. 😉