WordPress Customizer Dimension Control

Learn how to create a dimension control using the Kirki Customizer Framework.

Back to Controls


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.


Kirki::add_field( 'theme_config_id', [
	'type'        => 'dimension',
	'settings'    => 'dimension_setting',
	'label'       => esc_html__( 'Dimension Control', 'kirki' ),
	'description' => esc_html__( 'Description Here.', 'kirki' ),
	'section'     => 'section_id',
	'default'     => '10px',
] );

dimension control example


<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>

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