[Resolved] Style Sheet Dependencies: forcing child theme CSS to load after others

[Jeff]

I’m working with an under-construction site, so I can’t give URL just now. But…

I want the styles.css file in my child theme to load AFTER various others.

I’m using the $deps parameter within wp_enqueue_style(), but it’s not working. I use and have used this approach often (successfully) with other themes.

[I’m not trying to add a second topic to one post, but this seems related:]
Trying to debug this issue, I created a simple CSS file (nwb.css) with one rule in the child folder.
I added the wp_enqueue_style() code to functions.php in my child folder. Uploaded. Refreshed browser.
This new CSS file isn’t listed anywhere in view-source.

Look forward to your help.

[David]

Hi there,

can you share the enqueue function you’re using ?

[Jeff]

I have simplified things for diagnostic purposes.

This is currently in the child theme folder’s functions.php:

add_action( 'wp_enqueue_scripts', 'nwb_enqueue_styles' );
function nwb_enqueue_styles() {
	$deps = array(
		'generate-style'
	);
	wp_enqueue_style( 'jeff-styles', get_stylesheet_directory_uri() . '/nwb.css', $deps );
}

It’s not working. The jeff-styles stylesheet appears above generate-style.

You can see it in action here:
https://willpowerengineering.com/test/

[David]

Try the method that Tom provides here:

https://generatepress.com/forums/topic/how-to-deactivate-default-styles/#post-1676329

[Jeff]

Here’s my functions.php:

add_action( 'wp_enqueue_scripts', function() {
	wp_dequeue_style( 'generate-child' );
	wp_enqueue_style( 'generate-child' );
}, 500 );
add_action( 'wp_enqueue_scripts', 'nwb_enqueue_styles' );
function nwb_enqueue_styles() {
	$deps = array(
		'generate-style'
	);

	wp_enqueue_style( 'jeff-custom-styles', get_stylesheet_directory_uri() . '/nwb.css', $deps );
}

And here’s a snapshot of the view-source, which you can see yourself from the link in my previous post:

<link rel='stylesheet' id='jeff-custom-styles-css'  
<link rel='stylesheet' id='tablepress-default-css'  
<link rel='stylesheet' id='font-awesome-official-css
<link rel='stylesheet' id='generate-child-css'  href
<link rel='stylesheet' id='font-awesome-official-v4s
<style id='font-awesome-official-v4shim-inline-css'>

[Jeff]

By the way, when I removed ‘generate-child’ from the $deps array (making it empty), the result is similar; i.e., ‘generate-child’ loads after.

[David]

Sorry .. i completely jumped the gun there, i should have looked to see this was a separate styles sheet to the child themes styles. So you don’t need Tom’s code.

Try just increasing the priority of your wp_enqueue_scripts eg.

add_action( 'wp_enqueue_scripts', 'nwb_enqueue_styles', 500 );
function nwb_enqueue_styles() {
	$deps = array(
		'generate-style'
	);

	wp_enqueue_style( 'jeff-custom-styles', get_stylesheet_directory_uri() . '/nwb.css', $deps );
}

And you shouldn’t require dependencies.

[Jeff]

Dang. (What’s the emoticon for ’embarrassed’?)
Basic WordPress 101.
Sorry I even bothered you.
Thanks much.

[David]

No problems – glad to be of help 🙂

[Author]

Posts