Knowledgebase

How To Remove Parent Stylesheet & Add To Child Theme in WordPress

Sometimes a WordPress theme will load a separate CSS file rather then having the CSS right in the main style.css this means if you are using a child theme you won’t have direct access to make the changes and you might not be able to override the parent CSS file via the child.css

How to get around this? We’ll  you could easily dequeue the css from the parent theme via the child theme and then add it into the child so you can then edit it.

Example

1. Copy css file from parent theme into child theme
2. Create functions.php in child theme
3. Paste the following in the functions.php

// remove parent css file
add_action( 'wp_print_styles', 'remove_parent_styles' );
function remove_parent_styles() {
        wp_dequeue_style('CSS-ID-TO-DEQUEUE');
}

// add parent css file to child for editing
add_action( 'wp_enqueue_scripts', 'add_styles_to_child');
function add_styles_to_child() {
    wp_enqueue_style('NEW-CSS-ID', get_stylesheet_directory_uri() . '/css-location-in-child-theme.css', array(), null ); 
}

4. Don’t forget to change where it says “CSS-ID-TO-DEQUEUE” (you can see the ID by looking in the parent theme or viewing your site’s source code and having a look at the id value for the stylesheet tag. The ID is everything minus the last -css part). Also don’t forget to change ” NEW-CSS-ID” to the new id you want for this stylesheet as well as change ” css-location-in-child-theme.css” for the location of your stylesheet in the child theme.

5. Now you can edit the one in your child theme.