Subtheme for Subsite in Multisite

Question

I have a Drupal 8 Multisite setup with the following Folder structure:

• themes
  • custom_theme
    • main_custom_theme
• sites
  • site1
    • themes
      • subtheme1
  • site 2

So I want both sites to use main_custom_theme, but site1 needs to override one template (page.html.twig) with subtheme1. subtheme1 folder contains a subtheme1.info.yml as follows:

name: subtheme1
description: "Custom sub-theme"
core: 8.x
type: theme
base theme: main_custom_theme

I rebuilt all caches (Backend and drush cr, but drush cr might not clean caches of subsites?) but cannot select the new subtheme in Backend of site1. What am I missing?

---

This is the Twig Debug output after using leymannx answer, subsites path is "leistungen"

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'page' -->
<!-- FILE NAME SUGGESTIONS:
   * page--leistungen.html.twig
   * page--node--560.html.twig
   * page--node--%.html.twig
   * page--node--article.html.twig
   * page--node.html.twig
   x page.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/custom/my_custom_theme/templates/main/page.html.twig' -->

---

I have a question that builds on this one... I published it appearently with a different user, without wanting to. Still new to not only reading stackexchange :)

If I try to do the same for the node of my content type, which is using a template named node--CONTENTTYPENAME.html.twig at the moment, I can insert a name suggestion node--NAMEOFSUBSITE.html.twig, which will then be used for ALL nodes. I'd like to insert a suggestion such as node--CONTENTYPENAME--NAMEOFSUBSITE.html.twig, for only this one nodetype.

How can I do that?

Thanx in advance!!

Answer 1

In Drupal 8 you are supposed to organize your themes and multi-site instances like in the following structure. I only highlight the relevant folders.

__docroot
  |__modules
  |  |__contrib
  |  |  |__devel
  |  |  |__views
  |  |__custom
  |     |__my_module_abc
  |     |__my_module_xyz
  |__sites
  |  |__default
  |  |  |__settings.php
  |  |__site1
  |  |  |__settings.php
  |  |__site2
  |     |__settings.php
  |__themes
     |__contrib
     |  |__bootstrap
     |__custom
        |__my_bootstrap_subtheme

So, if you want to create a sub-theme of a custom theme, you also have to place it inside docroot/themes/custom. Then it will appear in your back-end where you can enable it.

---

But what I would recommend instead of adding another sub-theme, is to simply add a template suggestion based on the multi-site instance name via hook_theme_suggestions_HOOK_alter. By that you can move on with only one custom theme (which is much easier to maintain in the end), and inside its MYTHEME.theme file you'll switch the page template for your certain multi-site instance like following.

/**
 * Implements hook_theme_suggestions_HOOK_alter().
 */
function MYTHEME_theme_suggestions_page_alter(array &$suggestions, array $variables) {

  $site_path = \Drupal::service('site.path');
  $site_path = explode('/', $site_path);
  $site_name = $site_path[1];

  $suggestions[] = 'page__' . $site_name;
}

Now you simply can place page--site1.html.twig in your theme's template folder and site1 will take this page template instead the default page.html.twig. (Source)

---

Tried it on a fresh D8 with Twig debugging enabled and it works just fine.

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'page' -->
<!-- FILE NAME SUGGESTIONS:
   x page--site1.html.twig
   * page--front.html.twig
   * page--node--1.html.twig
   * page--node--%.html.twig
   * page--node.html.twig
   * page.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/custom/my-custom-subtheme/templates/page--site1.html.twig' -->