The "Kirki Box Shadow" control

Premium Kirki Control

Buy License

Returnsarray

This is a premium control. You can use in your premium theme by purchasing a license.

Buy License

box-shadow control example

The Kirki Box shadow control is an advanced control for the WordPress Customizer and can be used as an add-on for the Kirki Toolkit. It introduces a new custom control to the WordPress Customizer using the Kirki API. You can use this control one of 2 ways:

  1. Using the default WordPress Customizer API
  2. As an addon to Kirki.

Usage

When embedding this control in your theme, you will need to include its file and also add a filter to properly modify the URL for the scripts and styles this addon uses:

require_once get_template_directory() . '/inc/kirki-box-shadow/kirki-box-shadow.php';
/**
 * Modify the URL for assets in our custom control.
 *
 * @return string
 */
function my_theme_kirki_kirki_box_shadow_control_url() {
	return get_template_directory_uri() . '/inc/kirki-box-shadow';
}
add_filter( 'kirki_box_shadow_control_url', 'my_theme_kirki_kirki_box_shadow_control_url' );

Adding a control.

Using the Native WordPress Customizer API:

If you want to use the WordPress Customizer API, then you can add your control like this:

/**
 * Add section, settings and controls.
 *
 * @param WP_Customize_Manager $wp_customize The WordPress Customizer object.
 * @return void
 */
function my_theme_example_kirki_box_control( $wp_customize ) {

	// Add a section.
	$wp_customize->add_section( 'my_section', [
		'title'    => esc_html__( 'My Section', 'kirki' ),
	] );

	// Add setting.
	$wp_customize->add_setting( 'my_setting', [
		'default' => '0px 0px 0px 0px #000000',
	] );

	// Add control.
	$wp_customize->add_control( new Kirki_Box_Shadow_Control( $wp_customize, 'my_setting', [
		'label'       => esc_html__( 'Box Shadow Control', 'kirki' ),
		'description' => esc_html__( 'Box-Shadow Options.', 'kirki' ),
		'type'        => 'kirki-box-shadow',
		'section'     => 'my_section',
	] ) );
}
add_action( 'customize_register', 'my_theme_example_kirki_box_control' );

Using the Kirki API:

The above code can be written using the Kirki API like this:

// Add Kirki Config.
Kirki::add_config( 'my_theme', [
	'capability'  => 'edit_theme_options',
	'option_type' => 'theme_mod',
] );

Kirki::add_section( 'my_section', [
	'title' => esc_html__( 'My Section', 'kirki' ),
] );

Kirki::add_field( 'my_theme', [
	'settings'    => 'my_setting',
	'label'       => esc_html__( 'Box Shadow Control', 'kirki' ),
	'description' => esc_html__( 'Box-Shadow Options.', 'kirki' ),
	'type'        => 'kirki-box-shadow',
	'section'     => 'my_section',
	'default'     => '0px 0px 0px 0px #000000',
] );

In the above examples We add a my_section section and inside that section a box-shadow control on the my_setting setting.

Arguments

The control accepts the same arguments as any other control.

Return value

The value returned is a the compilation of all controls and is formatted as a string that can be used directly as the CSS value.

Use with Kirki

If you use this control with the Kirki Toolkit, then you can take advantage of Kirki’s automatic CSS-generation and postMessage scripts.

To make this control affect a #my-element element on our page with live-updating in the customizer and automatic CSS generation on the frontend, you can simply add the transport and output arguments, so the above example would become like this:

Kirki::add_field( 'my_theme', [
	'settings'    => 'my_setting',
	'label'       => esc_html__( 'Box Shadow Control', 'kirki' ),
	'description' => esc_html__( 'Box-Shadow Options.', 'kirki' ),
	'type'        => 'kirki-box-shadow',
	'section'     => 'my_section',
	'default'     => '0px 0px 0px 0px #000000',
	'transport'   => 'auto',
	'output'      => [
		[
			'element'  => '#my-element',
			'property' => 'box-shadow',
		],
	],
] );

Licensing

Buy License

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