[Resolved] Changing default colors in color-picker

[Cathryn]

Hi,
I need to be able to change the default colors in the color picker so my clients can have easy access to their theme’s colors – I can’t expect them to copy/paste the hex codes all the time and afraid those crazy colors will insert themselves into their sites ;0) I’ve read everything on this subject here, but my php skills are minimal.

I got this code from this forum:

add_action( 'after_setup_theme', function() {
    add_theme_support( 'editor-color-palette', array(
        array(
            'name'  => __( 'Blue' ),
            'slug'  => 'blue',
            'color' => '#59BACC',
        ),
        array(
            'name'  => __( 'Green' ),
            'slug'  => 'green',
            'color' => '#58AD69',
        ),
        array(
            'name'  => __( 'Orange' ),
            'slug'  => 'orange',
            'color' => '#FFBC49',
        ),
        array(
            'name'  => __( 'Red' ),
            'slug'  => 'red',
            'color' => '#E2574C',
        ),
    ) );
} );

I got the Code Snippets plugin and entered the above PHP code there.

Then went back to my page and found that the other colors were completely replaced by the four colors above – yay!

However, the picker now won’t let me actually change the color of a headline or paragraph line. If I go into ‘custom colors’, enter #ffffff, only then will the headline color change to white. But clicking on the round color dots doesn’t work! I’m stuck, thanks!

[Tom]

Hi there,

Core blocks use classes like has-pink-background-color which require you to add those classes to your site.

I’m not 100% sure it will work, but try removing the slug lines from your code. That may force the editor to add the colors as inline CSS.

So this:

array(
    'name'  => __( 'Orange' ),
    'slug'  => 'orange',
    'color' => '#FFBC49',
),

Would become this:

array(
    'name'  => __( 'Orange' ),
    'color' => '#FFBC49',
),

[Cathryn]

Thanks Tom for your quick reply.

Part 1 — I’m guessing that said classes can only refer to English names of colors, like ‘white’, ‘pink’, ‘orange’, etc.? Most of my special colors are hex, so how does that work? Also, WHERE in the site would I add the classes and in what context? I tried adding the class ‘has-pink-background-color’ to the ‘Additional CSS Class(es)’ box in the headline block and the white text did not change to pink. Other than that, I’m not sure where to add these classes.

Part 2 — Removing the slug line did not work. I did that, then highlighted a headline, clicked the colored dot, and it does not change to that color.

Thanks!

[Tom]

Is there a specific page where I can see some text where you’ve used these custom colors?

The class would have the slug value in it. For example, this color:

array(
    'name'  => __( 'Orange' ),
    'slug'  => 'orange',
    'color' => '#FFBC49',
),

Would need a class like this:

.has-orange-color {
    color: #ffbc49;
}

.has-orange-background-color {
    background-color: #ffbc49;
}

[Cathryn]

Unfortunately, this still didn’t work. Here’s what I did:

Entered this in PHP Snippets:

add_action( 'after_setup_theme', function() {
    add_theme_support( 'editor-color-palette', array(
        array(
            'name'  => __( 'Blue' ),
			'slug'  => 'blue',
            'color' => '#59BACC',
        ),
        array(
            'name'  => __( 'Green' ),
			'slug'  => 'green',
            'color' => '#58AD69',
        ),
        array(
            'name'  => __( 'Orange' ),
			'slug'  => 'orange',
            'color' => '#FFBC49',
        ),
        array(
            'name'  => __( 'Red' ),
			'slug'  => 'red',
            'color' => '#E2574C',
        ),
    ) );
} );

Entered this in ‘Additional CSS’:

.has-blue-color {
    color: #59bacc;
}
.has-blue-background-color {
    background-color: #59bacc;
}
.has-green-color {
    color: #58ad69;
}
.has-green-background-color {
    background-color: #58ad69;
}
.has-orange-color {
    color: #ffbc49;
}
.has-orange-background-color {
    background-color: #ffbc49;
}
.has-red-color {
    color: #e2574c;
}
.has-red-background-color {
    background-color: #e2574c;
}

And when I go to any text or headline, highlight some text, go to the color picker, choose one of the 4 color dots, the text changes to black or stays black. The text does not change to the color indicated by the dot.

Any other suggestions, or what have I done wrong? Thanks again for helping me customize the color picker.

[Tom]

Is it working on the frontend?

I just tried the login details you shared in the original post but it’s a 404 error.

[Cathryn]

I’m sending you a new user login – site has been moved — thanks!!

[Tom]

Thanks! Is there a specific page where I can see the issue?

I do see that an inline color is working on your homepage, although it looks like a custom color vs. a set color.

[Cathryn]

Exactly!! You can set a hex color, but the color picker doesn’t work (the dots). So you’ll see inline color changes on the website as I have used the hex colors to change them. My issue is that I’d like to set the dots for my clients who are not tech savvy (i.e.: hex codes) and the dots still don’t work. When you click a any dot color, (I have set red orange blue & green), the inline text changes to black.

Sorry to press this issue, but I really think that being able to customize the color picker (the dots) is something others would like so our clients will be less likely to pick those crazy default colors when we’ve put in a lot of work to design a site with a certain look. If we can customize the default color-picker with our site colors, the clients will most likely stick to that and keep their sites looking as designed. Thanks again for your help!!

[Tom]

The dots seem to work on the front-end of the site (I used the green dot).

However, your custom classes aren’t being added to the editor.

To add the CSS from Additional CSS to the editor, try adding this function:

add_action( 'enqueue_block_editor_assets', function() {
    wp_add_inline_style( 'wp-edit-blocks', wp_get_custom_css_post()->post_content );
}, 20 );

Adding PHP: https://docs.generatepress.com/article/adding-php/

[Cathryn]

I added that PHP snippet and the color picker dots function correctly! thanks!

[Tom]

You’re welcome 🙂

[Author]

Posts