Archived topic
Using GP Child theme with multiple stylesheets?
2 replies · Started by Tim on February 26, 2022
Hello,
I am using GP with a child theme and put all my custom CSS in style.css in the child theme's folder (nothing in WP's Additional CSS).
Now, I struggle to make the stylesheet structured and clean because I have so many rules, mostly related to customizing WooCommerce.
Anyway, I have been thinking it would be great if I could split the CSS file into multiple so I can for example have one .css file with code related to the product page, one for the checkout page, and so on. Or maybe one for mobile, one for tablet and one for desktop. You get the point.
How would I go on about implementing this? :)
So I managed to find the answer to this myself!
If someone were to Google this in the future, this is what I did:
- Create the .css file you want in the folder of the active theme.
Add this code to functions.php or through Code Snippets:
// register the stylesheet
wp_register_style(
'mobile', // name of stylesheet
get_stylesheet_directory_uri() . '/mobile.css', // name of the .css file you created
'null', // any dependencies
'null', // version number if you want
'screen and (max-width: 767px)', // media type, replace with just 'screen' if you want it to load for all devices
);
// ready the stylesheet
wp_enqueue_style( 'mobile' );
// load the stylesheet into the frontend
function custom_stylesheet_mobile() {
wp_enqueue_style( 'mobile', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'custom_stylesheet_mobile' );If using a regular theme instead of a child theme, replace get_stylesheet_directory_uri() with get_template_directory_uri()
Glad to hear that - and thanks for sharing!!
