Loading a child-theme’s style.css after the parent’s

by

I’m trying to load my child theme’s style.css after the parent theme style.css has already loaded. However, I have noticed that the style.css doesn’t need to be enqueued since it’s implicitly enqueued by the WordPress core.

So I’m explicitly enqueuing it like this, where it is dependent on the parent-style having already loaded:

function enqueue_theme_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri(). '/style.css', array('parent-style') );
}
add_action( 'wp_enqueue_scripts', 'enqueue_theme_styles', PHP_INT_MAX );

The problem with this is that it’s now loaded twice. Once implicitly and then explicitly. How can I load my child’s style.css after the parent’s without loading it twice?

Here’s what the head looks like:

<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php bloginfo('name'); ?> | <?php is_front_page() ? bloginfo('description') : wp_title(''); ?></title>
    <?php if(isset($themeum['favicon'])){ ?>
        <link rel="shortcut icon" href="https://wordpress.stackexchange.com/questions/227766/<?php echo $themeum["favicon']; ?>" type="image/x-icon"/>
    <?php }else{ ?>
        <link rel="shortcut icon" href="<?php echo get_template_directory_uri().'/images/plus.png' ?>" type="image/x-icon"/>
    <?php } ?>
    <link rel="stylesheet" type="text/css" href="">

    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
    <![endif]-->
    <?php if(isset($themeum['before_head'])) echo $themeum['before_head'];?>
    <?php wp_head(); ?>
</head>

1
1

As @Andy Macaulay-Brook pointed out WordPress doesn’t load child-theme's style.css . I guess parent theme might be en-queuing it.

  • De-queue the child-theme style.css first and then enqueue it
  • En-queue parent’s style.css before child theme’s style.css

De-queue the child-theme style.css

You can de-queue the child-theme’s style.css by using the handle.You can find out the handle either by looking at the parent theme (assuming it’s being loaded from it) or by looking at the link of the page source.

For example:

Link from the site using Twenty Fifteen theme looks like this

<link rel="stylesheet" id='twentyfifteen-style-css'  href="http://wp.dev/wp-content/themes/twentyfifteen/style.css?ver=4.5.3-alpha-37528" type="text/css" media="all" />

For which the handle is twentyfifteen-style which is the id of the link tag but without -css.

So we can de-queue this using wp_dequeue_style hooking to wp_enqueue_scripts

wp_dequeue_style('twentyfifteen-style');

En-queue parent’s style.css before child theme’s style.css (depends on list of dependencies)

By changing the priority of the wp_enqueue_scripts hook less than default (10) and loading the parent theme style.css. (I’m unsure of this have to check)

function wpse_227769_enqueue_scripts() {
   //Load parent theme style.css here
}
add_action( 'wp_enqueue_scripts', 'wpse_227769_enqueue_scripts', 9 );

Leave a Comment