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

admin管理员组

文章数量:1291135

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):

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):

• theme-customizer
• color-picker

Share Improve this question asked Jun 1, 2021 at 14:49 crispycrispy 2144 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

I was actually able to get this to work with the help of kind developers on the WordPress 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' );

本文标签： How to set a default color for the WordPress Customizer’s color picker