0

I'm trying to move to child themes, but seem to have a problem with the order that stylesheets are loaded.

I have a parent theme, which is using wp_enqueue_style to load all stylesheets, this includes the main stylesheet, Bootstrap, and some others.

When I create a child theme, and then add it's own stylesheet to the wp_enqueue_style, it loads it up first before all of the parent ones.

How can I reverse this so the child stylesheet is loaded last (after the parent stylesheet)?

// Parent Theme Stylesheets
function psychic2016_load_scripts() {
    wp_enqueue_style('bootstrapCSS',get_template_directory_uri().'/css/bootstrap.min.css');
    wp_enqueue_style('bootstrapSocial',get_template_directory_uri().'/css/bootstrap-social.css',array());
    wp_enqueue_style('bootstrapThemeCSS',get_template_directory_uri().'/css/bootstrap-theme.min.css');
    wp_enqueue_style('fontawesome',get_template_directory_uri().'/css/font-awesome.min.css');
    wp_enqueue_style('intltelinput',get_template_directory_uri().'/css/intltelinput.css');
    wp_enqueue_style('stylesheet',get_stylesheet_uri());
}
add_action( 'wp_enqueue_scripts', 'psychic2016_load_scripts' );

// Child Theme Stylesheets
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css');
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

With it like this, the stylesheets are loading in this order:

enter image description here

UPDATE

When adding the dependency to the child functions call, I get the child CSS now loaded in two position, one at the top of everything, and the second in place of the parent style theme, underneath everything.

enter image description here

  • Are the functions you show in the same file or is the parent function in the parents funcitons.php file and the child function in it's own functions.php file? – Fencer04 Jul 22 '16 at 13:25
  • Seperate functions file for each theme (parent and child). – Lee Jul 22 '16 at 14:48
  • In the Update screenshot, it is not loading the child theme style.css. It is loading the parent style.css only. Please look through get_stylesheet_directory() and get_template_directory(). And also please look through how to use child theme concept the correct way. – Aftab Jul 22 '16 at 15:07
  • Wrong, in the update screenshot it is only loading the child theme, this is because I use 'get_stylesheet_uri' in the parent theme, but when the child theme is selected, this uses the child style sheet. I believe I'm using the concept correctly... so the parent theme shouldn't ever use 'get_stylesheet_uri' if a child theme is being used? – Lee Jul 24 '16 at 9:22
2

What I see here is you are not using dependency parameter in your child theme to load the css.

wp_enqueue_style() accepts 5 arguments. The 3rd one is dependency. This dependency allows your css file to load after that.

So if you will add the parent stylesheet handle in child dependency then this will load after your parent css file.

For more information on wp_enqueue_style() please go through https://developer.wordpress.org/reference/functions/wp_enqueue_style/

So your code will be

// Child Theme Stylesheets
function my_theme_enqueue_styles() {
    wp_enqueue_style('stylesheet',get_template_directory_uri().'/style.css' ) // parent theme style.css
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', 'stylesheet' ); // child theme style.css
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Here the 3rd argument is the handle of your parent stylesheet. Hope this helps you out.

Note : You can use get_stylesheet_uri() function to load your child theme's style.css file.

Update: Please go through this link. Loading a child-theme's style.css after the parent's

Thanks

  • No, the child CSS is still loaded before everything else. – Lee Jul 22 '16 at 14:26
  • Do I need to include a global parameter inside the child functions file to be able to access the queued stylesheets from the parent? – Lee Jul 22 '16 at 14:28
  • In fact what I do notice now is that the child CSS is being loaded, once before everything, and then right at the end.. in place of the parent theme css. I'll add screenshot in my question. – Lee Jul 22 '16 at 14:36
  • I've fixed that by replacing get_stylesheet_uri in the parent, to get_stylesheet_directory_uri.. which isn't waht I want to do but it seems to target the parent instead of the current selected (child) theme. But the child CSS is still loading before everything else. – Lee Jul 22 '16 at 14:40
  • Are you sure you are using the child theme concept the right way? – Aftab Jul 22 '16 at 15:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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