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 ?
Hi Yuki,
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,
Alex