0

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

2 Answers 2

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' );
1
  • Isn't a wp_head hook with default priority 10 too late to remove the original scripts? wp_head's wp_print_scripts action has priority 9.
    – Rup
    Mar 13, 2022 at 18:13
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.