alpha color picker demo

acp_d.php

<?php

/**
 * A custom control for picking a color with alpha trans.
 *
 * @see https://github.com/BraadMartin/components/tree/master/customizer/alpha-color-picker
 * @see http://braadmartin.com/alpha-color-picker-control-for-the-wordpress-customizer/
 * 
 * @package WordPress
 * @subpackage lxb-apple-fritter
 * @since lxb-apple-fritter 0.1
 */

/**
 * Add our custom controls.
 */
if( class_exists( 'WP_Customize_Control' ) ) {

	class LXB_AF_Alpha_Color_Picker extends WP_Customize_Control {

		/**
		* Official control name.
		*/
		public $type = 'alpha-color';

		/**
		* Enqueue scripts and styles.
		*/
		public function enqueue() {
		
			// The JS for the color picker.
			wp_enqueue_script(
				'alpha-color-picker-js',
				LXB_AF_URL . 'lib/alpha-color-picker/alpha_color_picker.js',
				array( 'jquery', 'wp-color-picker' ),
				LXB_AF_VERSION,
				TRUE
			);
		
			// The CSS for the color picker.
			wp_enqueue_style(
				'alpha-color-picker-css',
				LXB_AF_URL . 'lib/alpha-color-picker/alpha_color_picker.css',
				array( 'wp-color-picker' ),
				LXB_AF_VERSION
			);
		
		}
		
		/**
		* Render the control.
		*/
		public function render_content() {
			
			$out = '';

			// The label for this control.
			$label = esc_html( $this -> label );
			$out  .= "<span class='customize-control-title'>$label</span>";

			// The description for this control.
			$description = esc_html( $this -> description );
			$out        .= "<span class='description customize-control-description'>$description</span>";
	
			// Start an OB to grab the value for this field.
			ob_start();
			$this -> link();
			$link = ob_get_clean();

			$out .= "<input class='alpha-color-control' type='text' data-show-opacity='true' data-palette='false' data-default-color='' $link />";
				
			echo $out;

		}

	}

}