Snippets

Snippet: Load Child Theme style.css After Parent Theme style.css

  • Updated:

Important: This shouldn't be necessary anymore, by default the parent style.css file should load first. So before using this code make sure it's absolutely necessary for your site.

By default when you use a child theme in WordPress it doesn't actually load the parent CSS file so you would generally add a function to your child theme's functions.php to load the parent CSS file. Now, this results in the parent CSS file loading after the child theme style.css so the parent theme's CSS will take priority. If you want your child theme's style.css file to load after the parent style.css so that your child theme takes priority you can use the following function to enqueue the parent CSS file instead of the default way of loading it.

add_action( 'wp_enqueue_scripts', function() {

	if ( ! defined( 'WPEX_THEME_STYLE_HANDLE' ) ) {
		wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', array(), '1.0' );
	}

	// First de-register the main stylesheet (which is now your child theme style.css)
	wp_dequeue_style( WPEX_THEME_STYLE_HANDLE );
	wp_deregister_style( WPEX_THEME_STYLE_HANDLE );

	// Add the parent style.css with the main style handle
	wp_enqueue_style( WPEX_THEME_STYLE_HANDLE, get_template_directory_uri() . '/style.css', array(), WPEX_THEME_VERSION );

	// Re-add child CSS with parent as dependency
	wp_enqueue_style( 'child-css', get_stylesheet_directory_uri() . '/style.css', array( WPEX_THEME_STYLE_HANDLE ), '1.0' );

}, 40 );
All PHP snippets should be added via child theme's functions.php file or via a plugin. We recommend Code Snippets (100% Free) or WPCode (sponsored)
Back To Top