Hey @craigpearson! Can you point me in the right direction for the beta 4 child theme modifications? I’m having trouble finding any official documentation and I’d really like to use child themes across a multisite I’m starting development on. Thanks!
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
composer install within both themes. Your build process is done the same ol way as you always have per theme
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
Thanks for the continued updating on this post.
I’m attempting to import parent JS as indicated here but am getting the error:
This relative module was not found: ./autoload/**/* in ../my-parent-theme/resources/assets/scripts/main.js
Do you have any guidance on this?
Note There are issues when using
@import '/autoload/**/*';within the parent theme - manually including assets is your friend again here.
When using wildcards to autoload in a child theme - from the parent, there’s issues.
For our projects we don’t need this autoload behaviour so to keep this functionality might need further customisation.
To resolve your issue (at a loss of auto imports) just include your autoloaded scss/JS files in your parent theme manually. For example, in scss:
I wish I could verbalise more succinctly why this is the case, but in all honesty I’ve had a couple of wines because of that Santa guy
I’m struggling to get a child theme going with the latest release – has anyone been able to get things running?
Thanks @craigpearson for the pointers so far, should it be a matter of updating the paths you’ve provided in your instructions above?
Sorry for the confusion but the steps to follow would be these steps alone: Sage 9 child theme
Following steps previous that post are no longer relevant.
Just to confirm the approach mentioned in there still works with the stable release of Sage V 9.0.0
If you’re getting any specific errors / issues feel free to share and hopefully I can offer some advice