The Beans UIkit API integrates the awesome UIkit 2 framework and gives you complete control over which components are loaded on any given page, thanks to the Beans Compiler API.
Core vs Add-ons components
Before enqueueing or dequeueing UIkit components, it’s important to point out that UIkit components fall in one-of-two categories – Core and Add-ons (Add-ons are called Components on UIkit site).
It is also important to understand that some components depend on others. If a component isn’t working as expected, check that all the dependencies are being loaded. Scroll down for more information.
Enqueueing UIkit components
Enqueueing any of UIkit’s components is simply a matter of adding a function to your child-theme or a plugin.
Since the Beans Compiler supports per page compiling (cached files), the function below can contain page or layout specific conditions, or can be added directly in a theme template file.
The example below enqueues the flex, overlay and tooltips components by hooking a callback function to beans_uikit_enqueue_scripts and then using beans_uikit_enqueue_components(). Note how the tooltip component is enqueued separetely, since it’s part of the UIkit add-ons category.
add_action( 'beans_uikit_enqueue_scripts', 'my_function_name' );
function my_function_name() {
beans_uikit_enqueue_components( array( 'flex', 'overlay' ) );
beans_uikit_enqueue_components( array( 'tooltip' ), 'add-ons' );
}Dequeueing UIkit components
Dequeueing UIkit components is done in a similar fashion as enqueing, using beans_uikit_dequeue_components() instead of beans_uikit_enqueue_components(). If the dequeue does not take effect, it is most probably because the dequeue function is running after the enqueue function. This can be solved by passing a higher priority to the action.
add_action( 'beans_uikit_enqueue_scripts', 'my_function_name', 15 );
function my_function_name() {
beans_uikit_dequeue_components( array( 'flex', 'overlay' ) );
beans_uikit_dequeue_components( array( 'tooltip' ), 'add-ons' );
}Why some UIkit components may not work as expected?
Sometimes loading the right UIkit components can be a bit tricky. If you ever scratch your head trying to get UIkit components working, you may run the code below to load the entire library in order to test if your issue is due to some missing components.
add_action( 'beans_uikit_enqueue_scripts', 'my_function_name' );
function my_function_name() {
beans_uikit_enqueue_components( true );
beans_uikit_enqueue_components( true, 'add-ons' );
}This should only be used for testing purposes as loading the entire UIkit library on every pages unnecessarily will cause a longer page load and therefore affect performance.
Checking which UIkit components are loading
It is easy to check which UIkit components are loading on any layout, using the function below.
add_action( 'wp_enqueue_scripts', 'print_uikit_components' );
function print_uikit_components() {
global $_beans_uikit_enqueued_items;
print_r( $_beans_uikit_enqueued_items );
}It will print out the array of Core and Add-ons components enqueued, as well as any UIkit styles that have been enqueued.