Tabs

Tabs are a great tool to categorize your customizer controls. A great use case for tabs would be to split layout or general options from design options as seen on the screenshot below.

Kirki Tabs

Example

Tabs are declared when registering sections. In the example below, we declare 2 tabs – General & Design – for the fictive “Site Structure” section.

new \Kirki\Section(
	'section_id',
	[
		'title' => esc_html__( 'Site Structure', 'kirki-pro' ),
		'panel' => 'panel_id',
		'tabs'  => [
			'general' => [
				'label' => esc_html__( 'General', 'kirki-pro' ),
			],
			'design'  => [
				'label' => esc_html__( 'Design', 'kirki-pro' ),
			],
		],
	]
);

Now, when registering controls, you will want to pass the tab argument to assign the control to the respective tabs.

new \Kirki\Field\Text(
	[
		'settings' => 'text_control',
		'label'    => esc_html__( 'Text', 'kirki-pro' ),
		'section'  => 'section_id',
		'tab'      => 'general',
	]
);

new \Kirki\Field\Slider(
	[
		'settings'    => 'slider_control',
		'label'       => esc_html__( 'Slider', 'kirki-pro' ),
		'section'     => 'section_id',
		'tab'         => 'design',
		'default'     => 1.5,
		'choices'     => [
			'min'  => 0,
			'max'  => 3,
			'step' => 0.5,
		],
	]
);

Was this helpful?