How to remove parent style.css from the header

Question

in a child theme of WP theme "twenty-twenty-one" I like to remove the original style.css of the parent theme - based in the link-tag id='twenty-twenty-one-style-css' - from the header.

Here is the code

    <link rel='stylesheet' id='twenty-twenty-one-style-css'  href='http://localhost/ml_wp_220228/wp-content/themes/twentytwentyone/style.css?ver=6.1.1.1646164756' media='all' />
    <link rel='stylesheet' id='chld_thm_cfg_separate-css'  href='http://localhost/ml_wp_220228/wp-content/themes/cpeach_theme_21/ctc-style.css?ver=6.1.1.1646164756' media='all' />

The first css-link-tag - id "twenty-twenty-one-style-css" - should be removed, only the second - my own css - should stay.

I tried it with some coding in the function.php of the child theme.

    function dequeue_css() {
        wp_dequeue_style('twenty-twenty-one-style');
        wp_deregister_style('twenty-twenty-one-style');
    }
    add_action('wp_enqueue_scripts','dequeue_css');

When I tried the function with a style, I created by myself before - for instance id "css-link chld_thm_cfg_separate-css" - everything worked fine.

Trying the same with the style.css of the parent - id='twenty-twenty-one-style-css' - didn't work.

Please, can you give me a hint.

Thanks

Frank

Answer 1

The file 'style.css' is integrated via function 'twenty_twenty_one_scripts' in the parent themes functions.php.

function twenty_twenty_one_scripts() {
    // Note, the is_IE global variable is defined by WordPress and is used
    // to detect if the current browser is internet explorer.

    global $is_IE, $wp_scripts;

    if ( $is_IE ) {
        // If IE 11 or below, use a flattened stylesheet with static values replacing CSS Variables.
        wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/assets/css/ie.css', array(), wp_get_theme()->get( 'Version' ) );
    } else {
        // If not IE, use the standard stylesheet.
        wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );
    }

    // RTL styles.
    wp_style_add_data( 'twenty-twenty-one-style', 'rtl', 'replace' );

    // Print styles.
    wp_enqueue_style( 'twenty-twenty-one-print-style', get_template_directory_uri() . '/assets/css/print.css', array(), wp_get_theme()->get( 'Version' ), 'print' );
...

To change this, disable function 'twenty_twenty_one_scripts' in the child themes function.php

function remove_my_action() {
    remove_action( 'wp_enqueue_scripts', 'twenty_twenty_one_scripts' );
}
add_action( 'wp_head', 'remove_my_action' );

Copy the Code of function 'twenty_twenty_one_scripts' into the child themes function.php, rename it and remove (or comment out) the first section of the function:

function my_twenty_twenty_one_scripts() {
    // Note, the is_IE global variable is defined by WordPress and is used
    // to detect if the current browser is internet explorer.

    global $is_IE, $wp_scripts;

    /*
    if ( $is_IE ) {
        // If IE 11 or below, use a flattened stylesheet with static values replacing CSS Variables.
        wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/assets/css/ie.css', array(), wp_get_theme()->get( 'Version' ) );
    } else {
        // If not IE, use the standard stylesheet.
        wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );
    }
    */

    // RTL styles.
    wp_style_add_data( 'twenty-twenty-one-style', 'rtl', 'replace' );

    // Print styles.
    wp_enqueue_style( 'twenty-twenty-one-print-style', get_template_directory_uri() . '/assets/css/print.css', array(), wp_get_theme()->get( 'Version' ), 'print' );
...

Activate the new function 'my_twenty_twenty_one_scripts' in child themes function.php

add_action( 'wp_enqueue_scripts', 'my_twenty_twenty_one_scripts' );

Answer 2

For the moment I solved it the brutal way: I removed the link-tag with the parent-css ( <link rel='stylesheet' id='twenty-twenty-one-style-css'... ) using javascript.

in JS

const parentStyleCss = document.querySelector('#twenty-twenty-one-style-css');
parentStyleCss.parentNode.removeChild(parentStyleCss);

This is not the best way to go, I know. So, if anybody can give a hint to remove the line via coding in Wordpress's function.php I'd be happy to hear it.

Frank