Tag Archives: CSS

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!

Adding CSS to WordPress Theme Via functions.php File

From what I have seen, the most common way theme developers add their css is via the bloginfo(‘stylesheet_url’); tag in the header.php. While this is not necessarily that bad, a better way to do this is via the functions.php file, much in the same way you properly link to JavaScript files a WordPress theme.

Here is the code for how to do this:


// Load the theme stylesheets
function theme_styles()  
{ 

	// Example of loading a jQuery slideshow plugin just on the homepage
	wp_register_style( 'flexslider', get_template_directory_uri() . '/css/flexslider.css' );

	// Load all of the styles that need to appear on all pages
	wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css' );
	wp_enqueue_style( 'custom', get_template_directory_uri() . '/css/custom.css' );

	// Conditionally load the FlexSlider CSS on the homepage
	if(is_page('home')) {
		wp_enqueue_style('flexslider');
	}

}
add_action('wp_enqueue_scripts', 'theme_styles');

I’m a fan of the Flexslider Slideshow Plugin from WooThemes, so that’s what I’m setting up to link to just on the homepage.

The required stye.css and a custom CSS stylesheet inside of a css directory in the themes folder are being queued up inside the theme_styles() function and then loaded to execute and output into the header via the wp_head() function that should be included in the header.php file before the closing of the <head> tag.

For another read on this, check out this TutsPlus post on the topic.

style.css Comment Code for Twenty Twelve Theme

/*
Theme Name: Twenty Twelve
Theme URI: http://wordpress.org/extend/themes/twentytwelve
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2012 theme for WordPress is a fully responsive theme that looks great on any device. Features include a front page template with its own widgets, an optional display font, styling for post formats on both index and single views, and an optional no-sidebar page template. Make it yours with a custom menu, header image, and background.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, gray, white, one-column, two-columns, right-sidebar, flexible-width, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
Text Domain: twentytwelve

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/