How to extend Layout Slider Widget correctly?

Open 1 reply developer plugin plugin-widgets-bundle

5 years ago · Last reply by Alex S 5 years ago

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.

Need fast email support? Get SiteOrigin Premium

Replies

Alex S Staff 5 years, 6 months ago
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,
Alex

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.