Are you a theme author? Checkout new Kirki Helpers for your themes, or start something new using our _s fork as a starting point!

spacing

returnsarray

Description

Improve this section

The functionality of spacing controls is similar to that of dimension controls: They allow you to add inputs that get sanitized as CSS dimensions (example: 10px, 3em, 48%, 90vh etc.). The difference between spacing and dimension controls is that spacing controls allow you to control the left/right/top/bottom spacing of an element, and they save their values as an array instead of a string.

Invalid values are not saved, and the preview refresh is only triggered once a valid value has been entered.


Examples

Improve this section
<?php
Kirki::add_field( 'my_config', array(
	'type'        => 'spacing',
	'settings'    => 'my_setting',
	'label'       => __( 'Spacing Control', 'my_textdomain' ),
	'section'     => 'my_section',
	'default'     => array(
		'top'    => '1.5em',
		'bottom' => '10px',
		'left'   => '40%',
		'right'  => '2rem',
	),
	'priority'    => 10,
) );
?>

You can disable a direction by removing its default value. So this for example would only show top & bottom controls:

<?php
Kirki::add_field( 'my_config', array(
	'type'        => 'spacing',
	'settings'    => 'my_setting',
	'label'       => __( 'Spacing Control', 'my_textdomain' ),
	'section'     => 'my_section',
	'priority'    => 10,
	'default'     => array(
		'top'    => '1.5em',
		'bottom' => '10px',
	),
) );
?>

Usage

Improve this section
Please note: in all our examples we're assuming you're using theme_mods. If in your Project's Configuration you've chosen to use options instead of theme_mods, then please refer to the Getting Values documentation.

Arguments

Argument Required Type Description
type yes string Set to spacing.
default yes array array of default values array( 'top' => '10px', 'bottom' => '1em', 'left' => '0', 'right' => '0' ). The default values also determine which of the elements will be displayed. If for example you only want to display top & bottom, then in the array of defaults only include top & bottom.
settings yes string The setting-name that will be used to identify this field.
section yes string Defines the section in which this field's control will be added.
label no string The title that will be displayed in the control.
description no string An optional description
priority no int You can use priority to change the order in which your controls are added inside a section. Defaults to 10.
variables no array If you're using a compiler you can use this to define the corresponding variable names. See variables documentation for more details.
tooltip no string Add a localized string to show an informative tooltip.
active_callback no string/array A callable function or method returning boolean (true/false) to define if the current field will be displayed or not. Overrides the required argument if one is defined.
sanitize_callback no string/array Not necessary since we already have a default sanitization callback in pace. If you want to override the default sanitization you can enter a callable function or method.
transport no string refresh or postMessage. defaults to refresh.
required no array Define field dependencies if you want to show or hide this field conditionally based on the values of other controls.
capability no string The capability required so that users can access this setting. This is automatically set by your configuration, and if none is defined in your config then falls-back to edit_theme_options. You can use this to override your config defaults on a per-field basis.
option_type no string theme_mod, option, user_meta. This option is set in your configuration but can be overridden on a per-field basis. See configuration documentation for more details.
option_name no string This option is set in your configuration but can be overridden on a per-field basis. See configuration documentation for more details.
output no array Define an array of elements & properties to auto-generate and apply the CSS to your frontend. See output documentation for more details.
js_vars no array Define an array of elements & properties to auto-generate and apply the necessary JS in order for postMessage to work. Requires that transport is set to postMessage.

The following docs are for Kirki 2.2.0 and above.