How to Add a Custom Color Palette to Astra

Color palette with 7 color squares in purple, blue, black and white and the text "How to Add a Custom Color Palette to Astra"

When you build a website with the Astra WordPress theme, you may wonder how to add a custom color palette to Astra.

This custom color palette will have your brand colors predefined.

Or if you’re just getting started with Astra, you may not even know that a custom color palette is an option.

While it’s simple to modify color settings for various blocks such as sections, headings, and text, it can get cumbersome to use the default color palette.

This default color palette allows you to choose a custom color where you can provide a specific color’s hex value.

As an example, look at the screenshot below.

blank
Add Color Hex Value

I’ve clicked the “Select Color” button and provided a color value of #ff0000 to set a red heading color.

Or if I click “Select Color” I can choose from the default palette by clicking on one of the predefined color squares:

blank
Default Color Palette in Astra

While this works fine, wouldn’t it be nice to have a custom palette of just the colors you want to use on your site?

When you add a custom color palette to Astra, you will be able to simply click on a color square of color values that you have defined.

As an example, see the screenshot below. The color palette shows my brand colors instead of the default colors:

Astra Color Palette with Custom Colors of white, purple and blue
Custom Color Palette in Astra

I did this by adding a code snippet to the theme’s functions.php and style.css. And I’ll show you how to do that in just a bit.

The Gutenberg block editor comes with a default color palette, too:

Picture of Gutenberg Block color palette
Default Color Palette Gutenberg Block Editor

When you add a custom color palette to Astra it also updates the Gutenberg color palette too:

Gutenberg Block Editor with Custom Color Palette
Custom Color Palette in Gutenberg Block Editor

This post assumes you are comfortable with updating your functions.php file. If not, contact a designer or developer to help you.

So let’s learn how to add a custom color palette to Astra.

The following is a list of topics covered.

Astra Color Palette Example
Add a Custom Color Palette to Astra
Add Color Styles to Gutenberg Block Editor
Download Sample Code for style.css
Download Sample Code for functions.php


Astra Color Palette

The color palette appears in the Customizer whenever you attempt to change any element’s colors.

For example, go to Appearance > Customize > Global > Colors > Base Colors.

Click the “Select Color” button and the default palette displays:

blank

But what we want is a custom palette with predefined brand colors like this:

Astra Color Palette with Custom Colors of white, purple and blue

We’ll do this by adding a few code snippets to functions.php.

Add a Custom Color Palette to Astra

Follow these steps to add a custom color palette to Astra.

1. Make a List of Color Values

First, make a list of all of the color values you want to add to the palette.

For this demo, we’ll create a palette using my logo and brand colors.

These are the color values and names I want to use:

  • #ffffff – white
  • #c7aad3 – very light purple
  • #8d53a5 – light purple
  • #56007a – purple
  • #095aa5 – blue
  • #b5c6e0 – light blue
  • #aaaaaa – dark gray
  • #000000 – black

Next we need to modify the child theme functions.php to define these colors.

2. Make a copy of functions.php

Make a copy of functions.php before you edit it. You can do this through cPanel or FTP.

The reason I recommend this is because If you make a mistake when adding the code, you can break your site and get a white screen of death.

But if you have a backup of functions.php, you can simply copy the original file back and your site will be up and running in no time!

3. Make a copy of style.css

Make a copy of style.css before you edit it. You can do this through cPanel or FTP.

This way you’ll have a backup ~ just in case something doesn’t turn out the way you expect it.

4. Edit Your Astra Child Theme

If you don’t have a child theme, stop right now and make sure to create an Astra child theme before going any further with this tutorial.

Creating a child theme will keep your site customizations preserved whenever an Astra theme update gets released. So you won’t have to worry about losing all of your hard work.

Then once you have a child theme created, you are ready to proceed.

5. Add Code to functions.php

Add the following code into the child theme functions.php and replace the color values with the ones you want for your site.

add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 15 );

add_action('wp_footer', 'wpb_hook_javascript_footer');
function your_prefix_astra_color_palettes() {

  $color_palettes = array(
 '#ffffff',
 '#c7aad3',
 '#8d53a5',
 '#56007a',
 '#095aa5',
 '#b5c6e0',
 '#aaaaaa',
 '#000000',
 
  );
  
  return $color_palettes;
}

add_filter( 'astra_color_palettes', 'your_prefix_astra_color_palettes' );
function mytheme_setup_theme_supported_features() {
    add_theme_support( 'editor-color-palette', array(
        array(
            'name' => __( 'white', 'themeLangDomain' ),
            'slug' => 'white',
            'color' => '#ffffff',
        ),
        array(
            'name' => __( 'very-light-purple', 'themeLangDomain' ),
            'slug' => 'very-light-puprle',
            'color' => '#c7aad3',
        ),
        array(
            'name' => __( 'light-purple', 'themeLangDomain' ),
            'slug' => 'light-purple',
            'color' => '#8d53a5',
        ),
        array(
            'name' => __( 'purple', 'themeLangDomain' ),
            'slug' => 'purple',
            'color' => '#56007a',
        ),
        array(
            'name' => __( 'blue', 'themeLangDomain' ),
            'slug' => 'blue',
            'color' => '#095aa5',
        ),
        array(
            'name' => __( 'light-blue', 'themeLangDomain' ),
            'slug' => 'light-blue',
            'color' => '#b5c6e0',
        ),
        array(
            'name' => __( 'dark-gray', 'themeLangDomain' ),
            'slug' => 'dark-gray',
            'color' => '#aaaaaa',
        ),
        array(
            'name' => __( 'black', 'themeLangDomain' ),
            'slug' => 'black',
            'color' => '#000000',
        ),
    ) );
}
 
add_action( 'after_setup_theme', 'mytheme_setup_theme_supported_features' );

You can get the above code in one of two ways:

Download Sample Code for functions.php
  1. Click the functions-php-code link below to access the raw code and open the file.
  2. Or click the download button below to save the raw code on your local computer.

Add Color Styles to Gutenberg Block Editor

Add the following code into the child theme style.css and replace the color values with the ones you want for your site.

/* Gutenberg color options go in child style.css* /
/* -- see editor-color-palette in functions.php */

.has-white-background-color {
    background-color: #ffffff !important;
}
 
.has-white-color {
    color: #fffffff !important;
}

.has-very-light-purple-background-color {
    background-color: #c7aad3 !important;
}
 
.has-very-light-purple-color {
    color: #c7aad3 !important;
}

.has-light-purple-background-color {
    background-color: #8d53a5 !important;
}
 
.has-light-purple-color {
    color: #8d53a5 !important;
}

.has-purple-background-color {
    background-color: #56007a !important;
}
 
.has-purple-color {
    color: #56007a !important;
}

.has-blue-background-color {
    background-color: #095aa5 !important;
}
 
.has-blue-color {
    color: #095aa5 !important;
}

.has-light-blue-background-color {
    background-color: #b5c6e0 !important;
}

.has-blue-color {
    color: #b56e0 !important;
}

.has-dark-gray-background-color {
    background-color: #aaaaaa !important;
}

.has-dark-gray-color {
    color: #aaaaaa !important;
}

.has-black-background-color {
    background-color: #000000 !important;
}

.has-black-color {
    color: #000000 !important;
}

You can get the above code in one of two ways:

Download Sample Code for style.css

  1. Click the style-css-code link below to access the raw code and open the file.
  2. Or click the download button below to save the raw code on your local computer.

Again, remember to change the color values to the ones you want on your website because the demo code above is using my brand colors.

That’s it! By following the steps above you should be able to add a custom color palette to Astra and the Gutenberg block editor.

Now it’s important to test that you did everything correctly.

NOTE: To test, you will most likely have to log out of your site and log back in to ensure the new functions.php and style.css are loaded.

Test the Code

One way you can test is by going to Appearance > Customize > Global > Colors > Base Colors.

You can see in the below screenshot that our new color palette has been added:

Customized Astra Color Palette with white, purple, blue, grey and black colors
Custom Color Palette in Astra

That’s it! We were able to successfully add a custom color palette to Astra!

And you’ll see the custom color palette was added to Gutenberg block editor as well:

Gutenberg Block Editor with Custom Color Palette
Custom Color Palette in Gutenberg Block Editor

Note the new color palette has replaced the default color palette.

And note that you can still add a custom color that’s beyond the colors you’ve defined in the palette.

Simply click the “custom color” link to do so.

Wrapping it Up


Steps to Add Custom Color Palette to Astra

It takes a bit of preparation and care to ensure that you properly add the code to functions.php and style.css.

And if this seems too technical for you or you’re afraid of breaking your site, please contact me to help.

But once you’ve done it, you will greatly simplify the task of customizing your website colors!

In summary, follow the steps below to add custom color palette to Astra:

  1. Make a list of color values.
  2. Backup functions.php.
  3. Backup style.css.
  4. Download the sample code files to your local computer.
  5. Change the color values in both functions.php and style.css.
  6. Log into cPanel or FTP to get access to your web server.
  7. Make a copy of child theme functions.php.
  8. Make a copy of child theme style.css.
  9. Add the code to both files as explained above.
  10. Log out of your site and log back in to refresh the files.
  11. Test the changes.
  12. If you are not seeing the changes, make sure to clear your local cache as well as your browser.

I hope this helps you understand how to add a customer color palette to Astra and Gutenberg.

Any questions? Please post in the comments below and I’ll be happy to help!


Related Posts

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Scroll to Top

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close