I have a multi-site Wordpress setup. Each sub-site uses it's own child theme, but there is one stylesheet that has CSS rules that should be used on several of these sub-sites. I do not want to have multiple identical stylesheet files for each sub-site, because when I make changes to it, I would have to make these changes in every instance of the stylesheet, or have to copy-paste it to each sub-site.
How can I tell each sub-site to use just one instance of that stylesheet? Perhaps I can create a style.css file for every sub-site, and inside it, write some kind of redirect to the main style.css (one that actually contains the rules)?
I have a multi-site Wordpress setup. Each sub-site uses it's own child theme, but there is one stylesheet that has CSS rules that should be used on several of these sub-sites. I do not want to have multiple identical stylesheet files for each sub-site, because when I make changes to it, I would have to make these changes in every instance of the stylesheet, or have to copy-paste it to each sub-site.
How can I tell each sub-site to use just one instance of that stylesheet? Perhaps I can create a style.css file for every sub-site, and inside it, write some kind of redirect to the main style.css (one that actually contains the rules)?
First off, you'll obviously need to be using the same parent theme for all sites. You then set up each sub-site with a child-theme for that parent theme.
To use the same stylesheet on multiple sites, add the following code to the functions.php file of each sub-site:
function import_shared_style_sheet() {
wp_enqueue_style( 'shared-style-sheet', content_url( '/themes/SOURCE-THEME/style.css') );
}
add_action( 'wp_enqueue_scripts', 'import_shared_style_sheet' );
SOURCE-THEME needs to be replaced with the folder name of the theme you are sharing the master styles.css file from.
Keep in mind that the styles.css file of the child-theme of each sub-site will still load. So be sure to remove all css from below the theme data at the top of the file. For example, you should only have something like the following (it will differ, based on whatever child-theme you are using). In this example, the parent theme (for all the sites) is twentytwenty, so the shared styles.css file is in a twentytwenty child theme.
/*
Theme Name: Sub-site Theme (child theme)
Theme URI:
Template: twentytwenty
Author:
Description: Child theme of Twenty Twenty. Shares style.css of XXX child theme.
Version: 1.01
Updated: 2021-02-01 01:14:52
*/
Note, that if you end up with some styles you need to apply only to a specific sub-site, you can still add those styles to the styles.css file of that sub-site's child-theme styles.css file.
Use the wp_enqueue_style function, and put the path to the master CSS sheet in the source src="full-path-goes-here". See WP docs on function here: https://developer.wordpress.org/reference/functions/wp_enqueue_style/
If you put the universal styles in the parent theme's stylesheet, those will be applied regardless of child theme. They just have to be more specific than the child themes' styles.
You won't have multiple identical stylesheets; MultiSite stores all sites' themes in one central location, and typically with a parent-child theme setup you include both the parent CSS and the child CSS.