Child Themes

Roadmap Card

Description

There is a scenario I think many will appreciate. I would like to use a specific theme (Chakra Frontity theme) however I do not want to use it in the default configuration. I want to be able to edit the files and change parts of the code but also maintain feature parity with subsequent releases and bugfixes. I could just copy the theme to packages and edit but then I will have to cherry-pick new features added by the original developer.

Examples

WordPress itself is aware of this and offers the concept of child themes whereby the directory structure of the original theme is mirrored and if any files are found and named the same - they overwrite the original source files.

Possible solution

A possible parameter inside the theme object called child that takes the name of the child theme used under packages while still leaving the original theme under node_modules so it can be updated via npm or yarn.

packages: [ { name: "frontity-chakra-theme", state: { theme: { child: "packages/chakra-child-theme" } } }, ]

Thanks for the suggestion @b-b0t! You’re totally right that it would be a great feature. In fact, is something we already discussed some time ago at this topic, maybe you find some useful information.

We can continue the discussion here to analyze what is the best option for this, let us know your thoughts :slightly_smiling_face: . I’ve added this to our roadmap, so we can keep track of the status.

My mistake, that thread was a difficult one to correlate to Child Themes :slight_smile:

@b-b0t a couple of questions.

The problem with child themes is that you can’t change the folder structure.

  1. Is not being able to change the folder structure something that may bother you?

For that reason we thought about introducing a command like frontity update-package frontity-chakra-theme that will overwrite your files. Then, you can review the changes using a git tool and decide which ones you want to apply and which ones you want to discard.

  1. Is a frontity update-package command something that may work for you?

I think this child-theme feature is something that a lot of developers are going to expect from Frontity with exactly the behaviour explained by @b-b0t

The problem with child themes is that you can’t change the folder structure.

  • Is not being able to change the folder structure something that may bother you?

The cool thing about child themes (in Wordpress) is that you can overwrite specific files while taking advantage of the development in the original theme (you can update it if there are updates on the parent theme), so I think not being able of changing the structure in the child-theme is something assumed by Wordpress developers

For that reason we thought about introducing a command like frontity update-package frontity-chakra-theme that will overwrite your files.
Then, you can review the changes using a git tool and decide which ones you want to apply and which ones you want to discard.

  • Is a frontity update-package command something that may work for you?

I don’t quite understand the benefits that this command would have. Can you explain in more detail what would be the workflow with this command for someone that wants to do small customizations to an existing theme (parent theme)?

Sure. I did an explanatory video about this possible command: Command `update-package`.

Feel free to give your feedback on that topic :slight_smile:

1 Like

Hi @luisherranz, doing a run of all the interesting topics on here.
Hope you’re well.

  1. I think it would be nice to have a flexible structure however the theme could be isolated into a folder called “child” and then all changes can be made outside the folder and imported in.
    Agree with @juanma - WordPress users are used to having a set structure. It’s nice when standards that have been thought out by teams are enforced. JAMstackers are especially fond of this, one less thing to think about.

  2. The git tool would be cool because you could cherry pick and not overwrite the whole file, but it is forcing the user to do so whenever they update. The child theme mirroring could give warning in console of the list of files currently being overwritten.

WooCommerce warns of the template files being overwritten and isolates them to a single folder: https://docs.woocommerce.com/document/template-structure/

Either way it’s a difficult choice if I want to modify the theme entirely or pull it in via node_modules but not sure how point 2 would be any different from adding an upstream in git.

1 Like

Thanks for your feedback @b-b0t.

Gatsby introduced the “child-theme” system a while ago, but call it Shadowing. It would be great to investigate how it is going, if people are using it, and what problems have they found.