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.
Thanks, just wondering if there is any benefits to using to_json() and content_template() functions instead of render_content() in the control class? I converted the render_content() to an underscores JS template as I was already using the content_template() method for some other controls:
$wp_customize->register_control_type( ‘O2_Customizer_Color_Palette_Control’ );
public function to_json() {
parent::to_json();
$this->json[‘choices’] = $this->choices;
$this->json[‘link’] = $this->get_link();
$this->json[‘value’] = $this->value();
$this->json[‘id’] = $this->id;
}
protected function content_template() { ?>
{{ data.label }}
{{{ data.description }}}
<input type="radio" value="{{ key }}" name="{{ data.id }}" id="{{ data.id }}_{{ key }}" {{{ data.link }}} checked=”checked” />
{{ data.choices[ key ][‘label’] }}
<?php }
and then in the javascript file:
wp.customize.controlConstructor['o2-color-palette'] = wp.customize.Control.extend({
ready: function() {
var control = this;
var value = (undefined !== control.setting._value) ? control.setting._value : '';
this.container.on( 'change', 'input:radio', function() {
value = jQuery( this ).val();
control.setting.set( value );
// refresh the preview
wp.customize.previewer.refresh();
});
}
});