[Resolved] Child theme style enqueues are being ignored

[Sebastian]

Hey guys,

This is a strange one. I’m developing a local site, using the usual enqueue method for a child theme but the stylesheet is not even showing up in the head when I check the source. I have downloaded and used the files from generatepress.com and used it several times before without any issues.

Here’s the enqueue in functions.php:

function my_included_files() {
    wp_enqueue_style('my_main_styles', get_theme_file_uri('/build/assets/css/mystyle.css'), array());
}
add_action('wp_enqueue_scripts', 'my_included_files');

What on earth is going on? Is there some recent update that could cause this perhaps?

Thank you!

[David]

Hi there,

for stylesheets in the child theme, you should use the: get_stylesheet_directory_uri instead of get_theme_file_uri

https://developer.wordpress.org/reference/functions/get_stylesheet_directory_uri/

[Sebastian]

I have tried both and neither does any difference for me I’m afraid. Besides, as I stated earlier, I have used this before without any problems? There must be something else creating the problem.

Sidenote: Why should I use get_stylesheet_directory_uri() in favour of the other? This is contradicting from what is said here.

Thanks

[Fernando]

get_stylesheet_directory_uri() works for the Child theme. The other retrieves the parent uri.

Can you try this:

function my_included_files() {
    wp_enqueue_style('my_main_styles', get_stylesheet_directory_uri() . '/build/assets/css/mystyle.css', array() );
}
add_action('wp_enqueue_scripts', 'my_included_files');

[Sebastian]

That is the ecxact code I’m using right now. I’m aware of the difference in syntax between the two. And actually, the WP code reference says “get_theme_file_uri retrieves the URL of a file in the theme”, and not the parent.

Anyways, it does not work. Could me using the theme library have anything to do with this? This is SO frustrating.
If it at least did turn up but loaded before the parent theme files, that I’d understand. But not showing at all is really strange.

[David]

Can you share a link to the site ?

[Sebastian]

Yes, I can share with you a LocalWP “Live link”: witty-verb.localsite.io
Login credentials are submitted in the private info area.

[Sebastian]

As of now I have copied > pasted all custom GP css code into my child theme css file. That’s why it looks so crappy.

[David]

Any chance of a temporary admin login so i can see the backend ?

[Sebastian]

Yes, of course. Please see the private info area again.

[David]

I Activated the Child Theme.
On the front end developers tools i see a 404 error for this:

https://your-domain.localsite.io/wp-content/themes/generatepress_child/build/assets/css/mystyle.css?ver=6.0.1

So the get_stylesheet_directory_uri() is doing it thing as that returns this part of the URL:

https://your-domain.localsite.io/wp-content/themes/generatepress_child/

Can you confirm that these folders and the file exists in your child theme:

'/build/assets/css/mystyle.css'

[Sebastian]

I’m sorry, I was trying to rename the file just to see if anything changed. Now, everything is back to normal again and yes, I can confirm that all is there.

[David]

Is that fixed now ? As i see the mystyle.css loading on the frontend ?

[Sebastian]

Yes, now it is actually loading!? Why – all of a sudden?
However it’s loading before the parent theme css. When adding a high priority as the last argument, the linkrel disappears again. Do you have a proper solution for this?

[David]

You can define a dependency when you enqueue the styles:

https://developer.wordpress.org/themes/advanced-topics/child-themes/#3-enqueue-stylesheet

For example we can make it dependent on the parent themes main style sheet which has a handle of: generate-style.

See here:

https://github.com/tomusborne/generatepress/blob/adfe090929b0515cdf894f4c6b722cfe8c0790dc/inc/general.php#L39

By doing so WP will load your stylesheet after any dependencies.
Heres the updated code:

function my_included_files() {
    $parent_style = 'generate-style';
    wp_enqueue_style('my_main_styles', get_stylesheet_directory_uri() . '/build/assets/css/mystyle.css', array( $parent_style ));
}
add_action('wp_enqueue_scripts', 'my_included_files');

[Author]

Posts