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

How to extend Siteorigin Layout Slider Widget correctly part2?

The question has an answer but its not correct and I cant right comments on the answer since they are disabled.

The issue is on a page with multiple Layout-sliders only the css file for the first type of Layout slider is loaded ( lets say I have a page with 3 sliders with the arrows type set to the 3 options on each of them. The sliders will load the styles for the first chosen slider arrow options ).

I am not sure how to correctly implement Less files depending on the user chose arrow type. Can you give me a hint or example? Or if there’s another better way to make this option work I will be very happy :))

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-gold', get_template_directory_uri() . '/styles/layout-slider-gold.css', '',          time() );
  } else if( $instance['design']['selectStyles'] == 'cambria-grey' ) {
   wp_enqueue_style( 'layout-slider-style-grey', get_template_directory_uri() . '/styles/layout-slider-grey.css', '', time() );

  return $filename;

Every time the “$instance” variables is the first instance of the slider any other hooks that will get all the instances or any way to change the layout slider HTML or classes depending on the custom option I’ve implemented ?

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, 3 months ago Alex S Hi, I Work Here

    Hi Yuki,

    any way to change the layout slider HTML or classes depending on the custom option I’ve implemented

    Normally, yes but the Layout Slider is set up in a way that makes it quite tricky to do this for so it’s not something that I can really recommend. I recommend injecting CSS Instead as that will allow you to do this without modifying the template directly. You can completely override the standard widget LESS file (you will need to include a copy of the base widgets LESS – this is located in siteorigin-widgets/layout-slider/styles/default.ess) with a custom LESS file by following these instructions – that example also provides an example of how to selectively override it based on a setting value. You can also add LESS/CSS by using the siteorigin_widgets_less_sow-layout-slider filter.

    If you would rather override the template, you’ll get better results if you create a new widget based on the Layout Slider. To do this you’ll need to extending the Layout Slider widget class and then override the relevant method in the slider widget base.

    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