CODEWITHSUNDEEP
phpwordpresselementor
R2vale
R2vale

Reputation: 85

How to correctly dequeue certain Elementor css files in Wordpress?

I use Elementor to build my website and there are a lot of functionalities that I'm not using but are none the less loaded on every page of my website. So I decided to dequeue the css files I'm not using in my child theme's functions.php and dequeue the css files which I'm only partially using, replacing them with a 'cleaned-up' version of the file.

This is how I wanted to start doing it:

function adg_dequeue_unnecessary_files() {
    wp_dequeue_style( 'elementor-frontend' ); // remove Elementor's custom-frontend.min.css
        wp_deregister_style( 'elementor-frontend' );

    wp_register_style( 'new-elementor-frontend-css', get_stylesheet_directory_uri() . '/custom-frontend.min.css' ); // Purified replacement for Elementor's custom-frontend.min.css
        wp_enqueue_style( 'new-elementor-frontend-css' );
}
add_action( 'wp_enqueue_scripts', 'adg_dequeue_unnecessary_files' );

But while the second part of my function adds my new custom css file nicely, the first part removes almost 10 other Elementor's css files along with the one I actually wanted to dequeue.

This is the list of files being dequeued:

I'm guessing it has something to do with the handler 'elementor-frontend' not being correct. The custom-frontend.min.css file had the 'elementor-frontend-css' ID in the link tag of the HTML code, so I was guessing the handler from there.

Does anyone know how I can dequeue only the custom-frontend.min.css file?

After that I wanted to dequeue these files as well:

I've been browsing this for a few days and I'm starting to feel lost, so any help will be much appreciated!

Upvotes: 3

Views: 9407

Answers (3)

Nikobokan
Nikobokan

Reputation: 41

This seems to work. Tested on a few pages and posts:

add_action( 'elementor/frontend/after_enqueue_styles', function() { 
    wp_deregister_style( 'elementor-frontend' );
    wp_dequeue_style( 'elementor-frontend' );
    wp_register_style( 'elementor-frontend', get_stylesheet_directory_uri() . '/assets/css/custom-elementor-front-end.css' );
   wp_enqueue_style( 'elementor-frontend', get_stylesheet_directory_uri() . '/assets/css/custom-elementor-front-end.css' );
} );

Upvotes: 1

thatweblook
thatweblook

Reputation: 157

My understanding is that all Elementor frontend styles, e.g. your post-1234.css files, are children of 'elementor-frontend', which means if you unload it, none of them will load.

If you load your new, optimised frontend.min.css files with the same name, then it should work.

e.g.

function adg_dequeue_unnecessary_files() {
    wp_dequeue_style( 'elementor-frontend' ); // remove Elementor's custom-frontend.min.css
        wp_deregister_style( 'elementor-frontend' );

    wp_register_style( 'elementor-frontend', get_stylesheet_directory_uri() . '/custom-frontend.min.css' ); // Purified replacement for Elementor's custom-frontend.min.css
        wp_enqueue_style( 'elementor-frontend' );
}
add_action( 'wp_enqueue_scripts', 'adg_dequeue_unnecessary_files' );

Also. Can you not just add your custom-frontend.min.css to the relevant location in your Child Theme and it will overwrite the Parent theme version by default?

Upvotes: 1

Amit Saini
Amit Saini

Reputation: 595

You can dequeue the Elementor CSS file with the use of wp_deregister_style and wp_dequeue_style. For this, you need to pass the CSS file handle name. You can use the below code to dequeue the Elementor plugin global.css file.

function dequeue_elementor_global__css() {
  wp_dequeue_style('elementor-global');
  wp_deregister_style('elementor-global');
}
add_action('wp_print_styles', 'dequeue_elementor_global__css', 9999);

Here elementor-global is the handle name of the global.css file. You can get any file handle name by stylesheet id.
For example: If any stylesheet id is the elementor-global-css then this file handle will be elementor-global

Upvotes: 4

Related Questions