Title: WP_Customize_Color_Control
Published: April 25, 2014
Last modified: May 20, 2026

---

# class WP_Customize_Color_Control {}

## In this article

 * [Description](https://developer.wordpress.org/reference/classes/wp_customize_color_control/?output_format=md#description)
    - [See also](https://developer.wordpress.org/reference/classes/wp_customize_color_control/?output_format=md#see-also)
 * [Methods](https://developer.wordpress.org/reference/classes/wp_customize_color_control/?output_format=md#methods)
 * [Source](https://developer.wordpress.org/reference/classes/wp_customize_color_control/?output_format=md#source)
 * [Related](https://developer.wordpress.org/reference/classes/wp_customize_color_control/?output_format=md#related)
 * [Changelog](https://developer.wordpress.org/reference/classes/wp_customize_color_control/?output_format=md#changelog)
 * [User Contributed Notes](https://developer.wordpress.org/reference/classes/wp_customize_color_control/?output_format=md#user-contributed-notes)

[ Back to top](https://developer.wordpress.org/reference/classes/wp_customize_color_control/?output_format=md#wp--skip-link--target)

Customize Color Control class.

## 󠀁[Description](https://developer.wordpress.org/reference/classes/wp_customize_color_control/?output_format=md#description)󠁿

### 󠀁[See also](https://developer.wordpress.org/reference/classes/wp_customize_color_control/?output_format=md#see-also)󠁿

 * [WP_Customize_Control](https://developer.wordpress.org/reference/classes/wp_customize_control/)

## 󠀁[Methods](https://developer.wordpress.org/reference/classes/wp_customize_color_control/?output_format=md#methods)󠁿

| Name | Description | 
| [WP_Customize_Color_Control::__construct](https://developer.wordpress.org/reference/classes/wp_customize_color_control/__construct/) | Constructor. | 
| [WP_Customize_Color_Control::content_template](https://developer.wordpress.org/reference/classes/wp_customize_color_control/content_template/) | Render a JS template for the content of the color picker control. | 
| [WP_Customize_Color_Control::enqueue](https://developer.wordpress.org/reference/classes/wp_customize_color_control/enqueue/) | Enqueue scripts/styles for the color picker. | 
| [WP_Customize_Color_Control::render_content](https://developer.wordpress.org/reference/classes/wp_customize_color_control/render_content/) | Don’t render the control content from PHP, as it’s rendered via JS on load. | 
| [WP_Customize_Color_Control::to_json](https://developer.wordpress.org/reference/classes/wp_customize_color_control/to_json/) | Refresh the parameters passed to the JavaScript via JSON. |

## 󠀁[Source](https://developer.wordpress.org/reference/classes/wp_customize_color_control/?output_format=md#source)󠁿

    ```php
    class WP_Customize_Color_Control extends WP_Customize_Control {
    	/**
    	 * Type.
    	 *
    	 * @var string
    	 */
    	public $type = 'color';

    	/**
    	 * Statuses.
    	 *
    	 * @var array
    	 */
    	public $statuses;

    	/**
    	 * Mode.
    	 *
    	 * @since 4.7.0
    	 * @var string
    	 */
    	public $mode = 'full';

    	/**
    	 * Constructor.
    	 *
    	 * @since 3.4.0
    	 *
    	 * @see WP_Customize_Control::__construct()
    	 *
    	 * @param WP_Customize_Manager $manager Customizer bootstrap instance.
    	 * @param string               $id      Control ID.
    	 * @param array                $args    Optional. Arguments to override class property defaults.
    	 *                                      See WP_Customize_Control::__construct() for information
    	 *                                      on accepted arguments. Default empty array.
    	 */
    	public function __construct( $manager, $id, $args = array() ) {
    		$this->statuses = array( '' => __( 'Default' ) );
    		parent::__construct( $manager, $id, $args );
    	}

    	/**
    	 * Enqueue scripts/styles for the color picker.
    	 *
    	 * @since 3.4.0
    	 */
    	public function enqueue() {
    		wp_enqueue_script( 'wp-color-picker' );
    		wp_enqueue_style( 'wp-color-picker' );
    	}

    	/**
    	 * Refresh the parameters passed to the JavaScript via JSON.
    	 *
    	 * @since 3.4.0
    	 * @uses WP_Customize_Control::to_json()
    	 */
    	public function to_json() {
    		parent::to_json();
    		$this->json['statuses']     = $this->statuses;
    		$this->json['defaultValue'] = $this->setting->default;
    		$this->json['mode']         = $this->mode;
    	}

    	/**
    	 * Don't render the control content from PHP, as it's rendered via JS on load.
    	 *
    	 * @since 3.4.0
    	 */
    	public function render_content() {}

    	/**
    	 * Render a JS template for the content of the color picker control.
    	 *
    	 * @since 4.1.0
    	 */
    	public function content_template() {
    		?>
    		<#
    		var defaultValue = '#RRGGBB',
    			defaultValueAttr = '',
    			inputId = _.uniqueId( 'customize-color-control-input-' ),
    			isHueSlider = data.mode === 'hue';

    		if ( data.defaultValue && _.isString( data.defaultValue ) && ! isHueSlider ) {
    			if ( '#' !== data.defaultValue.substring( 0, 1 ) ) {
    				defaultValue = '#' + data.defaultValue;
    			} else {
    				defaultValue = data.defaultValue;
    			}
    			defaultValueAttr = ' data-default-color=' + defaultValue; // Quotes added automatically.
    		}
    		#>
    		<# if ( data.label ) { #>
    			<span class="customize-control-title">{{{ data.label }}}</span>
    		<# } #>
    		<# if ( data.description ) { #>
    			<span class="description customize-control-description">{{{ data.description }}}</span>
    		<# } #>
    		<div class="customize-control-content">
    			<label for="{{ inputId }}"><span class="screen-reader-text">{{{ data.label }}}</span></label>
    			<# if ( isHueSlider ) { #>
    				<input id="{{ inputId }}" class="color-picker-hue" type="number" min="1" max="359" data-type="hue" />
    			<# } else { #>
    				<input id="{{ inputId }}" class="color-picker-hex" type="text" maxlength="7" placeholder="{{ defaultValue }}" {{ defaultValueAttr }} />
    			<# } #>
    		</div>
    		<?php
    	}
    }
    ```

[View all references](https://developer.wordpress.org/reference/files/wp-includes/customize/class-wp-customize-color-control.php/)
[View on Trac](https://core.trac.wordpress.org/browser/tags/7.0/src/wp-includes/customize/class-wp-customize-color-control.php#L17)
[View on GitHub](https://github.com/WordPress/wordpress-develop/blob/7.0/src/wp-includes/customize/class-wp-customize-color-control.php#L17-L126)

## 󠀁[Related](https://developer.wordpress.org/reference/classes/wp_customize_color_control/?output_format=md#related)󠁿

| Uses | Description | 
| [WP_Customize_Control](https://developer.wordpress.org/reference/classes/wp_customize_control/)`wp-includes/class-wp-customize-control.php` |

Customize Control class.

  |

## 󠀁[Changelog](https://developer.wordpress.org/reference/classes/wp_customize_color_control/?output_format=md#changelog)󠁿

| Version | Description | 
| [3.4.0](https://developer.wordpress.org/reference/since/3.4.0/) | Introduced. |

## 󠀁[User Contributed Notes](https://developer.wordpress.org/reference/classes/wp_customize_color_control/?output_format=md#user-contributed-notes)󠁿

 1.   [Skip to note 3 content](https://developer.wordpress.org/reference/classes/wp_customize_color_control/?output_format=md#comment-content-2034)
 2.    [Chetan Satasiya](https://profiles.wordpress.org/ketuchetan/)  [  9 years ago  ](https://developer.wordpress.org/reference/classes/wp_customize_color_control/#comment-2034)
 3.  [You must log in to vote on the helpfulness of this note](https://login.wordpress.org?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fclasses%2Fwp_customize_color_control%2F%23comment-2034)
     Vote results for this note: 0[You must log in to vote on the helpfulness of this note](https://login.wordpress.org?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fclasses%2Fwp_customize_color_control%2F%23comment-2034)
 4.  This class is used with the Theme Customization API to render the custom color
     selector control on the Theme Customizer in WordPress 3.4 or newer.
 5.      ```php
         $wp_customize->add_control( 
         	new WP_Customize_Color_Control( 
         	$wp_customize, 
         	'link_color', 
         	array(
         		'label'      => __( 'Header Color', 'mytheme' ),
         		'section'    => 'your_section_id',
         		'settings'   => 'your_setting_id',
         	) ) 
         );
         ```
     
 6.   [Log in to add feedback](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fclasses%2Fwp_customize_color_control%2F%3Freplytocom%3D2034%23feedback-editor-2034)
 7.   [Skip to note 4 content](https://developer.wordpress.org/reference/classes/wp_customize_color_control/?output_format=md#comment-content-5367)
 8.    [Mehedi Foysal](https://profiles.wordpress.org/mehedi890/)  [  5 years ago  ](https://developer.wordpress.org/reference/classes/wp_customize_color_control/#comment-5367)
 9.  [You must log in to vote on the helpfulness of this note](https://login.wordpress.org?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fclasses%2Fwp_customize_color_control%2F%23comment-5367)
     Vote results for this note: 0[You must log in to vote on the helpfulness of this note](https://login.wordpress.org?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fclasses%2Fwp_customize_color_control%2F%23comment-5367)
 10.     ```php
         $wp_customize->add_setting( 'button_color', array(
         	'capability'        => 'edit_theme_options',
         	'default'           => '',
         ) );
         $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'button_color',
         	array(
         		'label'    => __( 'Button Color', 'text-domain' ),
         		'section'  => 'color_settings',
         		'settings' => 'button_color',
         	)
         ));
         ```
     
 11.  [Log in to add feedback](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fclasses%2Fwp_customize_color_control%2F%3Freplytocom%3D5367%23feedback-editor-5367)

You must [log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fclasses%2Fwp_customize_color_control%2F)
before being able to contribute a note or feedback.