Tag Archives: Child Theme

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!

Let Alex Vasquez Help You Decide Whether to Use a WordPress Framework, Parent Theme or Starter Theme

I wasn’t able to WordCamp Orange County in 2013, but if I had, I would have enjoyed checking out this cool talk in person. The presenter, Alex Vasquez, does a good job explaining the differences and similarities between frameworks, parent/child themes, and starter themes.

His slide deck has some awesome illustrations.

How to Create a 2012 Child Theme in WordPress

We all know it’s a bad idea to customize the default WordPress theme templates because when updating it would wipe out your edits.

Instead, we create a child theme. To do this, first we create a new theme folder. Then comes the CSS style.css file with the following meta comment at the top, followed by the import of the twenty twelve styles.

/*
Theme Name: Twenty Twelve Child
Theme URI: http://example.com/
Description: Child theme for the Twenty Twelve theme
Author: Your name here
Author URI: http://example.com/about/
Template: twentytwelve
Version: 0.1.0
*/

@import “../twentytwelve/style.css”;

 

For more information, check out the WordPress Codex on Child Themes.