Same theme in WordPress multisites but with custom css?

Question

How can I apply the same theme on a WordPress multisites but with differents theme options on each site ?

For example :

site1 --> Theme X with red main color

site2 --> Theme X with green main color

Regards,

Answer 1

Since you need the same theme for both sites, I really advise you to use child themes:

Site 1 - Main theme:

• Create /wp-content/themes/site1

• Create /wp-content/themes/site1/style.css:

  /*  
  Theme Name: site1
  Template: site1
  Description: Site1 default theme
  Version: 1.0
  Author: <Author_Name>
  Author URI: <Author_URI>
  */
  

• Add the rest of the required template files

Then linking the main theme styles and adding your custom class when creating the child theme as following:

Site 2 - Child theme:

• Create /wp-content/themes/site1-child

• Now add all the files you need to override in your child theme in /wp-content/themes/site1-child/

• Create /wp-content/themes/site1-child/style.css:

   /*  
      Theme Name: site1 child
      Template: site
      Description: Site1 child theme
      Author: <Author_Name>
      Author URI: <Author_URI>
      */
  

• Add this on the top of your /wp-content/themes/site1-child/style.css (below the commented theme info) file to include the styles of your main theme within the child:

  @import url("../site1/style.css");

• Add your custom styles below the @import as desired

Sites configuration:

After creating the sites in the network panel (/wp-admin/network/sites.php), go to each site's dashboard:

• /wp-admin/ for the main site
• /sitename/wp-admin for the second site

Within the theme section, make sure to assign:

• your main site to site1 theme
• your second site to site1-child theme

I hope this helps. Cheers!