Switch branches/tags
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Alpha Color Picker Customizer Control

Ever wanted to pick an RGBa color using the WordPress color picker in the Customizer? Now you can with this drop-in replacement for the stock WP color picker control.

Here's what it looks like:

WordPress Alpha Color Picker

A jQuery plugin version of this alpha color picker that can be used in the admin outside of the Customizer can be found here.


The control includes a CSS file and a JS file that have urls defined in a wp_enqueue_scripts call in alpha-color-picker.php that you'll probably want to update based on where you put the alpha-color-picker folder. The default urls are:

get_stylesheet_directory_uri() . '/admin/customizer/alpha-color-picker/alpha-color-picker.js'
get_stylesheet_directory_uri() . '/admin/customizer/alpha-color-picker/alpha-color-picker.css'

If you use this in a plugin, you'd use something like plugin_dir_url(), and update the path to the files.

With the right urls for the CSS and JS in place, drop this in your theme or plugin's functions.php file:

add_action( 'customize_register', 'xxx_customize_register' );
function xxx_customize_register( $wp_customize ) {

	// Inlcude the Alpha Color Picker control file.
	require_once( dirname( __FILE__ ) . '/alpha-color-picker/alpha-color-picker.php' );

	// Alpha Color Picker setting.
			'default'     => 'rgba(209,0,55,0.7)',
			'type'        => 'theme_mod',
			'capability'  => 'edit_theme_options',
			'transport'   => 'postMessage'

	// Alpha Color Picker control.
		new Customize_Alpha_Color_Control(
				'label'         => __( 'Alpha Color Picker', 'yourtextdomain' ),
				'section'       => 'colors',
				'settings'      => 'alpha_color_setting',
				'show_opacity'  => true, // Optional.
				'palette'	=> array(
					'rgb(150, 50, 220)', // RGB, RGBa, and hex values supported
					'rgba( 255, 255, 255, 0.2 )', // Different spacing = no problem
					'#00CC99' // Mix of color types = no problem

More Information

I wrote a post with more detailed usage information on my blog.

Feedback and pull requests are encouraged!


This control is licensed under the GPL. Please do anything you want with it. :)