Launch Offer – Kirki PRO is now available! 🚀Get it while it lasts!

Palette

Palette controls are essentially Radio controls. The difference between palette controls and radio controls is purely visual. Palette controls allow you to define an array of colors for each option presented to the user.

Example

new \Kirki\Field\Palette(
	array(
		'settings' => 'palette_setting',
		'label'    => esc_html__( 'Palette Control', 'kirki' ),
		'section'  => 'section_id',
		'default'  => 'green',
		'choices'  => array(
			'a200'  => Kirki_Helper::get_material_design_colors( 'A200' ),
			'blue'  => Kirki_Helper::get_material_design_colors( 'blue' ),
			'green' => [ '#E8F5E9', '#C8E6C9', '#A5D6A7', '#81C784', '#66BB6A', '#4CAF50', '#43A047', '#388E3C', '#2E7D32', '#1B5E20', '#B9F6CA', '#69F0AE', '#00E676', '#00C853' ],
			'bw'    => [ '#000000', '#ffffff' ],
		),
	)
);

Usage

<?php
$saved_palette = get_theme_mod( 'palette_setting', 'green' );
if ( 'green' == $saved_palette ) {
	$background   = '#E8F5E9';
	$text_color   = '#C8E6C9';
} else if ( 'bw' == $saved_palette ) {
	$background   = '#000000';
	$text_color   = '#ffffff';
}
$styles = "background-color:{$background}; color:{$text_color};";
?>
<div style="<?php echo esc_attr( $styles ); ?>">
	Some text here.
</div>

Last updated on: January 26th, 2022

Scroll to Top

Download

Subscribe & be the first to be informed about
new features & updates!