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?
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 eachwp_enqueue_stylea 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,
Alex