WP Customizer – Color Picker
January 10, 2023
In functions.php
add
Register color picker in customizer
//Customize Appearance Options
function custom_colorpicker_register( $wp_customize ) {
// Add Setting
$wp_customize->add_setting('link_color', array(
'default' => '#ff9900',
'transport' => 'refresh',
));
$wp_customize->add_setting('btn_color', array(
'default' => '#ff0000',
'transport' => 'refresh',
));
$wp_customize->add_setting('btn_hover_color', array(
'default' => '#00ff00',
'transport' => 'refresh',
));
// Add Section
$wp_customize->add_section('standard_colors', array(
'title' => __('Standard Colors', 'ColorPickerOptions'),
'priority' => 30,
));
// Add Settings to Section
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'link_color_control', array(
'label' => __('Link Color', 'ColorPickerOptions'),
'section' => 'standard_colors',
'settings' => 'link_color',
) ) );
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'btn_color_control', array(
'label' => __('Button Color', 'ColorPickerOptions'),
'section' => 'standard_colors',
'settings' => 'btn_color',
) ) );
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'btn_hover_color_control', array(
'label' => __('Button Hover Color', 'ColorPickerOptions'),
'section' => 'standard_colors',
'settings' => 'btn_hover_color',
) ) );
}
add_action('customize_register', 'custom_colorpicker_register');
Change values related to color picker
<?php
// Output Customize CSS
function custom_colorpicker_css() {
?>
<style type="text/css">
a{
color: <?php echo get_theme_mod('link_color'); ?>;
}
button {
background-color: <?php echo get_theme_mod('btn_color'); ?>;
}
button:hover {
background-color: <?php echo get_theme_mod('btn_hover_color'); ?>;
}
</style>
<?php }
add_action('wp_head', 'custom_colorpicker_css');
?>