How can I dequeue the Slider CSS Files?

Resolved Craig1986
(@craig1986)

5 years, 4 months ago
I am trying to dequeue MetaSlider’s CCS Files but having no joy. My efforts, to date, include:
```
function dequeue_meta_slider_css_files(){
    wp_dequeue_style( 'metaslider-nivo-slider', get_template_directory_uri() . '/plugins/ml-slider/assets/sliders/nivoSlider/nivoslider.css' );
}

<code>add_action( 'wp_enqueue_scripts', 'dequeue_meta_slider_css_files', 999 );</code>
```
function dequeue_meta_slider_css_files(){
wp_dequeue_style( ‘metaslider-nivo-slider’ );
}

add_action( ‘wp_enqueue_scripts’, ‘dequeue_meta_slider_css_files’, 999 );`

wp_deregister_style('metaslider-nivo-slider');

remove_action('wp_footer', 'metaslider-nivo-slider');

Also, I cannot seem to find where the CSS Files are being called. Furthermore, the CSS Files are still being rendered even after removal the CSS Files completely and clearing my Cache.

Any insights into this, would be greatly appreciated.

Viewing 7 replies - 1 through 7 (of 7 total)

Kevin Batdorf
(@kbat82)

5 years, 4 months ago
Hi @craig1986,

Under the advanced settings you can turn off the Print CSS option. We run this function to lead the assets:
```
if ( $this->get_setting( 'printCss' ) == 'true' ) {
	wp_enqueue_style( 'metaslider-' . $this->get_setting( 'type' ) . '-slider', METASLIDER_ASSETS_URL . $this->css_path, false, METASLIDER_VERSION );
	wp_enqueue_style( 'metaslider-public', METASLIDER_ASSETS_URL . 'metaslider/public.css', false, METASLIDER_VERSION );
}
```
so you could dequeue ‘metaslider-nivo-slider’ and ‘metaslider-public’. If it’s not working you might just need to use a different hook.

Let me know how it turns out. I think the option under advanced might be what you need though.
Thread Starter Craig1986
(@craig1986)

5 years, 4 months ago

Thanks for your quick reply. Whilst the ‘Advanced > Print CSS’ option removes one of the CSS Files, all of the others remain.

Are you able to advise on a suitable Hook, to remove all CSS Files? I have tried many of the Hooks but it does not seem to work.

Kevin Batdorf
(@kbat82)

5 years, 4 months ago

Hi @craig1986,

What remains after disabling Print CSS? Could it be a caching issue? We only load two stylesheets.

Do you have a slideshow theme set maybe? If so you will also have to remove the theme as well.

Do you have a url I can look at?
Thread Starter Craig1986
(@craig1986)

5 years, 4 months ago
The remaining URL/CSS Files are as follows:
```
/wp-content/plugins/ml-slider/assets/sliders/nivoslider/nivo-slider.css?ver=3.10.3

/wp-content/plugins/ml-slider/assets/metaslider/public.css?ver=3.10.3

wp-content/plugins/ml-slider/assets/sliders/nivoslider/themes/default/default.css?ver=3.10.3
```
Thread Starter Craig1986
(@craig1986)

5 years, 4 months ago
After experimenting somewhat, I have found the following:

The only way I can seem to entirely remove all remaining CSS Files, is by removing the following code from /wp-content/plugins/ml-slider/inc/slider/metaslider.class.css:
```
public function enqueue_scripts() {
        if ('true' == $this->get_setting('printJs')) {
            $handle = 'metaslider-' . $this->get_setting('type') . '-slider';
            wp_enqueue_script($handle, METASLIDER_ASSETS_URL . $this->js_path, array('jquery'), METASLIDER_VERSION);
            $this->wp_add_inline_script($handle, $this->get_inline_javascript());
        }

        if ( $this->get_setting( 'printCss' ) == 'true' ) {
            // this will be added to the bottom of the page as <head> has already been processed by WordPress.
            // For HTML5 compatibility, use a minification plugin to move the CSS to the <head>
            wp_enqueue_style( 'metaslider-' . $this->get_setting( 'type' ) . '-slider', METASLIDER_ASSETS_URL . $this->css_path, false, METASLIDER_VERSION );
            wp_enqueue_style( 'metaslider-public', METASLIDER_ASSETS_URL . 'metaslider/public.css', false, METASLIDER_VERSION );
        }
        do_action( 'metaslider_register_public_styles' );
    }
```
By removing the above code, in its entirety, it also removes the .js files. Something I do not wish to do. Adopting the ‘method of elimination’ approach, to find out which code snippet was responsible for the CSS Files, I solely removed:
```
if ('true' == $this->get_setting('printJs')) {
            $handle = 'metaslider-' . $this->get_setting('type') . '-slider';
            wp_enqueue_script($handle, METASLIDER_ASSETS_URL . $this->js_path, array('jquery'), METASLIDER_VERSION);
            $this->wp_add_inline_script($handle, $this->get_inline_javascript());
        }
```
This did not remove anything.

I then solely removed:
```
if ( $this->get_setting( 'printCss' ) == 'true' ) {
            // this will be added to the bottom of the page as <head> has already been processed by WordPress.
            // For HTML5 compatibility, use a minification plugin to move the CSS to the <head>
            wp_enqueue_style( 'metaslider-' . $this->get_setting( 'type' ) . '-slider', METASLIDER_ASSETS_URL . $this->css_path, false, METASLIDER_VERSION );
            wp_enqueue_style( 'metaslider-public', METASLIDER_ASSETS_URL . 'metaslider/public.css', false, METASLIDER_VERSION );
        }
```
Upon removing the above snippet, all remaining CSS Files were removed apart from:

/wp-content/plugins/ml-slider/assets/sliders/nivoslider/themes/default/default.css?ver=3.10.3

Any ideas on how to resolve this matter? Once the relevant code snippet has been identified, what would be the best approach to remove dequeue the snipper within the functions.php file? I have tried many approaches but cannot seem to remove the remaining CSS Files.
Kevin Batdorf
(@kbat82)

5 years, 4 months ago
Hi @craig1986,

If you notice from the code you removed those are just conditionals that check if Print CSS and Print JS are true. So there seems to be an issue when you try to uncheck those options. Make sure they are unchecked, and make sure you are editing the correct slideshow.

Further, the nivo style uses the same approach. Look in metaslider.nivo.class line 90.
```
// If a theme is set then we need to load the default Nivo theme
$theme = get_post_meta($this->id, 'metaslider_slideshow_theme', true);
if ('true' === $this->get_setting('printCss') || $theme) {
	wp_enqueue_style('metaslider-' . $this->get_setting('type') . '-slider-default', METASLIDER_ASSETS_URL . "sliders/nivoslider/themes/default/default.css", false, METASLIDER_VERSION);
}
```
This is only loaded if Print CSS is on, or if you have a theme set.
Thread Starter Craig1986
(@craig1986)

5 years, 4 months ago

Problem resolved!

Whilst I unchecked the ‘Print CSS’ for the Slideshows that are being used, the CSS Files were still being produced as I still had ‘Print CSS’ checked for the unused Slideshows.

After unchecking ‘Print CSS’, for the ‘unused’ Slideshows as well, the problem was resolved.

Thanks for your time!

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘How can I dequeue the Slider CSS Files?’ is closed to new replies.

Tags