How to Add a Custom “Color Palette” to Your WordPress Theme

One of the cool things I picked up while working on my Gutenberg Development Course was how to set a default color palette for all blocks inside your theme.

Interestingly, as far as I can tell, defining custom color schemes is something only a theme should do and this cannot be set from within a custom block.

Block Color Palettes in Gutenberg

One of the features that blocks can have in WordPress is the ability change a color. For example, the core paragraph block has the ability to change the background and text color in the block inspector panel.

Screen Shot 2017-12-30 at 12.59.31 PM.png
Example of Default Block Color Scheme in WordPress

One of the cool things you can do as a theme developer, is set your own custom color palette for your theme.  This can help users choose colors that match the design of the theme.

Setting Custom Color Palettes in Gutenberg

To set a custom color palette (or color scheme) you would simply add add_theme_support( ‘editor-color-palette’ ) to your functions.php file and then continue to pass in the hexadecimal values for colors you want.

You can add as many colors as you like (I think), but I would suggest limiting the selection to colors that work well with your theme.

You will then want to hook that add_theme_support() into ‘after_setup_theme’.

What This Looks Like in Action

Using the color combinations set above, the default color options for blocks would now look like this.

Example of custom color scheme applied to WordPress blocks
Example of custom color scheme applied to WordPress blocks

I think that if you have a theme with a specific color palette that you should definitely take the extra few minutes to set a default color scheme for the blocks.

Learn More About Developing with Gutenberg

To learn more about building custom blocks or customizing Gutenberg with your theme, please check out my course on Gutenberg Development Course.

3 thoughts on “How to Add a Custom “Color Palette” to Your WordPress Theme

  1. Hello !
    Since the fresh 2.8 release things have changed a little,

    The second param is now an array with the name of the color as key, like this :

    add_theme_support( ‘editor-color-palette’,
    array(
    ‘blue’ => ‘#48ADD8’,
    )
    );

    Like

    1. Oops I was wrong, it’s more something like this :

      add_theme_support( 'editor-color-palette',
      array( 'name' => 'blue', 'color' => '#48ADD8' ),
      array( 'name' => 'pink', 'color' => '#FF2952' )
      );

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s