Sage 9 child theme

Sure, here’s my process

Set the child theme’s parent

Add the correct template name by appending /resources to the parent theme folder:

// child-theme/resources/style.css
/*
Theme Name:         Sage Starter Theme
... etc

Template:           parent-theme/resources
*/

Remove conflicts / duplicates
You need to remove functions in the child which are already inherited from the parent theme

// Remove duplicate files
child-theme/app/admin.php
child-theme/app/filters.php
child-theme/app/setup.php

Start fresh (optional)
I’d recommend removing all template files in the child theme, overwriting them as needed

// Remove view files, overwrite later
child-theme/resources/views/*

From here we can use child template overwrites as we normally would

Import parent styles (optional)
Using your parent theme styles as a base can be helpful and more maintainable

// child-theme/resources/assets/styles/main.scss
@import "/../../../../parent-theme/resources/assets/styles/main";

Note There are issues when using @import '/autoload/**/*'; within the parent theme - manually including assets is your friend again here.

Import parent JS (optional)
Remove all contents of main.js in the child theme, and import the parent

// child-theme/resources/assets/scripts/main.js
import '../../../../parent-theme/resources/assets/scripts/main.js';

You need to run yarn and composer install within both themes. Your build process is done the same ol way as you always have per theme

Oh, and
This doesn’t account for any node modules, images or other assets between themes. If you do roll with the import options above, you’ll need to decide on whether to duplicate those or go a little further with customisation

11 Likes