WP_Customize_Color_Control

Customize Color Control class.


Description Description


Source Source

File: wp-includes/customize/class-wp-customize-color-control.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
	 * @uses 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.
	 */
	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 = '',
			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><span class="screen-reader-text">{{{ data.label }}}</span>
			<# if ( isHueSlider ) { #>
				<input class="color-picker-hue" type="text" data-type="hue" />
			<# } else { #>
				<input class="color-picker-hex" type="text" maxlength="7" placeholder="{{ defaultValue }}" {{ defaultValueAttr }} />
 			<# } #>
			</label>
		</div>
		<?php
	}
}

Top ↑

Changelog Changelog

Changelog
Version Description
3.4.0 Introduced.


Top ↑

Methods Methods

  • __construct — Constructor.
  • content_template — Render a JS template for the content of the color picker control.
  • enqueue — Enqueue scripts/styles for the color picker.
  • render_content — Don't render the control content from PHP, as it's rendered via JS on load.
  • to_json — Refresh the parameters passed to the JavaScript via JSON.

Top ↑

User Contributed Notes User Contributed Notes

  1. Skip to note content
    Contributed by chetansatasiya

    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.

    $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',
    	) ) 
    );
    

You must log in before being able to contribute a note or feedback.