It’s been a while since I’ve shared any new control from O2 – WordPress Customizer library. I’ve started to work on it again to extend and add more controls.

Recently I added a Color Palette control which allows to pick a color palette/scheme for your website. It’s a select list instead of a drop down list.

You can find it in O2 library here. It’s a part of the library so you will have to download the entire library. Feel free to delete other controls if you’re not using them.

Place /o2/ folder in your theme (in the /inc/ directory, for example), and include it by adding the following code:

define( 'O2_DIRECTORY', get_template_directory() . '/inc/o2/' );
define( 'O2_DIRECTORY_URI', get_template_directory_uri() . '/inc/o2/' );
require get_template_directory() . '/inc/o2/controls/color-palette/color-palette-control.php';

First you need to define directory and directory URI of the /o2/ folder after that you need to include color-palette-control.php file.

And that’s all you need to do.

You can add it to your customizer like this:

$wp_customize->add_setting( 'o2_color_palette', array(
	'default' => 'green',
	'capability' => 'edit_theme_options'
));
	
$wp_customize->add_control(new O2_Customizer_Color_Palette_Control($wp_customize, 'o2_color_palette', array(
	'label' => __('Color Scheme', 'textdomain'),
	'description' => __('Choose a color scheme for your website.', 'textdomain'),
	'section' => 'colors',
	'choices' => array (
		'green' => array(
			'label' => 'Green',
			'colors' => array( '#bbdb9b', '#abc4a1', '#9db4ab', '#8d9d90', '#878e76' )
		),
		'purple' => array(
			'label' => 'Purple',
			'colors' => array( '#29274c', '#7e52a0', '#d295bf', '#e6bccd' )
		),
		'slate' => array(
			'label' => 'Slate',
			'colors' => array( '#b9bbbb', '#a2a3bb', '#5e5f87', '#b3b7ee', '#fbf9ff' )
		)
	),
	'priority' => 5,
	'settings' => 'o2_color_palette'
)));

That will do the work. You can add more arrays as your color schemes, and if you need help you can generate beautiful color palettes from coolors.co.