WordPress Custom Color Palette Tutorial

Branding matters and if you have a set color scheme for your brand and are tired of using the custom colors link in the Gutenberg color settings picker – we have the solution to make your life easier.

Below is everything you need to change your color settings area to be your brand colors – including solid colors and gradients. Creating WordPress custom color palettes will help you save time and frustration with keeping your brand colors in line on your website.

The image below shows what the default color settings are for the Astra theme.

As you can see that is a lot of colors – and if you want to use a specific color that is relevant to your brand you will need to click the custom color link and type in your HEX value.

This could get cumbersome over time and cause inconsistency in colors!

Examples of Gutenberg Default Color Palettes

Below is a screenshot of the color settings for the Twenty Twenty theme – which you can see is better branded than what is above and shows just 5 main colors to choose from but still also has the option to select a custom color.

Adding Code To Support A Custom Color Palette

Make sure you know the hex values you want to add before you get started!

For this example, we’re going to use my brand colors for a site we’ve worked on.

The brand colors are as follows:
#2193b0 (dark blue)
#6dd5ed (light blue)
#8aa346 (green)
#ff9900 (orange)

We will need to add some code to our functions.php file – the code is below for you to copy and paste.

Let’s break the parts of the code down a bit further so you understand what is happening and what you need to edit in the code customize it.

Everything in red you must change – number 4 is optional.

1. ‘name’ => __( ‘dark blue‘, ‘yourthemename‘ ),
   The above shows dark blue as the name of the color – you will make this whatever name you want it to be that makes sense for you.
2. ‘slug’ => ‘light-blue‘,
   The slug should be changed for every color! We just copy the name from above and if it is more than one word add a dash.
3. ‘color’ => ‘#ff9900‘,
   The color should be changed to the HEX value for the color you want to use.
4. (OPTIONAL) ‘name’ => __( ‘dark blue’, ‘yourthemename‘ ),
   The above shows yourthemename as what is called your text domain it is essentially your theme name – so you can change this to your theme name. It is not critical to change it and the code should work even if you leave it the same.

functions.php code

function mytheme_setup_theme_supported_features() {
    add_theme_support( 'editor-color-palette', array(
        array(
            'name' => __( 'dark blue', 'yourthemename' ),
            'slug' => 'dark-blue',
            'color' => '#2193b0',
        ),
        array(
            'name' => __( 'light blue', 'yourthemename' ),
            'slug' => 'light-blue',
            'color' => '#6dd5ed',
        ),
        array(
            'name' => __( 'orange', 'yourthemename' ),
            'slug' => 'orange',
            'color' => '#ff9900',
        ),
        array(
            'name' => __( 'green', 'yourthemename' ),
            'slug' => 'green',
            'color' => '#8aa346',
        ),
    ) );
}
 
add_action( 'after_setup_theme', 'mytheme_setup_theme_supported_features' );

Below is our new custom color settings options showing the branded colors in the admin!

Changing Order Of The Colors

You can control the order in which the colors show in the color settings box. In the sample code above Dark Blue will show first, Light Blue second and so on. If you want the Orange color first, then you would put that first in the list.

Creating CSS Support For Your New Color Classes

The above simply offers you the ability to use your custom colors in the color settings area of your post.

Now, you have to tell the stylesheet how to use those colors on the front end so others can see the colors when you use them in your post. You can see there are 2 distinct styles below:

.has-dark-blue-background-color will define the background color of the text or area you choose.
.has-dark-blue-color will define the actual text color of the text you choose

The dark-blue text will be changed to the color you defined in your function above. So in our case as an example we would also add:

.has-green-background-color and .has-green-color
.has-light-blue-background-color and .has-light-blue-color
.has-orange-background-color and .has-orange-color

style.css code

.has-dark-blue-background-color {
     background-color: #2193b0;
 }

.has-dark-blue-color {
     color: #2193b0;
 }

Disabling The Color Picker

When we develop a website to a specific set of specifications by a client, we will always add their brand colors to the color settings area so their staff know which options are available to them.

In many cases we will actually deactivate the option to let a user pick an additional color with the custom color link.

To do this you just need to add this line of code to your functions.php file.

functions.php code

add_theme_support( 'disable-custom-colors' );

Adding Branded Gradient Color Options

With the WordPress 5.4 update there was some cool additions – including an improved button block. One of these new features it the ability to add gradients as a background color to your button.

In the screenshot below you can see the button block and the gradient options that are included with the Twenty Twenty theme by default.

While you can customize your gradient by using the tools right in the block – it is much easier to add your own custom gradient so you can just click a button and then your buttons will be consistent throughout your website.

But just like with solid colors – you may want to customize them with your brands colors and the below is what you need to make it happen. It is very close to what we did above for the single colors so it should look similar.

Just like above you will edit the name, the slug and then the gradient colors.

For this you will need the RGB value not the HEX. To get the RGB you can use a tool like this one to help you.

The items in red are the ones that NEED to be changed by you to customize it.

array(
‘name’ => __( ‘Dark Blue to green‘, ‘yourthemename’ ),
‘gradient’ => ‘linear-gradient(135deg,rgba(33,147,176,1) 0%,rgb(138,163,70) 100%)’,
‘slug’ => ‘dark-blue-to-green‘
),

Copy the code below and paste into your functions file but be sure to change the items in red above to make it your own!

functions.php code

add_theme_support(
    'editor-gradient-presets',
    array(
        array(
            'name'     => __( 'Dark Blue to green', 'yourthemename' ),
            'gradient' => 'linear-gradient(135deg,rgba(33,147,176,1) 0%,rgb(138,163,70,1) 100%)',
            'slug'     => 'dark-blue-to-green'
        ),
		array(
            'name'     => __( 'Orange to green', 'yourthemename' ),
            'gradient' => 'linear-gradient(135deg,rgba(255,153,0,1) 0%,rgba(138,163,70,1) 100%)',
            'slug'     =>  'orange-to-green',
        ),
       
    )
);

Again you still need to adds some styling as well to get the colors to display properly on the front end. Below is a sample line and in red are the things you need to change.

.has-dark-blue-to-green-gradient-background {
background: linear-gradient(135deg,rgba(33,147,176,1) 0%,rgb(138,163,70,1) 100%);
}

The dark-blue-to-green is from the slug in your function. The numbers are your RGB color value.

Copy the below code – edit the items in red and place in your style.css file.

styles.css code

.has-dark-blue-to-green-gradient-background {
    background: linear-gradient(135deg,rgba(33,147,176,1) 0%,rgb(138,163,70) 100%);
}
.has-orange-to-green-gradient-background {
    background: linear-gradient(135deg,rgba(255,153,0,1) 0%,rgba(138,163,70,1) 100%);
}

Disabling Custom Gradients Functionality

If you only want to keep your custom gradients and not allow the gradient tool to be used enter the code below in your functions.php file.

functions.php code

add_theme_support( 'disable-custom-gradients' );

Below is how the gradient area will look without the ability to customize gradients from the admin. As you can see it just shows the custom gradients we added.

 

Thoughts?

Hopefully this tutorial was easy enough to follow along – but if you have questions or concerns do not hesitate to reach out and we will see what we can do!