8

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="<?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>
Improve this question
5
  • WordPress doesn't load style.css so I think the parent theme is. Can you paste your header.php form your theme? And from functions.php in the parent, any code hooking a style sheet in?
    – Andy Macaulay-Brook
    Commented May 25, 2016 at 7:54
  • Which one of the styles is loaded twice?
    – Max Yudin
    Commented May 25, 2016 at 8:10
  • @MaxYudin, he meant child theme's style.css.
    – bravokeyl
    Commented May 25, 2016 at 8:12
  • @bravokeyl hmm. Now I reread the question that sounds right. Maybe the parent theme references stylesheet directory rather than template directory. Hard to help without seeing.
    – Andy Macaulay-Brook
    Commented May 25, 2016 at 8:18
  • @AndyMacaulay-Brook, you are absolutely correct. I guess parent theme might be loading it ( for example: Genesis does)
    – bravokeyl
    Commented May 25, 2016 at 8:20

1 Answer 1

Reset to default
9

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 );
Improve this answer
5
  • Cool. I hadn't noticed the handle was used as an ID. Handy.
    – Andy Macaulay-Brook
    Commented May 25, 2016 at 8:44
  • That was very helpful! That should do it. :) Thanks!
    – shmuli
    Commented May 25, 2016 at 8:53
  • I think the priorities on this hook get overridden by the arrays of dependencies. Safer to list the dependencies to get the ordering that you want.
    – Andy Macaulay-Brook
    Commented May 25, 2016 at 8:55
  • @AndyMacaulay-Brook, yes , got it, had a little bit of doubt on this before just checked functions.wp-styles.php and class-wp-dependencies class.
    – bravokeyl
    Commented May 25, 2016 at 8:58
  • I found that it was being loaded in the parent's functions.php by ` wp_enqueue_style('thm-style',get_stylesheet_uri());`.
    – shmuli
    Commented May 25, 2016 at 9:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.