How to Set Your Own WordPress Block Editor Theme Colors

How to Add Your Own WordPress Block Editor Theme Colors

Last Updated February 6, 2023

White Label Logo This post is brought to you by White Label for WordPress. Customize the WordPress admin and make life easier for you and your clients.

The WordPress Block editor has come a long way since its initial launch. There are plenty of blocks included by default and even more available from third-party developers now. Each has its own special set of features and customization capabilities. One of the most common of those features is to set text and background colors for a given block’s content. There is a set of default colors included with WordPress but did you know you can pretty easily add your own? That’s what we’ll cover today. Let’s go through how you can quickly and easily add your own WordPress Block Editor theme colors to your current website project.


Adding Block Editor Theme Colors with Code

Today, we’re going to first focus on adding new block editor theme colors by writing some code. You can also add more colors using some plugins if you prefer and we’ll get to that later in the article. Our assumption is that you are a WordPress developer looking for a more programmatic approach. So we’re going to show you how to add new colors by including some code in your theme.

Declare Block Editor Theme Colors in functions.php

The code you need is relatively simple. You only need to add a small function that uses the after_setup_theme hook. Inside this function, we will be adding an array of custom colors with the add_theme_support function. The elements of that array have to define the name of the color, a slug, and the color itself as a hex value.

Here’s an example block of code where I’m adding two Block Editor theme colors from a client’s logo:

function add_block_editor_theme_colors() {
    $new_colors = [
        [
            'name' => esc_html__('Logo Brown', 'theme-name'),
            'slug' => 'logo-brown',
            'color' => '#695e4a',
        ],
        [
            'name' => esc_html__('Logo Green', 'theme-name'),
            'slug' => 'logo-green',
            'color' => '#41850f',
        ],
    ];

    add_theme_support('editor-color-palette', $new_colors);
}
add_action('after_theme_setup', 'add_block_editor_theme_colors');

Simple enough. Now we’re going to have two new options available in the WordPress Block Editor’s color palette to choose from. Of course, now we have to actually implement these colors in our theme’s CSS.

Add Colors to a CSS File

This part is fairly simple. The easiest way to get your new colors working on the front end of your site is to include them in a CSS file with your theme. The format is basic. It uses the slug from our array for both color and background-color properties.

Here’s an example of the CSS you’ll need if you were using our array:

.has-logo-brown-background-color {
    background-color: #695e4a;
}

.has-logo-brown-color {
    color: #695e4a;
}

.has-logo-green-background-color {
    background-color: #41850f;
}

.has-logo-green-color {
    color: #41850f;
}

Of course, this doesn’t make our new colors work inside of content in the Block Editor. For that, you’ll need to enqueue your stylesheet in the admin as well.

Let’s go back to the functions.php file and add our CSS file to the front and admin side of our site.

Enqueue CSS File

We’re going to need to enqueue our CSS file on the front end and the admin of our WordPress site. You’ll need to add more code to your theme’s functions.php file. This will make sure that our new colors are actually working in our content. When a visitor reads our site or an admin user is writing in the Block Editor the colors will work.

For this code example, I’m going to say that we saved our CSS file into a css directory of our theme and called it block-editor-theme-colors.css. Here’s the code:

function add_block_editor_theme_colors_stylesheet() {
    wp_register_style('new-block-editor-theme-colors', get_template_directory_uri().'/css/block-editor-theme-colors.css';
    wp_enqueue_style('new-block-editor-theme-colors')
}
add_action('wp_enqueue_scripts', 'add_block_editor_theme_colors_stylesheet');
add_action('admin_enqueue_scripts', add_block_editor_theme_colors_stylesheet');

This should get you new block editor colors on both the front and back of your WordPress installation.

Do you want an easier solution? Let’s take a look at some WordPress plugins that can help.


Adding Block Editor Theme Colors with a Plugin

There are a couple of good plugins that will let you customize color palettes for use in the WordPress Block Editor. We’ve chosen two that have similar feature sets but different interfaces. The one you choose will ultimately come down to your preference in interacting with the plugin itself.

Custom Color Palette for Gutenberg

Custom Color Palette for Gutenberg

The Custom Color Palette for Gutenberg plugin is a great way to add your own colors to the Block Editor without writing any code. This plugin utilizes the WordPress Customizer and the built-in color picker to let you build your very own color palette. You can control main, grayscale, and primary colors and toggle each of those color categories even further. In the end, you can build a complete set of new Block Editor theme colors without writing a single line of PHP or CSS.

Plugin Details

This plugin was originally published by its owner in October of 2018. It is now on version 1.0 and last saw a revision on April 1st, 2020. The most recent release functions on WordPress 5.4.15 and requires at least PHP 5.6 to work on your server. This plugin is actively functioning on over 2,000 WordPress websites. It has had over 21,390 downloads. There have not been many assistance requests from end-users. Reviews for Custom Color Palette for Gutenberg are very positive. Many of the end-users who left a review found Custom Color Palette for Gutenberg to be great.

Block Editor Colors

Block Editor Colors

Block Editor Colors is another fine WordPress plugin for adjusting the available colors you can use in the new editor. Unlike the previous example, this plugin has its own interface for defining Block Editor theme colors. You can add custom colors, define default colors, and all of your choices are applied globally across your WordPress site. So, regardless of the theme or other plugins you use, the color palette you build will be available. This is perfect for client projects where you want to add logo-specific colors but the site undergoes regular redesigns and changes.

Plugin Details

This product was originally published by its creator in March of 2020. It is actively on version 1.2.4 and last underwent an update on April 6th, 2023. The most recent edition operates on WordPress 6.2.4 and requires at least PHP 5.6 to work on your server. This plugin is currently functioning on over 3,000 WordPress websites. It has had over 21,330 downloads. There have not been many help requests from customers. Reviews for Block Editor Colors are very positive. Many of the users who left a review found Block Editor Colors to be excellent.


Customize WordPress for Your Clients

Hopefully, using our code examples or plugin suggestions, you can add new Block Editor theme colors to your client projects moving forward. Before you go, if you want more ways to customize WordPress for clients, you might be interested in our White Label plugin.

White Label was built to let you rebrand and modify the WordPress admin experience for clients. Make WordPress less confusing for them to use and easier for you to support. Change the login page, add custom dashboard elements, edit and hide menus, and manipulate how plugins are displayed.

Check out the complete feature list to learn about all of the ways our White Label WordPress plugin can improve your business and the experience of your users.


Related Posts from Our WordPress Blog

6 WordPress WHMCS Plugins to Sync Data and Features

WHMCS is popular software for managing customers, billing, and support. Check out these WordPress WHMCS plugins that tie the two together.

How to Add WordPress LDAP Authentication Using a Plugin

Are you interesting in adding LDAP authentication to your WordPress website? You’ll need the help of a WordPress LDAP plugin to get started.