Can’t disable child theme style

  • Resolved Andreas 2013

    (@andreas-2013)


    6 months, 4 weeks ago

    Hello,
    I got problems with my twentytwenty child theme and hope, that someone can help me.
    In order to optimize my website for speed, I’d like to use critical css as inline code. To do that, I wanted to call style.css asynchronously, what means I have to set it in header.php manually, without using wp_enqueue_style.
    When I created the child theme in the past, I unfortunately copied the whole parent theme and made several modifications in the new file. That’s the reason, why I’m disabling the parent theme complete, to avoid double loading of these big style files.

    With the following code in functions.php I disabled the parent theme and enqueued the child theme:

    function child_theme_styles()
{
  wp_dequeue_style( 'twenty-twenty-style' );
  wp_deregister_style( 'twenty-twenty-style' );
  wp_enqueue_style('twentytwenty-child-style', get_stylesheet_directory_uri() . '/style.css', array('twentytwenty-style'));
}
add_action('wp_enqueue_scripts', 'child_theme_styles');

    Strangely, the following line is still being loaded in head (which is not the real problem though):

    <link rel="stylesheet" id="twentytwenty-print-style-css"  media="print">

    The actual problem is, that I’m not able to disable enqueuing the child theme style.css, to place the code manually in header.php. When I comment out or delete the last line in the mentioned function (wp_enqueue_style(‘twentytwenty-child-style’ …), the style.css of my child theme is still loaded as <link> in the head:

    <link rel="stylesheet" id="twentytwenty-style-css"  media="all">

    There is no other custom code, that is loading this style. So, how can this happen? What is the right way to stop my child styles from loading automatically?

    Thank you very much for your help in advance!
    Andreas

    • This topic was modified 6 months, 4 weeks ago by Andreas 2013.
    • This topic was modified 6 months, 4 weeks ago by Andreas 2013.
    • This topic was modified 6 months, 4 weeks ago by Andreas 2013.
    • This topic was modified 6 months, 4 weeks ago by Andreas 2013.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator bcworkz

    (@bcworkz)

    As a guess, WP might auto load style.css despite the lack of enqueuing code. Perhaps make your child style.css empty except for the required header information (or have it only contain above the above the fold CSS you were going to manually add). Then place the rest of your CSS in a different file that you load asynchronously.

    I think the reason print.css is still on the page is the parent theme has enqueued it separately from style.css? You should be able to dequeue this as well. Its handle should be “twentytwenty-print-style”.

    Thread Starter Andreas 2013

    (@andreas-2013)

    @bcworkz Thank you very much for your reply! That’s my code now:

    For the functions.php:

    function remove() { 
wp_dequeue_style( 'twentytwenty-style' );
wp_deregister_style( 'twentytwenty-style' );
wp_dequeue_style('twentytwenty-child-style', get_stylesheet_directory_uri() . '/style.css', array('twentytwenty-child-style'));
wp_dequeue_style( 'twentytwenty-print-style' );
wp_deregister_style( 'twentytwenty-print-style' );
}
add_action( 'wp_print_styles', 'remove', 100 );

    In header.php I added this line, to load the full style-file asyncronously:

    <link rel="preload" href="/wp-content/themes/twentytwenty-child/mystyle.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/wp-content/themes/twentytwenty-child/mystyle.css"></noscript>

    At the top of mystyle.css I added the template header with template name: twentytwenty. WordPress seems to recognize mystyle.css as the regularly child theme css-file. Anyway, this seems to work, the only loading css-file is mystyle.css.

    Is there anything, you would change?

    Moderator bcworkz

    (@bcworkz)

    Looks good! The only changes I would make are pretty picayune. Plain English function names are ill advised due to potential conflict with other code. OTOH function names describing what the function does is very desirable. The general recommendation is to prefix function names with some unique initials of a name such as plugin, theme, or your own. I would likely name the function “bcw_remove_styles”.

    It’s also not really necessary to deregister as long as you don’t need to reuse the same handle. Dequeuing alone is usually adequate. Little harm in deregistering anyway.

    Using relative URLs in WP are also ill advised. There always seems to be some sort of request where they don’t work as intended. It’s best to always use full, absolute URLs. You don’t necessarily need the protocol https: if you also need http: to work, but include the domain name along with path and file name. There are various WP PHP constants and functions that will return a full URL up to a certain point, such as get_stylesheet_directory_uri() for a child theme’s main directory (where style.css resides). You can then append “/mystyle.css” to the returned value to get a full URL.

    Thread Starter Andreas 2013

    (@andreas-2013)

    I made the changes as you suggested.

    Thank you ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Can’t disable child theme style’ is closed to new replies.