• Skip to primary navigation
  • Skip to main content
OsomCode

OsomCode

Awesome code tutorials for WordPress and Genesis

  • Subscribe
  • My account
    • Edit profile
    • Favorites
    • Update credit card
  • Login

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.

Default color palette WordPress
Default color palette

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.

Genesis Sample color palette
personalized-color-palette-Twenty-Twenty-two-theme
Twenty Twenty-Two color palette

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 :

To see this and another 839 code snippets of this website, login or subscribe here.

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

color-palette-Genesis-Sample-theme.json

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:

To see this and another 839 code snippets of this website, login or subscribe here.

This would be the new result:

custom-color-palette-Genesis-Sample-with-picker
Custom color palette

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:

To see this and another 839 code snippets of this website, login or subscribe here.

This would be the result:

Custom palette without color picker

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. 😉

Block Editor CSS PHP WordPress

To leave read and make questions about this code, you can login or register.

  • About OsomCode
  • FAQ
  • Contact

Legal Notice · Privacy Policy · Cookie Policy · Terms and conditions
Copyright © 2023

Lost your password?