How to Deregister, Unqueue and Unhook a Parent Theme CSS Stylesheet

There comes a time when working with a WordPress project where you want to not include certain CSS from a parent theme or plugin.  For example, a parent theme may include extra stylesheets that you don’t want or a plugin may be adding styles that conflict with your site.

On a recent project, I wanted to remove the parent styles just on a certain section of the site.  Here’s how to do it.

First what you have to do is find the handle for the parent stylesheet you no longer want.  Let’s say for example that we had a twentyfifteen child theme and wanted to remove the parent styling.

You would go to the parent theme’s functions.php file and find the hook.  It can help to search for “wp_enqueue_style” to find the CSS includes faster.  Here is what it looks like in twentyfifteen:

TwentyFifteen Theme Functions.php Including Stylesheet

We can see the handle is “twentyfifteen-style” and this is what we will now use to dehook it using the code below:

function unhook_parent_style() {

  wp_dequeue_style( 'twentyfifteen-style' );
  wp_deregister_style( 'twentyfifteen-style' );

}
add_action( 'wp_enqueue_scripts', 'unhook_parent_style', 20 );

It’s important that we add this code into a function and then hook the function into wp_enqueue_scripts.

If you only want to unhook the styles on certain pages, you can also add conditional code like this:

function unhook_parent_style() {

  is_page_template( 'custom-template.php' ) {
    wp_dequeue_style( 'twentyfifteen-style' );
    wp_deregister_style( 'twentyfifteen-style' );
  }

}
add_action( 'wp_enqueue_scripts', 'unhook_parent_style', 20 );

This will only unhook the parent styles when WordPress is loading pages that use the custom-template.php file. You can also use any of these conditional statements as well.

Shout out to Brad Dalton over at WP Sites for the original code snippet on How To Deregister & Dequeue Style Sheets!

3 thoughts on “How to Deregister, Unqueue and Unhook a Parent Theme CSS Stylesheet

  1. Rhys Clay

    One thing to watch out for I have noticed is that if you are working with a child theme it is important to use the same priority number as the action that called the script originally. For example:

    add_action( ‘wp_enqueue_scripts’, ‘yit_responsive_and_custom_assets’, 100 );

    Will require:
    add_action( ‘wp_enqueue_scripts’, ‘remove_default_stylesheet’, 100 );

    Like

    Reply
  2. Pingback: How to Deregister, Unqueue and Unhook a Parent Theme CSS Stylesheet | kode4me

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s