How to properly dequeue scripts and styles in child theme?

I made a parent theme and a child theme in one of my project. I enqueued CSS and JavaScripts in my parent theme like below:

function project_necessary_scripts() {
    //Stylesheets
    wp_register_style( 'bootstrap-css', get_template_directory_uri() .'/css/bootstrap.min.css' );
    wp_register_style( 'bootstrap-map', get_template_directory_uri() .'/css/bootstrap.css.map' );
    wp_register_style( 'project-css', get_stylesheet_uri() );

    wp_enqueue_style( 'bootstrap-css' );
    wp_enqueue_style( 'bootstrap-map' );
    wp_enqueue_style( 'project-css' );

    //JavaScripts
    wp_register_script( 'modernizr-js', get_template_directory_uri() .'/js/modernizr-2.8.3.min.js', array(), '2.8.3' );
    wp_register_script( 'project-js', get_template_directory_uri() .'/js/project.min.js', array('jquery'), '20150401', true );

    wp_enqueue_script( 'modernizr-js' );
    wp_enqueue_script( 'project-js' );
}
add_action( 'wp_enqueue_scripts', 'project_necessary_scripts' );

Now, in my Child theme I want to dequeue some stylesheets and javascripts. So I used the following code:

function project_dequeue_unnecessary_scripts() {
    wp_dequeue_style( 'bootstrap-map' );
    wp_dequeue_script( 'modernizr-js' );
    wp_dequeue_script( 'project-js' );
}
add_action( 'wp_print_scripts', 'project_dequeue_unnecessary_scripts' );

But actually the bootstrap.css.map file is still enqueuing, but the modernizr-js project-js is not loading, so it’s working partially. How can I solve that?

I even tried action priorities:

add_action( 'wp_print_scripts', 'project_dequeue_unnecessary_scripts', 11 );

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You are very nearer to the solution, because you are on the right path. Just to tweak a little bit:

There are two such action hooks:

1. wp_print_scripts, and
2. wp_print_styles

So the way you can do it, is: hook ’em differently:

//Dequeue Styles
function project_dequeue_unnecessary_styles() {
    wp_dequeue_style( 'bootstrap-map' );
        wp_deregister_style( 'bootstrap-map' );
}
add_action( 'wp_print_styles', 'project_dequeue_unnecessary_styles' );

//Dequeue JavaScripts
function project_dequeue_unnecessary_scripts() {
    wp_dequeue_script( 'modernizr-js' );
        wp_deregister_script( 'modernizr-js' );
    wp_dequeue_script( 'project-js' );
        wp_deregister_script( 'project-js' );
}
add_action( 'wp_print_scripts', 'project_dequeue_unnecessary_scripts' );

And the correct way is to deregister them beside dequeuing. So first dequeue them, and then deregister them accordingly.

Method 2

This is not the proper way. WordPress said not to use both wp_print_scripts, and
wp_print_styles since WordPress 3.3.

Either you are enqueueing or dequeueing, the proper way is:

function project_dequeue_unnecessary_scripts() {
    wp_dequeue_style( 'bootstrap-map' );
    wp_dequeue_script( 'modernizr-js' );
}
add_action( 'wp_enqueue_scripts', 'project_dequeue_unnecessary_scripts', 100 );

Don’t forget to use the priority. Without priority, it won’t work.

Method 3

For Dequeue Scripts, don’t add the last “-js” or “-css” on ID part. I was using WordPress 5.8. It works for me.

ABOVE CODE:

//Dequeue JavaScripts
function project_dequeue_unnecessary_scripts() {
    wp_dequeue_script( 'modernizr-js' );
        wp_deregister_script( 'modernizr-js' );
    wp_dequeue_script( 'project-js' );
        wp_deregister_script( 'project-js' );
}
add_action( 'wp_print_scripts', 'project_dequeue_unnecessary_scripts' );

WORKING CODE:

//Dequeue JavaScripts
function project_dequeue_unnecessary_scripts() {
    wp_dequeue_script( 'modernizr' );
        wp_deregister_script( 'modernizr' );
    wp_dequeue_script( 'project' );
        wp_deregister_script( 'project' );
}
add_action( 'wp_print_scripts', 'project_dequeue_unnecessary_scripts' );

Make sure to see the page source for script id first to remove the “-js” part. Remove last -js only.

For eg:
If your Script ID is project-js-js then remove last -js only and use project-js on dequeue action. Same for CSS as well remove last “-css” part.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0