How to set a default color for the WordPress Customizer’s color picker?

Question

I'm developing a WordPress theme in which I'm adding a color control to the Customizer’s “Colors” section, so that the user can customize the footer’s background color.

I added a functioning color picker to the Customizer, but I can’t get the color picker to show a “Default” color and button.

I assigned a hex color value to the ‘default’ parameter in the Customizer setting associated with my color control, assuming this would be the default color for this control, but it just doesn’t work.

Instead of the “Default” button, my color picker shows a “Clear” button that clears the color input but doesn’t reset it to a default color.

My question is: How can I get the Customizer’s color picker to show a “Default” button instead of the "Clear" button?

Here’s the custom function I added to my theme’s customizer.php file:

function mytheme_customize_register( $wp_customize ) {

    $wp_customize->add_setting( 'footer_color',
      array(
            'default' => '#000000',
            'transport' => 'refresh', 
            'sanitize_callback' => 'sanitize_hex_color',
      )
    );

    $wp_customize->add_control( 'footer_color',
      array(
            'label' => __( 'Footer Color', 'textdomain' ),
            'section' => 'colors',
            'type' => 'color',
            'capability' => 'edit_theme_options',
      )
    );
}
add_action( 'customize_register', 'mytheme_customize_register' );

And here's what the resulting color picker looks like. (Instead of the “Default” button, my color picker shows a “Clear” button that clears the color input but doesn’t reset it to a default color):

Answer 1

I was actually able to get this to work with the help of kind developers on the WordPress.org forum, and I will post the answer to my question here to benefit anyone who has the same problem.

It is best to use the WP core functionality if it exists, which is the case for color controls, and to create an instance of the core WP_Customize_Color_Control class.

Here's the corrected code:

function mytheme_customize_register( $wp_customize ) {

    $wp_customize->add_setting( 'footer_color',
    array(
        'default' => '#000000',
        'transport' => 'refresh',
        'sanitize_callback' => 'sanitize_hex_color',
    )
    );

    $wp_customize->add_control(
        new WP_Customize_Color_Control(
        $wp_customize,
        'footer_color',
        array(
          'label' => __( 'Footer Color', 'textdomain' ),
          'section' => 'colors',
          'capability' => 'edit_theme_options',
          )
        )
    );

}
add_action( 'customize_register', 'mytheme_customize_register' );