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
This plugin was first released by its creator in October of 2018. It is presently on version 1.0 and last experienced an update on April 1st, 2020. The most recent update functions on WordPress 5.4.16 and requires at least PHP 5.6 to operate on your server. This plugin is currently running on over 2,000 WordPress sites. It has had over 21,960 downloads. There have not been many assistance requests from users. Reviews for Custom Color Palette for Gutenberg are very positive. Many of the customers who left a review found this plugin to be wonderful.
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 plugin was originally released by its owner in March of 2020. It is currently on version 1.2.6 and last experienced a revision on June 20th, 2024. The most recent release runs on WordPress 6.5.5 and requires at least PHP 5.6 to function on your server. This plugin is currently working on over 3,000 WordPress websites. It has had over 26,150 downloads. There have not been many support requests from customers. Reviews for Block Editor Colors are very positive. Many of the end-users who left an evaluation 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.