How to Add Color Picker Palette in WordPress Customizer

WordPress Customizer comes with the default Colors option section, and if you want to add a new color picker palette into this section or in the new section as a separate option, then here I will explain to you both.

Add WordPress Customizer Color Picker in the New Section

Add this code into your theme’s functions.php file or in a separate theme options specific file.

//=========================================================
// Add New Colors Section : DIWP Colors
//=========================================================

function diwp_customizer_add_colorPicker( $wp_customize){
	
    // Add New Section: DIWP Colors
 
    $wp_customize->add_section( 'diwp_color_section', array(
                     'title' => 'DIWP Colors',
                     'description' => 'Set Colors For Background & Links',
                     'priority' => '40'                   
    ));

    // Add Settings 
    $wp_customize->add_setting( 'diwp_theme_color', array(
		'default' => '#04bfbf',
    ));


    $wp_customize->add_setting( 'diwp_header_bgcolor', array(
		'default' => '#45ace0',						
    ));


    // Add Controls
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'diwp_theme_color', array(
		'label' => 'Theme Color',
		'section' => 'diwp_color_section',
		'settings' => 'diwp_theme_color'

    )));


    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'diwp_header_bgcolor', array(
		'label' => 'Header Background',
		'section' => 'diwp_color_section',
		'settings' => 'diwp_header_bgcolor'
    )));

}

add_action( 'customize_register', 'diwp_customizer_add_colorPicker' );

The above code will add a new section in the WordPress customizer as DIWP Colors as shown in the image below and inside this section, it will have options to set the color for header background and theme.

Add Color Picker Options in Default Customizer Colors Section

To add a color picker into the existing colors section of the customizer, you don’t need to create a section, all you need to do is, just use the id of the existing colors section and pass it as the section value for all your color picker control. The ID for the default colors section is ‘colors’. eg: ‘section’ => ‘colors’.

Add this code to your theme’s functions.php file or theme options specific file, and this will add the new color picker options with the existing Colors section.

//====================================================================
// Add New Color Option in Existing Colors Section in Customizer
//====================================================================

function diwp_customizer_add_colorPicker( $wp_customize){
	
    // Add Settings 

	
    // Add Settings 
    $wp_customize->add_setting( 'diwp_theme_color', array(
		'default' => '#04bfbf',
    ));


    $wp_customize->add_setting( 'diwp_header_bgcolor', array(
		'default' => '#45ace0',						
    ));


    // Add Controls
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'diwp_theme_color', array(
		'label' => 'Theme Color',
		'section' => 'colors',
		'settings' => 'diwp_theme_color'

    )));


    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'diwp_header_bgcolor', array(
		'label' => 'Header Background',
		'section' => 'colors',
		'settings' => 'diwp_header_bgcolor'
    )));

}

add_action( 'customize_register', 'diwp_customizer_add_colorPicker' );

Display Changes or Generate CSS With Customizer Color Picker Options

To display the changes with these colors, I will find & target the CSS classes for header background, and other elements in my site. So in my case the classes are:

.site-header, a:hover, .search-form .search-submit, .entry-title a:hover, .entry-title a:focus, .entry-title a:active, .page-title a:hover, .page-title a:focus, .page-title a:active

These are the classes for which I want to set the color dynamically. So I will use these classes again to generate CSS with the customizer.

Again add this code in your theme’s functions.php file or in theme option specific file.


function diwp_generate_theme_option_css(){

    $themeColor = get_theme_mod('diwp_theme_color');
    $header_bgcolor = get_theme_mod('diwp_header_bgcolor');

    if(!empty($themeColor)):
    
    ?>
	<style type="text/css" id="diwp-theme-option-css">
		
		.site-header{
			background:<?php echo $header_bgcolor; ?>;
		}

		a:hover{
			color: <?php echo $themeColor; ?>
		}		

		.search-form .search-submit{
			background: <?php echo $themeColor; ?>
		}

		.entry-title a:hover, .entry-title a:focus, .entry-title a:active, .page-title a:hover, .page-title a:focus, .page-title a:active {
			color: <?php echo $themeColor; ?>;
		}
	
	</style>	

    <?php

    endif;	
}

add_action( 'wp_head', 'diwp_generate_theme_option_css' );

Owner of diveinwp.com, solely responsible for creating helpful, informative content about WordPress, a fulltime WordPress developer with 8+ years of hands-on experience in WordPress design and development.