How to Add Your Own WordPress Block Editor Theme Colors

Last Updated February 6, 2023

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

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

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

---

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