Tag Archives: Theme Customization

How to set a custom block color scheme in your theme for Gutenberg

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.

Learning the Niche of WordPres Theme Setup & Customization – Presentation from Orlando WordPress Meetup

Today I gave a really cool talk on what skills one needs to install and customize WordPress themes.  I argue that this is a niche in the WordPress ecology and of itself and it’s possible at different levels from site owners, to account managers, to developers.

//speakerdeck.com/assets/embed.js

We cover some examples of how to customize a few primary features of the Swift free WordPress theme and Canvas, the premium WooThemes framework.