Changing derived site themes

Derived sites are sites that use ‘library themes’ or ‘public themes’. These themes were not custom made for a particular site or client, but have multiple sites that use that theme. It is important to remember that the source theme can push updates to all derived site themes. These updates override the existing theme files, content types and content fields. If you use a ‘library theme’ for your site, you can choose to unlink it from parent theme updates. However, if you want to use the parent theme’s updates, while still being able to change your derived site’s theme, there are a few things you can do:

For theme files

You can create a child theme inside your theme. This is done by creating a folder child_theme in the root of your theme. Inside the child_theme folder you can create theme files with the same paths as the regular theme files. When your site loads, Plate first looks if there are child theme files, and serves these if there are. This way you can preserve the original theme, have updates from the parent theme, while still being able to have your own custom theme. However, if you create new theme files that are not present in the original theme, you can place them among the regular theme files, instead of in the child_theme folder. Parent theme updates only apply to theme files that are also present in the parent theme, so you can safely create new files. However, if you delete an existing file from the original theme, a parent theme update will recreate it.

Example
Let’s say you want to change the css of a derived site. The best course of action is to create a new css file inside the original theme’s assets folder, let’s say assets/css/my-css.css. In this css file you can override the site’s css to whatever you want. To load your extra css file, you need to override the existing file where all css files are loaded. Let’s assume the optimal situation is the case, the theme builder made a different include theme file for all assets:

layouts/theme.plate

<head>
  {% include "layouts/_asset_files" %}
</head>

layouts/_asset_files.plate

{{ 'css/existing-css-file.css' | asset_url | stylesheet_tag }}

To load in your new css file, you’d need to override layouts/_asset_files.plate inside the child_theme folder:

child_theme/layouts/_asset_files.plate

{{ 'css/existing-css-file.css' | asset_url | stylesheet_tag }}
{{ 'css/my-css.css' | asset_url | stylesheet_tag }}

Now you can change your site’s css inside my-css.css, without having to change the original theme, so you can safely profit from the parent theme’s updates.

child_theme/layouts/_asset_files.plate overrides the ‘regular’ layouts/_asset_files.plate. Your custom my-css.css can safely be placed among the ‘regular’ theme files, in the theme root.

Keep in mind to keep the files in child_theme small and overridable. If you put an important theme file like theme.plate in child_theme, it means this theme file does not receive any updates, which can break your site in the future.

Keep the following best practices in mind:

Use as many included includes as possible. The smaller the theme files, the less a user has to override, if he wants to.
Make sure to send a notification about an update before actually pushing the update. You can send a notification to theme users from the theme dashboard.