How to properly dequeue scripts and styles in child theme?

Question

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 );

Answer 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.

Answer 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.

Answer 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.