Default customizer colours

Hi David,

Can you link us to a page and point us to where this issue is?

Hi Ying, it's on a local dev site at the moment but I'll get this moved to a public link and send over the details, thanks...

Meanwhile, can you re-post your code and wrap it with the code tag so I can check the format?

// FFDV Generate default GP colour palette for customizer
add_filter( 'generate_option_defaults', 'ffdv_filtered_colour_palette' );
add_filter( 'option_generate_settings', 'ffdv_filtered_colour_palette' );

function ffdv_filtered_colour_palette( $palette ) {
    
	$palette['global_colors'] = array(
		array(
            'name' => __( 'Grey', 'pms' ),
            'slug' => 'grey',
            'color' => '#101011',
        ),
        array(
            'name' => sprintf( __( 'Grey %s', 'pms' ), '2' ),
            'slug' => 'grey-2',
            'color' => '#323233',
        ),
        array(
            'name' => sprintf( __( 'Grey %s', 'pms' ), '3' ),
            'slug' => 'grey-3',
            'color' => '#5c5c5d',
        ),
		array(
            'name' => sprintf( __( 'Grey %s', 'pms' ), '4' ),
            'slug' => 'grey-4',
            'color' => '#a7a8aa',
        ),
        array(
            'name' => sprintf( __( 'Grey %s', 'pms' ), '5' ),
            'slug' => 'grey-5',
            'color' => '#d7d8d9',
        ),
		array(
            'name' => sprintf( __( 'Grey %s', 'pms' ), '6' ),
            'slug' => 'grey-6',
            'color' => '#e9e9ea',
        ),
        array(
            'name' => sprintf( __( 'Grey %s', 'pms' ), '7' ),
            'slug' => 'grey-7',
            'color' => '#f2f2f2',
        ),
		array(
            'name' => __( 'Blue', 'pms' ),
            'slug' => 'blue',
            'color' => '#102d69',
        ),
        array(
            'name' => sprintf( __( 'Blue %s', 'pms' ), '2' ),
            'slug' => 'blue-2',
            'color' => '#344c7f',
        ),
		array(
            'name' => sprintf( __( 'Blue %s', 'pms' ), '3' ),
            'slug' => 'blue-3',
            'color' => '#0093d3',
        ),
		array(
            'name' => sprintf( __( 'Blue %s', 'pms' ), '4' ),
            'slug' => 'blue-4',
            'color' => '#40aede',
        ),
		array(
            'name' => sprintf( __( 'Blue %s', 'pms' ), '5' ),
            'slug' => 'blue-5',
            'color' => '#e5f4fb',
        ),
		array(
            'name' => __( 'Green', 'pms' ),
            'slug' => 'green',
            'color' => '#95c11f',
        ),
        array(
            'name' => sprintf( __( 'Green %s', 'pms' ), '2' ),
            'slug' => 'green-2',
            'color' => '#b0d157',
        ),
		array(
            'name' => __( 'Base', 'pms' ),
            'slug' => 'base',
            'color' => '#ffffff',
        ),
		
    );
	
	return $palette;
	
}

// FFDV Generate default GP colour options for customizer
add_filter( 'generate_option_defaults', 'ffdv_filtered_colour_defaults' );
add_filter( 'option_generate_settings', 'ffdv_filtered_colour_defaults' );
function ffdv_filtered_colour_defaults( $col_defaults ) {

    $col_defaults['background_color'] = 'var(--base)';
	$col_defaults['text_color'] = 'var(--grey)';
	$col_defaults['link_color'] = 'var(--grey)';
	$col_defaults['link_color_hover'] = 'var(--grey-3)';
	$col_defaults['link_color_visited'] = 'var(--grey)';
	
	return $col_defaults;

}

// FFDV Generate extended default GP colour options for customizer
add_filter( 'generate_color_option_defaults', 'ffdv_ext_filtered_colour_defaults' );
add_filter( 'option_generate_settings', 'ffdv_ext_filtered_colour_defaults' );
function ffdv_ext_filtered_colour_defaults( $ext_col_defaults ) {
	
	$ext_col_defaults['top_bar_background_color'] = '';
    $ext_col_defaults['top_bar_text_color'] = '';
    $ext_col_defaults['top_bar_link_color'] = '';
    $ext_col_defaults['top_bar_link_color_hover'] = '';
    $ext_col_defaults['header_background_color'] = 'var(--base)';
    $ext_col_defaults['header_text_color'] = 'var(--blue)';
    $ext_col_defaults['header_link_color'] = 'var(--blue)';
    $ext_col_defaults['header_link_hover_color'] = 'var(--blue-2)';
    $ext_col_defaults['site_title_color'] = 'var(--grey)';
    $ext_col_defaults['site_tagline_color'] = 'var(--grey-3)';
    $ext_col_defaults['navigation_background_color'] = '';
    $ext_col_defaults['navigation_text_color'] = 'var(--blue)';
    $ext_col_defaults['navigation_background_hover_color'] = '';
    $ext_col_defaults['navigation_text_hover_color'] = 'var(--blue-2)';
    $ext_col_defaults['navigation_background_current_color'] = '';
    $ext_col_defaults['navigation_text_current_color'] = 'var(--green)';
    $ext_col_defaults['subnavigation_background_color'] = 'var(--grey-7)';
    $ext_col_defaults['subnavigation_text_color'] = 'var(--blue)';
    $ext_col_defaults['subnavigation_background_hover_color'] = 'var(--grey-5)';
    $ext_col_defaults['subnavigation_text_hover_color'] = 'var(--blue-2)';
    $ext_col_defaults['subnavigation_background_current_color'] = '';
    $ext_col_defaults['subnavigation_text_current_color'] = 'var(--green)';
    $ext_col_defaults['navigation_search_background_color'] = '';
    $ext_col_defaults['navigation_search_text_color'] = 'var(--blue)';
    $ext_col_defaults['content_background_color'] = '';
    $ext_col_defaults['content_text_color'] = 'var(--grey)';
    $ext_col_defaults['content_link_color'] = 'var(--grey)';
    $ext_col_defaults['content_link_hover_color'] = 'var(--grey-3)';
    $ext_col_defaults['content_title_color'] = 'var(--blue)';
    $ext_col_defaults['blog_post_title_color'] = 'var(--blue)';
    $ext_col_defaults['blog_post_title_hover_color'] = 'var(--blue-2)';
    $ext_col_defaults['entry_meta_text_color'] = 'var(--grey-3)';
    $ext_col_defaults['entry_meta_link_color'] = 'var(--grey-3)';
    $ext_col_defaults['entry_meta_link_color_hover'] = 'var(--grey-5)';
    $ext_col_defaults['h1_color'] = 'var(--blue)';
    $ext_col_defaults['h2_color'] = 'var(--blue)';
    $ext_col_defaults['h3_color'] = 'var(--blue)';
    $ext_col_defaults['h4_color'] = 'var(--blue)';
    $ext_col_defaults['h5_color'] = 'var(--blue)';
    $ext_col_defaults['h6_color'] = 'var(--blue)';
    $ext_col_defaults['sidebar_widget_background_color'] = 'var(--grey-7)';
    $ext_col_defaults['sidebar_widget_text_color'] = 'var(--grey)';
    $ext_col_defaults['sidebar_widget_link_color'] = 'var(--grey)';
    $ext_col_defaults['sidebar_widget_link_hover_color'] = 'var(--grey-3)';
    $ext_col_defaults['sidebar_widget_title_color'] = 'var(--blue)';
    $ext_col_defaults['footer_widget_background_color'] = 'var(--grey-7)';
    $ext_col_defaults['footer_widget_text_color'] = 'var(--grey)';
    $ext_col_defaults['footer_widget_link_color'] = 'var(--grey)';
    $ext_col_defaults['footer_widget_link_hover_color'] = 'var(--grey-3)';
    $ext_col_defaults['footer_widget_title_color'] = 'var(--blue)';	
    $ext_col_defaults['footer_background_color'] = 'var(--base)';
    $ext_col_defaults['footer_text_color'] = 'var(--grey-3)';
    $ext_col_defaults['footer_link_color'] = 'var(--grey-3)';
    $ext_col_defaults['footer_link_hover_color'] = 'var(--grey-4)';	
    $ext_col_defaults['form_background_color'] = 'var(--base)';
    $ext_col_defaults['form_text_color'] = 'var(--grey)';
    $ext_col_defaults['form_background_color_focus'] = '';
    $ext_col_defaults['form_text_color_focus'] = 'var(--grey)';
    $ext_col_defaults['form_border_color'] = 'var(--grey-5)';
    $ext_col_defaults['form_border_color_focus'] = 'var(--grey-4)';
    $ext_col_defaults['form_button_background_color'] = 'var(--blue)';
    $ext_col_defaults['form_button_background_color_hover'] = 'var(--blue-2)';
    $ext_col_defaults['form_button_text_color'] = 'var(--base)';
    $ext_col_defaults['form_button_text_color_hover'] = 'var(--base)';
    $ext_col_defaults['back_to_top_background_color'] = 'var(--blue)';
    $ext_col_defaults['back_to_top_background_color_hover'] = 'var(--blue-2)';
    $ext_col_defaults['back_to_top_text_color'] = 'var(--base)';
    $ext_col_defaults['back_to_top_text_color_hover'] = 'var(--base)';
	
    return $ext_col_defaults;

}

As mentioned, it's updating the site preview and customizer, but not the front end. I've used it in previous builds with no issues. Thanks!

I just tested the code, it works properly on my end, I'm using GP 3.2.4 and GP premium 2.2.1.

I don't think the code has any issues.

Can you try disabling all other plugins and custom functions to test?

Will do, and I'll report back, thanks!

Keep us updated :)

Hi Ying, I disabled everything except GP and my child thene containing this code and have the same issue... The colours update in the customizer preview but not on the front end. Would it still lbe beneficial for me to upload the site to a test domain for you? Thanks!

Yes, if you can create a staging site for us, that'll be very helpful.

Let me know!

Sorry about the delay Ying... private info attached to the post. Just to recap, changing the colour variables in functions.php normally updates the customizer and the front end, but they are only updating in the customizer. I use this method on a few sites without any issues and have ruled out plugin conflicts or caching. I'm considering maybe a conflict between GP and the lastest version of WP? Thanks!

Hi David,

Can you let me know which colour on which page (front end) doesn't work correctly?

Hi Ying, I've tried various ones. For example:

header_background_color: I set to blue-3 and it updates in the customizer but not on the front end.
same for footer_background_color and most other options I've tried.
Simple example would be to get these to load on the home page.

It's as if the front end is not reading the customizer before loading.

Thanks!

Did you change the colors in the customizer or in the code?

In the code, and the customizer normally reads the code and updates the front end immediately on refresh.