How do I dequeue a parent theme’s CSS file?

My parent theme (Starkers) adds a CSS file that I’m trying to remove (I want to use @import instead so I can override styles more easily). Starkers has the following in its functions.php:

add_action( 'wp_enqueue_scripts', 'script_enqueuer' );

function script_enqueuer() {
    wp_register_script( 'site', get_template_directory_uri().'/js/site.js', array( 'jquery' ) );
    wp_enqueue_script( 'site' );

    wp_register_style( 'screen', get_template_directory_uri().'/style.css', '', '', 'screen' );
    wp_enqueue_style( 'screen' );
}

I’ve tried the following in the child functions.php, but the link and script tags still show up in the head section.

add_action('init', 'removeScripts');
function removeScripts() {
    wp_dequeue_style('screen');
    wp_deregister_script('site');
}

I’ve double checked to see if they are hard coded in the parent header and they are not.

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

I want to use @import instead so I can override styles more easily

Simply. Don’t. Do. That.

You simply jump into the same hook and then deregister/dequeue the styles/scripts and throw in your custom ones.

function PREFIX_remove_scripts() {
    wp_dequeue_style( 'screen' );
    wp_deregister_style( 'screen' );

    wp_dequeue_script( 'site' );
    wp_deregister_script( 'site' );

    // Now register your styles and scripts here
}
add_action( 'wp_enqueue_scripts', 'PREFIX_remove_scripts', 20 );

The reason for dequeue-ing and deregistering the scripts is simple:

Note that if you’d like to be able to use either of those handles ('screen' or 'site') after dequeuing them, you’ll need to deregister them too. For instance: wp_deregister_style( 'screen' ); and wp_deregister_script( 'site' ); – peterjmag

Method 2

Here is how you would either remove the parent theme’s stylesheet and replace it with a child theme’s stylesheet OR just remove the parent’s stylesheet from ever being loaded.

Starker theme’s functions.php:

add_action( 'wp_enqueue_scripts', 'script_enqueuer' );

function script_enqueuer() {
    //...
    wp_register_style( 'screen', get_template_directory_uri().'/style.css', '', '', 'screen' );
    wp_enqueue_style( 'screen' );
}

Remember the handle that they call the style, ‘screen’

Replacing parent theme’s with child theme’s stylesheet

Starker-Child theme’s functions.php:

function​ ​custom_starkers_styles() {

    //Remove desired parent styles
    wp_dequeue_style( 'screen');

    //Replace with custom child styles
    wp_register_style( 'screen-child',​ ​trailingslashit( get_template_directory_uri() ). 'screen.css' );
    wp_enqueue_style( 'screen-child​'​);
}

add_action( 'wp_enqueue_scripts','custom_starkers_styles', 20 );

Remove parent theme’s stylesheet

Starker-Child theme’s functions.php:

function​ ​remove_starkers_styles() {

    //Remove desired parent styles
    wp_dequeue_style( 'screen');

}

add_action( 'wp_enqueue_scripts','remove_starkers_styles', 20 );

We give the child theme’s add_action() a priority of 20 (default is 10) because we want it to run AFTER the parent theme has queued it up. The higher the priority, the later it will run. 20 > 10 so the child theme’s action will always run after the parent theme has already executed.

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