Home>Support>How to extend Layout Slider Widget correctly?

How to extend Layout Slider Widget correctly?

I have the following Code to add additional options to Layout Slider Widget

add_filter('siteorigin_widgets_form_options_sow-layout-slider', 'cambria_extend_layout_slider_form', 10, 2);
function cambria_extend_layout_slider_form( $form_options ){
    $new_option = [
        'selectStyles' => [
            'type'    => 'radio',
            'label'   => __('Select Arrow Styles', 'cam-tilegallery-widget'),
            'default' => 'default',
            'options' => [
                'default' => 'Default',
                'cambria-grey' => 'Cambria Grey',
                'cambria-gold' => 'Cambria Gold',

    $form_options['design']['fields'] = array_merge($form_options['design']['fields'], $new_option);

    return $form_options;

this works correctly. After that I have :

add_filter( 'siteorigin_widgets_less_file_sow-layout-slider', 'cambria_layout_slider_less_file', 10, 2 );
function cambria_layout_slider_less_file( $filename, $instance ){
    if( isset($instance['design']['selectStyles']) && $instance['design']['selectStyles'] == 'cambria-gold' ) {
        wp_enqueue_style( 'layout-slider-style', get_template_directory_uri() . '/styles/layout-slider-gold.css', '', time() );
    } else if(  $instance['design']['selectStyles'] == 'cambria-grey' ) {
        wp_enqueue_style( 'layout-slider-style', get_template_directory_uri() . '/styles/layout-slider-grey.css', '', time() );

    return $filename;

The issue here is that with multiple widgets in 1 page this is not working. Any suggestions how to fix the issue or how to do it better?

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 1 year, 5 months ago Alex S Hi, I Work Here

    Hi Yuki,

    The handle you’re applying to both stylesheets is the same so regardless of the slider settings the only stylesheet that will be output is layout-slider-grey. To resolve this you’ll need to give each wp_enqueue_style a unique handle. For more information please refer to the documentation of the wp_enqueue_style.

    In addition to that, there’s nothing in your PHP that currently makes anything about arrow style different. This means that in a pure CSS manner, there’s no way to tell the difference between a slider that’s set to use a grey or a gold arrow. I recommend adding your styling using LESS instead as that will allow you to add the CSS directly to the widgets stylesheet instead and ensure it only gets applied to the relevant widget instance.

    Kind regards,

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More