[Resolved] Changing global colors programatically

[Gerard]

Hi guys!

So before GP 3.1 we had the following filter to programmatically change the colors that were used in the customizer’s palette:

add_filter( 'generate_default_color_palettes', $array_of_colors );

This doesn’t work now since the new global colors system has been implemented.

Now, I would like to ask for a way to programmatically change the global colors. It should be a filter allowing us to set the CSS Variable Name and the color.

Maybe something like this?

add_filter( 'generate_global_colors', array(
    [ 'primary', '#000000'],
    [ 'secondary', '#000000'],
    [ 'accent', '#000000'],
    [ 'background', '#000000'],
    [ 'contrast', '#000000'],
) );

I rely on the previous filter in all of my client’s websites, since I have another global colors palette that syncs with GP and other plugins.

Would it be possible to add a filter like this as soon as possible?

Thank you,
Gerard

[Chris]

+1

[Leo]

Hi there,

I believe the generate_option_defaults filter should work:
https://github.com/tomusborne/generatepress/blob/adfe090929b0515cdf894f4c6b722cfe8c0790dc/inc/defaults.php#L20

You can see the global colors section here:
https://github.com/tomusborne/generatepress/blob/adfe090929b0515cdf894f4c6b722cfe8c0790dc/inc/defaults.php#L69-L108

Some examples of using the filter here:
https://generatepress.com/forums/search/generate_option_defaults/

[Gerard]

Hi Leo,

Thanks for your reply. I have some doubts though.

Would that really be considered a default? I want the colors to be overwritten by my code, even if the user tries to manually change them from Appearance, so I wouldn’t consider my request as how to set the default colors.

How would modifying a default value make them static so that users cannot modify my values?

[Tom]

Hi there,

If you want to override the values completely, you can do this:

add_filter( 'option_generate_settings', function( $settings ) {
    $settings['global_colors'] = [
        [
            'name' => __( 'Contrast', 'generatepress' ),
            'slug' => 'contrast',
            'color' => '#222222',
        ],
        [
            'name' => sprintf( __( 'Contrast %s', 'generatepress' ), '2' ),
            'slug' => 'contrast-2',
            'color' => '#575760',
        ],
        // And so on..
    ];

    return $settings;
} );

Hope this helps!

[Gerard]

Hi Tom!

Thanks, that’s what I was looking for.

Just a last question. We have 3 key-value pairs:

• name
• slug
• color

The usage of the latter is obvious. As to the other two, should I understand that the slug is the CSS variable and that the name is the tooltip that appears when the color is on hover?

Thank you,
Gerard

[David]

Hi there,

thats correct the slug name is what you see in the tooltip and is also what is used for the CSS variable.

eg.

slug' => 'contrast-2',

results in:

:root {
    --contrast-2: #575760;
}

[Gerard]

Hi David,

Thanks for the clarification. What does the name do then if both the tooltip and the CSS variable are coming from the slug?

[Tom]

It’s just a required field when adding editor palettes in WordPress. We didn’t want to create an extra name field when adding colors, so we use the slug for both.

So adding a name is “required” but it doesn’t actually do anything.

[Gerard]

It’s all clear now, thanks Tom =)

[Tom]

No problem!

[Elvis]

Hello,
I have changed variable names to:

primary-dark
primary-light
accent
secondary-light
secondary-dark

I prefer these names as they better reflect the role of colors then contrast for example.
Now since I am doing thi in the very beginig everything seems to work, but If I click on the button “Default” it will change to Contrast-2.

Is there a way to change the value of Default to primary-color?
Thanks

[Tom]

Absolutely – you can do this:

add_filter( 'generate_option_defaults', function( $defaults ) {
    $defaults['global_colors'] = array(
        array(
            'name' => __( 'Contrast', 'generatepress' ),
            'slug' => 'contrast',
            'color' => '#222222',
        ),
        array(
            /* translators: Contrast number */
            'name' => sprintf( __( 'Contrast %s', 'generatepress' ), '2' ),
            'slug' => 'contrast-2',
            'color' => '#575760',
        ),
        array(
            /* translators: Contrast number */
            'name' => sprintf( __( 'Contrast %s', 'generatepress' ), '3' ),
            'slug' => 'contrast-3',
            'color' => '#b2b2be',
        ),
        array(
            'name' => __( 'Base', 'generatepress' ),
            'slug' => 'base',
            'color' => '#f0f0f0',
        ),
        array(
            /* translators: Base number */
            'name' => sprintf( __( 'Base %s', 'generatepress' ), '2' ),
            'slug' => 'base-2',
            'color' => '#f7f8f9',
        ),
        array(
            /* translators: Base number */
            'name' => sprintf( __( 'Base %s', 'generatepress' ), '3' ),
            'slug' => 'base-3',
            'color' => '#ffffff',
        ),
        array(
            'name' => __( 'Accent', 'generatepress' ),
            'slug' => 'accent',
            'color' => '#1e73be',
        ),
    );

    return $defaults;
} );

Hope this helps!

[Elvis]

Thanks Tom,
I have seen this function on the forum allready, what bugs me is, that then it prevents me to change the color values in the customizer without opening up code editor.
Tnx

[Tom]

The code I shared above changes the defaults – it doesn’t overwrite the values you’ve set in the Customizer, and won’t prevent you from using the Customizer to change those values.

[Author]

Posts