[Resolved] Child Theme – loading style.css *after* other style sheets?

[Peter]

I am using the child theme you provide on your site and save my CSS to its style.css.

Apparently the child theme’s style.css is loaded before the style sheets from the GP Premium add-ons, so styles with the same specifity are being overwritten.

Is there any way to load the child theme’s CSS after the other style sheets?

[Leo]

Hi Peter,

Just making sure you are not enqueue the parent style sheet? The theme loads it automatically for you:
https://docs.generatepress.com/article/child-theme-issues/

Let me know if this helps.

[Tom]

Some stylesheets might be added after the child stylesheet, but you can counter that by making your CSS more specific.

For example, add body in front of your custom CSS:

body .site-header {
    margin-top: 10px;
}

[Peter]

@Leo Thanx for you reply, but the functions.php of the child theme is (almost) empty. The only reference to the parent theme is in the Template-comment of the Child-Theme’s style.css.

@Tom Thanx for the hint, but that’s precisely what I wanted to avoid 😉

[Tom]

Any reason why?

You could try this:

add_action( 'wp_enqueue_scripts', 'tu_child_scipts', 999 );
function tu_child_scipts() {
    wp_dequeue_style( 'generate-child' );
    wp_enqueue_style( 'generate-child', get_stylesheet_uri(), array( 'generate-style' ), filemtime( get_stylesheet_directory() . '/style.css' ), 'all' );
}

[Peter]

Thanx a lot, the add_action did the trick. The snippet dequeues the style sheet from the child theme and then loads all GP-stylesheets in an array sorting them by time stamp?

>> [specificity] that’s precisely what I wanted to avoid
> Any reason why?

Starting every selector with something like body just to increase specificity somehow feels, uhm, wronggg. Changing the load order seems cleaner.

[Tom]

It simply removes the stylesheet and then re-adds it. The trick is the hook priority being set to 999 which is later than anything else. That loads it after all of the other hooks.

I see your point 🙂

[Nic]

i know its an old thread but had the same problem in 2020. need to dequeue and requeue my own style.css because it was loaded before sticky.min and GP style. therefore overwriting some css rules was complicated. custom style.css from child theme should always loaded at last.

[Tom]

This is a tough one to fix on our end now, unfortunately. If we were to force it to load after everything at this point, there’s a high probability people might run into issues with their CSS after updating.

[Martin]

*deleted*

[Author]

Posts