How can I enqueued styles using a child theme?

[ianizaguirre]

I asked this question here (https://theme.co/apex/forum/t/after-a-child-theme-is-made-how-can-i-connect-another-child-css-file/18799)

and the answer they gave me worked:

function child_enqueue_styles() {
	
	// enqueue child styles
	
	wp_enqueue_style('child-theme', get_stylesheet_directory_uri() .'/cta-bar.css', array());
	
}
add_action('wp_enqueue_scripts', 'child_enqueue_styles');

So that answer let me add another css style sheet to my child theme.

But I want to know how I can add another one now? As me trying this did not work:

function child_enqueue_styles() {
	
	// enqueue child styles
	
	wp_enqueue_style('child-theme', get_stylesheet_directory_uri() .'/cta-bar.css', array());
	wp_enqueue_style('child-theme', get_stylesheet_directory_uri() .'/eleg-btns.css', array());
	
}
add_action('wp_enqueue_scripts', 'child_enqueue_styles');

[paul.r]

Hi,

The handle should be unique

eg.

function child_enqueue_styles() {
	
	// enqueue child styles
	
	wp_enqueue_style('child-theme-cta', get_stylesheet_directory_uri() .'/cta-bar.css', array());
	wp_enqueue_style('child-theme-eleg', get_stylesheet_directory_uri() .'/eleg-btns.css', array());
	
}
add_action('wp_enqueue_scripts', 'child_enqueue_styles');

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

Hope that helps.

[retrovative]

@paul.r’s fix (which is correct and gets you on your way) still will not include your child theme’s CSS in the proper/expected order. You want your child theme’s CSS to be loaded last to ensure your styles trump those of the theme. Simply enquing and/or registering in a specific combination does not enforce the order as you might expect. (As an exercise, swap the order of the wp_enqueue_style() invocations above and inspect the code generated). Sigh.

The solution lies with the inclusion of a version number number to the add_action() function call when you enqueue your scripts. Default is 10. Include a value greater than that - I use 9999 - to enforce the order you want which is last. In your example above, change the add_action() call as follows:

add_action(‘wp_enqueue_scripts’, ‘child_enqueue_styles’, 9999);

Clear caches and refresh your page. You can also view the source-code generated to confirm the ordering. HTH.

[christian]

Thanks for chiming in, @retrovative.