Enqueue UIkit components.

Enqueued components will be compiled into a single file. Refer to UIkit 2 to learn more about the available components.

When development mode is enabled, files changes will automatically be detected. This makes it very easy to style UIkit themes using LESS.

This function must be called in the ‘beans_uikit_enqueue_scripts’ action hook.

beans_uikit_enqueue_components( string|array $components, string $type = 'core', bool $autoload = true )

Return: (void)


$componentsstring|arraytrue-Name of the component(s) to include as an indexed array. The name(s) must be the UIkit component filename without the extention (e.g. 'grid'). Set to true load all components.
$typestringfalse'core'Type of UIkit components ('core' or 'add-ons').
$autoloadboolfalsetrueAutomatically include components dependencies.


function beans_uikit_enqueue_components( $components, $type = 'core', $autoload = true ) {

	global $_beans_uikit_enqueued_items;

	// Get all uikit components.
	if ( true === $components ) {

		$uikit = new _Beans_Uikit;
		$components = $uikit->get_all_components( $type );

	} elseif ( $autoload ) {

		$uikit = new _Beans_Uikit;
		$autoloads = $uikit->get_autoload_components( (array) $components );

		foreach ( $autoloads as $autotype => $autoload ) {
			beans_uikit_enqueue_components( $autoload, $autotype, false );

	// Add components.
	$_beans_uikit_enqueued_items['components'][ $type ] = array_merge( (array) $_beans_uikit_enqueued_items['components'][ $type ], (array) $components );