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 that has 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, you are limited to using 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 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

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


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. 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.

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

4. Add Code to functions.php
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.

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

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 is 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.


Summary of 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.

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. Download the sample code file to your local computer.
  3. Edit the file to change the color values from the sample code to your color values and save the file.
  4. Log into cPanel or FTP to get access to your web server.
  5. Make a copy of Astra child theme functions.php in case something goes wrong.
  6. Copy and paste the sample code into your Astra child theme functions.php.
  7. Save the file.
  8. Test the changes.

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