[Support request] Child-theme styles ineffective

[Gabriela]

Hi!
I am working on a child theme from Generatepress with Woocommerce plugin, and many other plugins.

Many styles from child-theme are ok, but some are ineffective. They are only effective from Customizer CSS panel.

Well I wish I could load all my styles from child-theme stylesheet.

Is there a function that assures my child-theme’s styles to load last of all other styles?

[Leo]

Hi there,

Usually, the solution is to make your CSS more specific as Tom mentioned here:
https://generatepress.com/forums/topic/child-theme-loading-style-css-after-other-style-sheets/#post-306863

Or maybe one this would work for you?
https://generatepress.com/forums/topic/child-theme-loading-style-css-after-other-style-sheets/#post-307093

[Gabriela]

Hi Leo,
I don’t like the idea of being more specific. It is too complicated. Loading the CSS after every other styles is effective, since from Customizer it works.

I am considering this solution from your second link thread:

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' );
}

Look below, I have substituted some text there ☝. But it is still not working for me. I am using the child theme you provide, so here’s my function.php:

<?php
/**
 * GeneratePress child theme functions and definitions.
 *
 * Add your custom PHP in this file. 
 * Only edit this file if you have direct access to it on your server (to fix errors if they happen).
 */

function generatepress_child_enqueue_scripts() {
	if ( is_rtl() ) {
		wp_enqueue_style( 'generatepress-rtl', trailingslashit( get_template_directory_uri() ) . 'rtl.css' );
	}
}
add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 );

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

Now I have deployed it to a dev domain, so you ca see what’s going on:
https://ervasmagicas.kilate.pro

Do you think it’s better using “Snippets” plugin than writing in child’s functions.php?

[Tom]

That last function should work, but you need to dequeue generate-child instead of generatepress-child.

You can keep generatepress-child as your new enqueue (or name it something else).

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

That should make it so the child theme CSS loads after everything else.

[Gabriela]

Hi Tom,
Look what is my functions.php now:

<?php
/**
 * GeneratePress child theme functions and definitions.
 *
 * Add your custom PHP in this file. 
 * Only edit this file if you have direct access to it on your server (to fix errors if they happen).
 */

function generatepress_child_enqueue_scripts() {
	if ( is_rtl() ) {
		wp_enqueue_style( 'generatepress-rtl', trailingslashit( get_template_directory_uri() ) . 'rtl.css' );
	}
}
add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 );

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

Still not loading a lot of the child’s style.css…

Nevertheless, if I put all the child’s style.css content in Customizer CSS, everything comes alive!

[Tom]

Strange, can you disable your caching plugin for now while we debug?

[Gabriela]

Hi,
Sorry for the delay.

Yes, I have disabled it now for you.

[Tom]

That is super strange.

Can you try this as a test? It should remove the child CSS file completely:

add_action( 'wp_enqueue_scripts', function() {
    wp_dequeue_style( 'generate-child' );
}, 999 );

[Gabriela]

Hi Tom.

Look how functions.php is now:

<?php
/**
 * GeneratePress child theme functions and definitions.
 *
 * Add your custom PHP in this file. 
 * Only edit this file if you have direct access to it on your server (to fix errors if they happen).
 */

function generatepress_child_enqueue_scripts() {
	if ( is_rtl() ) {
		wp_enqueue_style( 'generatepress-rtl', trailingslashit( get_template_directory_uri() ) . 'rtl.css' );
	}
}

add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 );

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

add_action( 'wp_enqueue_scripts', function() {
    wp_dequeue_style( 'generate-child' );
}, 999 );

[Tom]

So that worked.

Now let’s try adding this:

add_action( 'wp_head', function() {
    wp_enqueue_style( 'generatepress-child', get_stylesheet_uri(), array(), filemtime( get_stylesheet_directory() . '/style.css' ), 'all' );
}, 999 );

[Gabriela]

Oh my Gosh,
Still the same error.

<?php
/**
 * GeneratePress child theme functions and definitions.
 *
 * Add your custom PHP in this file. 
 * Only edit this file if you have direct access to it on your server (to fix errors if they happen).
 */

function generatepress_child_enqueue_scripts() {
	if ( is_rtl() ) {
		wp_enqueue_style( 'generatepress-rtl', trailingslashit( get_template_directory_uri() ) . 'rtl.css' );
	}
}

add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 );

add_action( 'wp_enqueue_scripts', function() {
    wp_dequeue_style( 'generate-child' );
}, 999 );

add_action( 'wp_head', function() {
    wp_enqueue_style( 'generatepress-child', get_stylesheet_uri(), array(), filemtime( get_stylesheet_directory() . '/style.css' ), 'all' );
}, 999 );

Maybe it’s a script that’s being loaded in the footer that’s messing it all?

Maybe I shall try to disable all the plugins and enable each one, step by step?

[Tom]

It looks like the file is loading in the footer right now – did you adjust the function?

[Gabriela]

Hi Tom,
The function is still the last you see above.

The child stylesheet is loading in the footer, but there are many other scripts loading after it. Maybe the scripts are interfering.

I have turned off almost all plugins.

Still the same error…

[Tom]

My function above would add it to wp_head, not in the footer.

I don’t love this, but it seems like the only way to do what you’re wanting:

add_action( 'wp_head', function() {
    echo '<link rel="stylesheet" href="' . get_stylesheet_directory_uri() . '/style.css" type="text/css" media="all">';
}, 99 );

[Gabriela]

Hi Tom,
I can’t explain, but suddenly the child’s stylesheet became functional. And I didn’t put your last function (the one you don’t love).

A couple of days ago I had turned off almost all the plugins. And still most of the child’s styles were not loading from its folder. But now they are! Maybe it takes a while for the changes to propagate?
But still the child’s stylesheet is loading in the footer. And the function’s rule is that it loads in the head.
I would not like to keep things strange…
I am a designer, not very smart in development. But I am in the path to become a better developer, and I love clean code. I would love to discover why these strange things are happening. This is the first woocommerce site I am developing.
I wish to find the right way to do things. I am loving GeneratePress, and I want to become the smartest in developing upon it.

Have you any clues? Would you like to get into the wp-admin to look after?

[Author]

Posts