The "dimensions" control

Learn how to create controls using Kirki

Back to Controls

Returnsarray

Can't find what you're looking for? Check the github issues or edit this page to add what's missing.

The dimensions control allows you to control multiple dimensions on the same control. You can define the properties it will use in the field’s default argument.

Examples:

Controlling the width and height:

Kirki::add_field( 'theme_config_id', [
	'type'        => 'dimensions',
	'settings'    => 'my_setting',
	'label'       => esc_html__( 'Dimension Control', 'kirki' ),
	'description' => esc_html__( 'Description Here.', 'kirki' ),
	'section'     => 'my_section',
	'default'     => [
		'width'  => '100px',
		'height' => '100px',
	],
] );

Controlling the padding:

Kirki::add_field( 'theme_config_id', [
	'type'        => 'dimensions',
	'settings'    => 'my_setting',
	'label'       => esc_html__( 'Dimension Control', 'kirki' ),
	'description' => esc_html__( 'Description Here.', 'kirki' ),
	'section'     => 'my_section',
	'default'     => [
		'padding-top'    => '1em',
		'padding-bottom' => '10rem',
		'padding-left'   => '1vh',
		'padding-right'  => '10px',
	],
] );

You can use any dimensions and define the labels using a snippet like this:

Kirki::add_field( 'theme_config_id', [
	'type'        => 'dimensions',
	'settings'    => 'my_setting',
	'label'       => esc_html__( 'Dimension Control', 'kirki' ),
	'description' => esc_html__( 'Description Here.', 'kirki' ),
	'section'     => 'my_section',
	'default'     => [
		'min-width'  => '100px',
		'max-width'  => '500px',
		'min-height' => '50px',
		'max-height' => '10em',
	],
	'choices'     => [
		'labels' => [
			'min-width'  => esc_html__( 'Min Width', 'my-theme' ),
			'max-width'  => esc_html__( 'Max Width', 'my-theme' ),
			'min-height' => esc_html__( 'Min Height', 'my-theme' ),
			'max-height' => esc_html__( 'Max Height', 'my-theme' ),
		],
	],
] );
Edit this page