Issues with Customizer custom controls

Hey George,

transport requires javascript to be added within the Customizer to change the color without refreshing: https://codex.wordpress.org/Theme_Customization_API#Step_2:_Create_a_JavaScript_File

For #2, do the options have defaults set on the front-end? If the default is in the Customizer and doesn't change, WordPress won't save it to the database.

wp_parse_args can be useful here to set defaults on the front-end: https://github.com/tomusborne/generatepress/blob/release/3.1.0/inc/theme-functions.php#L27-L30

2. Yes, I have a default hex value set. I understand that the wp_parse_args merges user-defined arguments into defaults array but I am not sure what exactly I need to merge in there. Where will the value come from if I don't set it as a default?

You would do something like this:

function my_defaults() {
    return array(
        'my_option' => true,
        'my_color' => '#ffffff',
    );
}

Then in your Customizer control, you would do this:

$defaults = my_defaults();

$wp_customize->add_setting(
    'gp_comment_color',
    array(
        'default' => $defaults['my_color'],
        'sanitize_callback' => 'generate_sanitize_hex_color',
        'transport' => 'refresh',
    )
);

Then on the front-end you'd do this:

$defaults = my_defaults();

$options = wp_parse_args(
    get_option( 'your_settings', array() ),
    $defaults
);

echo $options['my_color'];

Changing color from the Customizer doesn't seem to be doing anything apart from refreshing. Does the add_control method stay the same?

Eg:

$wp_customize->add_control(
    new WP_Customize_Color_Control(
        $wp_customize,
        'gp_comment_color',
        array(
            'label' => __( 'Base Color', 'generatepress' ),
            'section' => 'gp_comment_section',
            'settings' => 'gp_comment_color',
        )
    )
);

Your settings is set as gp_comment_color. If it were me, I'd serialize things:

my_options[gp_comment_color]

For example: https://github.com/tomusborne/generatepress/blob/master/inc/customizer.php#L238-L258

Now all of your options will save within the same option instead of having a ton of different ones.

Right now, you'd have to do this:

$option = get_option( 'gp_comment_color', '#default-color' );

Sorry Tom, I am a bit lost. Let's reduce it down to one element. Let's say I want to apply an extra border-color somewhere in the Customizer for a particular blog element. I am adding a setting and control to the existing Colors -> Body Customizer section. Here is what I have now:

// Extra Customizer color settings
function my_defaults() {
    return array(
        'my_option' => true,
        'my_color' => '#ff6100',
    );
}

function gp_customize_color( $wp_customize) {

    $defaults = my_defaults();

	$wp_customize->add_setting(
	    'my_color[gp_blog_border_color]',
	    array(
	        'default' => $defaults['my_color'],
	        'sanitize_callback' => 'generate_sanitize_hex_color',
	        'transport' => 'refresh',
	    )
	);    
  

    $wp_customize->add_control(
            new WP_Customize_Color_Control(
                $wp_customize,
                'my_color[gp_blog_border_color]',
                array(
                    'priority' => 20,
                    'label' => __( 'Blog border color', 'generatepress' ),
                    'section' => 'body_section',
                    'settings' => 'my_color[gp_blog_border_color]',
                )
            )
    );           

}

add_action('customize_register', 'gp_customize_color');

//Output Customizer CSS
function gp_customize_css() {

			$defaults = my_defaults();

			$options = wp_parse_args(
			    get_option( 'gp_blog_border_color', 'array()' ),
			    $defaults
			);
	?>

    <style type="text/css">

        .blog-container {
        	border: 10px solid <?php echo $options['my_color']; ?> !important;
        }

}

    </style>
<?php }

add_action('wp_head', 'gp_customize_css');

This just puts the default color set in my_color. I can see the setting in the Customizer -> Colors -> Body but I am not able to change the color from the Customizer as when I do, the Customizer does an Ajax refresh but the color is not changed.

How does your last reply fit in with all this?

Your settings are setup incorrectly.

$wp_customize->add_setting(
    'my_color[gp_blog_border_color]',
    array(
        'default' => $defaults['my_color'],
        'sanitize_callback' => 'generate_sanitize_hex_color',
        'transport' => 'refresh',
    )
);

my_color is the database entry, and gp_blog_border_color is the name of an option inside of it.

So it should be this:

function my_defaults() {
    return array(
        'gp_blog_border_color' => '#ff6100', // Option name inside <code>my_color</code> database entry.
    );
}

$wp_customize->add_setting(
    'my_color[gp_blog_border_color]',
    array(
        'default' => $defaults['gp_blog_border_color'], // Using option name.
        'sanitize_callback' => 'generate_sanitize_hex_color',
        'transport' => 'refresh',
    )
);

$defaults = my_defaults();

$options = wp_parse_args(
    get_option( 'my_color', 'array()' ),
    $defaults
);

<?php echo $options['gp_blog_border_color']; ?>

I've adjusted accordingly, still facing the same issue, though.

// Extra Customizer color settings
function my_defaults() {
    return array(
        'gp_blog_border_color' => '#ff6100',
    );
}

function gp_customize_color( $wp_customize) {

	$wp_customize->add_setting(
	    'my_color[gp_blog_border_color]',
	    array(
	        'default' => $defaults['gp_blog_border_color'],
	        'sanitize_callback' => 'generate_sanitize_hex_color',
	        'transport' => 'refresh',
	    )
	);    
  

    $wp_customize->add_control(
            new WP_Customize_Color_Control(
                $wp_customize,
                'my_color[gp_blog_border_color]',
                array(
                    'priority' => 20,
                    'label' => __( 'Blog border color', 'generatepress' ),
                    'section' => 'body_section',
                    'settings' => 'my_color[gp_blog_border_color]',
                )
            )
    );           

}

add_action('customize_register', 'gp_customize_color');

//Output Customizer CSS
function gp_customize_css() { 

	$defaults = my_defaults();

	$options = wp_parse_args(
	    get_option( 'my_color', 'array()' ),
	    $defaults
	);

	?>

    <style type="text/css">

        .blog-container {
        	border: 10px solid <?php echo $options['gp_blog_border_color']; ?> !important;
        }

}

    </style>
<?php }

add_action('wp_head', 'gp_customize_css');

Is the option being saved into your database? Is there a my_color option in the wp_options table?

Seems like it. In the option_name column there is an entry named theme_mods_generatepress_child, with the following options_value entry:

a:23:{i:0;b:0;s:18:"nav_menu_locations";a:2:{s:7:"primary";i:2;s:8:"slideout";i:2;}s:18:"font_body_category";s:5:"serif";s:18:"font_body_variants";s:15:"400,500,600,700";s:18:"custom_css_post_id";i:242;s:11:"custom_logo";i:17;s:24:"font_navigation_category";s:0:"";s:24:"font_navigation_variants";s:0:"";s:18:"generate_copyright";s:32:"%copy% %current_year% Typograph|";s:16:"sidebars_widgets";a:2:{s:4:"time";i:1603904345;s:4:"data";a:12:{s:19:"wp_inactive_widgets";a:0:{}s:9:"sidebar-1";a:0:{}s:9:"sidebar-2";a:1:{i:0;s:6:"text-5";}s:6:"header";a:0:{}s:8:"footer-1";a:0:{}s:8:"footer-2";a:0:{}s:8:"footer-3";a:0:{}s:8:"footer-4";a:0:{}s:8:"footer-5";a:0:{}s:10:"footer-bar";a:1:{i:0;s:6:"text-4";}s:7:"top-bar";a:0:{}s:16:"slide-out-widget";a:0:{}}}s:38:"gp_comment_heading_bottom_border_color";s:7:"#ff4b4b";s:28:"gp_comment_reply_arrow_color";s:7:"#ff4b4b";s:16:"gp_comment_color";s:7:"#ff4b4b";s:35:"gp_body_link_background_color_hover";s:7:"#fcefe7";s:35:"gp_body_link_background_hover_color";s:7:"#fcefe7";s:30:"gp_background_link_color_hover";s:7:"#fcefe7";s:24:"gp_blog_box_shadow_color";s:7:"#fec445";s:39:"gp_blog_post_title_underine_hover_color";s:7:"#005d55";s:25:"gp_rundown_underine_color";s:0:"";s:26:"gp_rundown_underine_border";i:12;s:31:"gp_rundown_underline_link_color";s:7:"#ff4b4b";s:20:"gp_blog_border_color";s:7:"#0036a3";s:8:"my_color";a:1:{s:20:"gp_blog_border_color";s:7:"#00421b";}}

At the end, you see the color value that is saved. It's just not being displayed.

Aha, you're missing 'type' => 'option' in the add_setting function:

$wp_customize->add_setting(
    'my_color[gp_blog_border_color]',
    array(
        'type' => 'option',
        'default' => $defaults['gp_blog_border_color'],
        'sanitize_callback' => 'generate_sanitize_hex_color',
        'transport' => 'refresh',
    )
);

Aha, that was it!

I was wondering about something else. If I was to export my GP child theme to another GP install by copying the whole child theme folder and exporting all Customizer options from the GP settings, would the last color saved be the one that appears in the Customizer of the new site, or would I have to resave custom Customizer options again?

I am asking because during our conversation I was working on a test site but when I made those changes to the production site and visited the Customizer, the custom color options were blank even though they were visible on the front end and the Customizer preview.

The GP export option only exports GP-specific options - it won't export your options.

A plugin like this may be better if your case: https://wordpress.org/plugins/customizer-export-import/

Ok, no problem, thanks for all your help and patience, Tom!