The "dimension" control

Learn how to create controls using Kirki

Back to Controls

Returnsstring

The documentation site is currently being rewritten. If you can't find what you're looking for please check the github issues and ask for assistance there until the documentation rewrite is complete.

The dimension control allows you create an input where users can enter any valid dimension CSS value. It automatically detects invalid values and notifies the user when that happens.

Example:

Kirki::add_field( 'theme_config_id', array(
	'type'        => 'dimension',
	'settings'    => 'dimension_setting',
	'label'       => esc_attr__( 'Dimension Control', 'textdomain' ),
	'description' => esc_attr__( 'Description Here.', 'textdomain' ),
	'section'     => 'section_id',
	'default'     => '10px',
) );

dimension control example

Usage

<div style="font-size: <?php echo get_theme_mod( 'dimension_setting', '1em' ); ?>">
	<p>The font-size of this paragraph is controlled by "dimension_setting".</p>
</div>
Edit this page