How to deal with child theme updates

[JUN-K4NEKO]

I understand that we can use the child theme so that the parent can be updated. But what can we do when there are updates on the child theme? Between June and August this year, the child theme had 4 updates. And I've seen dependency problems with the parent theme as well. Shouldn't the child theme have no updates?

[axlright]

I'm also really curious about this. I have ~10 installs of understrap and understrap-child. The parent themes are completely stock. The child themes obviously have lots of customizations.

For each install, I have both the parent and child themes set up as submodules in Git that have the upstream set to a forked instances of the parent and child themes. So my approach (in theory) for updates is going to be to update my forked instances then update the upstream submodules. What I don't know is whether I'm going to need to re-run npm install on the child themes, and what that will do to customizations, particularly in the src directory (where I have custom scripts) and to the sass directory where there are both customizations as well as stock dependencies.

In practice, I don't know how this is going to work.

@holger1411 how do you handle updates to both the parent and child themes for what must be dozens of applications you have running for various clients?

Thanks!

[JUN-K4NEKO]

@axlright Thanks! I thought I was alone on this because I couldn't find a discussion on this topic.

Another thing that kinda bothers me is that UnderStrap is based on _s right? I don't have any experience with _s, but from what I understand, we're supposed to use _s as starter theme and not as a parent theme. _s also gets updated all the time, but instead of having to worry about the updates of _s, we are supposed to go on, and to update the theme by ourselves, meaning we should take full responsibility of our own theme. So, although having a child theme for UnderStap sounds nice, it doesn't seem to fit the philosophy of starter theme.

Which brings me to another question about merging the child to parent. I've seen some discussions about this, but I haven't found any that explains how to do it. If we can merge the child to parent with one command, it would be ideal for me. That way, we can develop one parent theme for many clients, and make the customization in a child theme at each website. But if we can't automate this merging, it will be unrealistic.

[axlright]

I'm not sure I agree with all of that. It is possible to update the understrap parent theme with one click / command, either from git (if you use a git workflow) or with a simple zip update. The understrap parent theme is easily updated when used as a parent theme because no part of it gets customized.

And the issue of an _s single theme versus a parent theme / child theme relationship is one of personal preference and is kind of outside the scope of a conversation about updating a child theme. For example, there's nothing stopping you from customizing the understrap parent theme and doing manual updates on it just like you would for _s (never using the understrap child theme). The choice to use the understrap child theme is up to you - you don't have to do it.

The conversation of how to best update the understrap child theme, especially with the npm workflow and it's dependencies, is one I'm interested in learning more about.

[JUN-K4NEKO]

@axlright You're right, I shouldn't have mixed my other issues here.

Yes, my primary concern is how to update the child theme.

[axlright]

@nuthinbutajthang thanks + I agree. Will be interesting to hear how others are updating their customized child themes.

[l1un]

On topic: does anyone manually update Woo Commerce templates, or just wait for an official update? Perhaps I need to dig in and get my hands dirty here? Always appreciate the development on this theme btw. Thanks.

Your theme (UnderStrap Child) contains outdated copies of some WooCommerce template files. These files may need updating to ensure they are compatible with the current version of WooCommerce. You can see which files are affected from the system status page. If in doubt, check with the author of the theme.

[holger1411]

Basically the child theme did not include any code besides some basics in functions.php. But it handles its own dependencies.

So if there is an update it affectes the package.js and gulpfile.js only. So you just have to replace them and rebuild the theme (<- Thats what I do as soon as I released a new parent theme version).

BUT: If you add a lot of Bootstrap 4 markup to your child theme and the BS markup was changed, you have to adjust it manually.

There was a lot of stuff changed from BS4 Alpha to Beta, but once stable, I am sure there markup changes will be minimal.

[holger1411]

@derekh77: By default the child theme did not include any WooCommerce templates. If you copy them from the parent theme you have to update it from there (copy & paste).

[axlright]

Got it. Awesome @holger1411 thanks for the reply.

Can you confirm / comment on this workflow?

To update the understrap parent theme, basically delete local copy and pull down an entire new copy from GitHub or forked repo. The parent theme gets no local modifications, so the entire thing should be able to be wiped and replaced. Or update parts as you see fit. But basically, there's no issue here. I'd assume, though, that we'd want to do this first as the understrap parent theme contains some of the dependencies for the understrap_child theme.

To update the understrap_child theme, we're really just updating dependencies. Update from the GitHub repo / forked repo (most likely just the package.js and/or gulpfile.js only) and re-run npm install and gulp copy-assets and check for any conflicts with updated Boostrap markup.

Let me know if that sounds good / if you have any comments.

[axlright]

@holger1411 Thanks for the hard work and for the recent update to 0.6.6 on the understrap theme. After updating the parent understrap theme, do you recommend running npm install and gulp copy-assets again on the child themes? What is the recommended update process for the child theme when the parent theme is updated?

Thanks!

[shansmith01]

@axlright my process for updating my child goes like this (welcome to get suggestions on a better way)

I have made several customizations to my child theme and have added other bits of code like rssb and sticky bits. I manage these through NPM so my gulp file and package file are customised.

When @holger1411 makes an update of the main theme I check for differences between my NPM and gulp and make changes as appropriate.

I then run npm update and gulp-copy assets.

I imagine if I encountered a new dependency in the mix I would run npm install instead.

So far this seems to work

If that's not the way to go about it I would love someone to tell me :-)

[Thomas-A-Reinert]

This is also a cross-reference to How to make my own child theme (not using understrap-child) #436 , where some possible solutions have already been posted, that may or may not work out for you. I´ll keep posted to both, but currently lack the time to read/follow all of those, cos i´m currently finishing two projects and already starting two others.. So it´s a hard time following and I´m just trying to catch up while syncing GIT´s and FTP´s ;) Once I got some spare time and everything got sorted out, I´ll try to find out a definitive solution and maybe some workarounds.

Let´s get clear about a single definition first, ´cause I think that might be the point of some of the confusion on "How to make my own child theme (not using understrap-child)": What do you EXACTLY mean by "Child-Theme"?

Is it:

• a.) a custom made Child-theme based on the pure, freely available, raw, un-customized Child, Read: THIS repository OR
• b.) one of those available commercially or for free from on Holgers´ Site (Which ain´t publicly available on GIT, I assume)?

If a.) Follow the instructions on https://github.com/holger1411/understrap/issues/436#issuecomment-339677616 . Please let me know if this does NOT work out and I´ll try to find a different or more precise solution once I find the time, okay? (May take a while)

If b.) You´re kina effed, because those themes were made to serve a certain purpose/style and were probably not meant to be customized. They were built to serve the needs of those not being able to customize UnderStrap on their own. The only chance you may have is to run some kind of DIFF-Tool like WinMerge if you´re on Windows. If you´re on Linux you may know your ways around. If you´re on Mac - God bless you, but I can´t help. But I guess "theres an effin´ App for that" ;) Please correct me, if I´m wrong @holger1411 !

And @holger1411 - PLEASE PLEASE do us a favour: Don´t name them all "Child-theme". Yes, they are. But they got totally different aspects. My own built will never ever have any updates that I don´t apply, but yours will have. Let´s maybe find some other wording?

Sidenote: Though I´m trying, I still haven´t found the WordPress-Stone-of-the-Wise. So PLEASE take my word as the "ultimate solution". I´m still willing to learn! And there may also be some "dirty hacks" that may work. Let´s discuss them, please! Any idea is welcome!

[JUN-K4NEKO]

@Thomas-A-Reinert For this issue (#101) I'm talking about updating a.), and for the other issue (#436) I'm talking about creating a general WordPress child theme like described here on top of Understrap based parent theme.

[Thomas-A-Reinert]

Then you should try my possible solution mentioned in the other post and let us know if it works out!

Both things are the same or am I wrong?

[axlright]

Maybe I'm totally misunderstanding what others are talking about. My main issues are:

1) usually child themes are totally bare and don't themselves get updated. They exist just to house customizations - css, js and php - on the parent theme. In the case of understrap_child, the child theme itself is getting updated by @holger1411 and that messes with my brain. I then have to figure out how to update the child theme when the developer pushes an update, and that's not in my normal set of experience with child themes.

2) In the case of understrap_child, the child theme has a lot of internal dependencies on the parent theme. This isn't super uncommon, as updating a parent theme often means checking whether it will break anything in the child theme's customizations. But in this case, when the parent understrap theme gets any update, I'm left figuring out if I have to re-run npm install and gulp copy-assets and re-build the child theme which somewhat like #1 isn't in my normal experience of using a child theme.

As I have a dozen or so client projects running in the understrap_child theme, I'd like to figure out whether:

1) the child theme itself will continue to get updates

2) whether the child theme needs to be re-built every time there's an update to the parent understrap theme.

I'm not sure whether that's a similar issue to what others are having.

[silverdarling]

This is also my issue. My understanding is similar -

1) A child theme is for customisation. It does not get updated. 2) The parent theme does get updated

I'm new to npm and gulp so paid for BASE child theme to start me off. I now have two heavily customised versions of this child theme.

I got gulp working with latest parent and child updates by -

1) Create new project , install new versions of parent and child theme 2) Install npm in child theme directory 3) Copy files from my version of child theme to new child theme directory 4) Merge new child theme and version-of-child theme functions.php

That's a new and longer than usual process for me. Key was starting with fresh clean install, simply updating parent and child themes and npm etc didn't work for gulp workflow and overwrote files.

I like understrap a lot. Great way to learn new process for me, but a child theme update had me puzzled. I'm hoping there won't be another child theme update but if there is would be good to know what's changed before updating.

[holger1411]

Yes and no. The child theme itself is indipendend from the parent child. You can compile your own css/js, use your own sass variables etc. You get a slim, minified and uglified js/css file at the end instead of pull in everything from the parent and than adding overwrites.

But if the parent them uses another dependency version (for example after updating from BS3 to BS4) the parent them uses the new markup. To cover this you have to update your child themes dependencies, too. And thats why the child gets updates, too.

The easiest way to update your child theme is to overwrite the package.json and gulpfile.js with the new files. Than run "npm install" followed by "gulp scripts" and "gulp styles" to rebuild your child theme.

So you can keep your changes but rebuild it with new dependencies and keep it compatible with the parent theme

[axlright]

Thanks for this explanation @holger1411

Is running gulp copy-assets no longer required? Seems to happen as a part of npm install but I'm still running gulp copy-assets out of habit from original instructions.

-Alex

[holger1411]

gulp copy-assets runs automatically right after npm install. Just needed after an npm update

[lilpxl]

@holger1411 As always, thank you for all your hard work. It seems we also need to copy gulpconfig.json from the parent into the child for npm update to run successfully (or at least thats what I had to do). I refer back to this thread whenever there is an update, could be useful to have some official doc for the child theme around updates... if you wanted some help in that regard let me know and I can put something together (based on your sage advice of course). Thanks all!

[axlright]

@jaredsnider

re: sourcemaps + autoprefixer - there's a PR on the child theme and the parent theme to add functional sourcemaps. I'll check in with the team about making sure both autoprefixer and sourcemaps are included. Thanks.

re: npm update - can you send documentation or information on what happens when you run npm update on the child theme unsuccessfully / without the gulpconfig.json from the parent theme? I've not had any problems with npm update on the child theme and I've not had to copy anything from the parent theme.

Working on documentation for the parent theme and also need to do the same / incorporate documentation on the child theme. Thanks for your input.

[lilpxl]

@axlright Sounds great! I deleted my previous comment because I actually saw something that referenced sourcemaps in the new gulpfile and thought it was already in there :)

Just a note, I am running npm install per @holger1411 instructions above (not npm update) OK testing this on a new branch as follows:

• Update parent theme
• Copy/overwrite gulpfile.js and package.json from Parent into Child
• Run npm install inside Child which returns the following:

$ npm install

> understrap@0.8.1 postinstall /Users/MY-USER-PATH/wp-content/themes/understrap-child
> gulp copy-assets

module.js:540
    throw err;
    ^

Error: Cannot find module './gulpconfig.json'
    at Function.Module._resolveFilename (module.js:538:15)
    at Function.Module._load (module.js:468:25)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/MY-USER-PATH/wp-content/themes/understrap-child/gulpfile.js:25:11)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! understrap@0.8.1 postinstall: `gulp copy-assets`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the understrap@0.8.1 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/MY-USER-PATH/.npm/_logs/DEBUG-LOG-NAME-debug.log

One discrepancy I noticed between Parent and Child was the existence of package-lock.json in my Child theme. For giggles I removed that file and ran npm install again, but received the same error.

Not sure if this is related, but wanted to reference the issue I posted regarding additional issues updating: #135

Thank you in advance for all help, let me know if there is anything else you want me to try.

[axlright]

@jaredsnider Okay I can see a difference at least with my workflow. I don't copy gulpfile.js and package.json from Parent into Child but rather copy these from Child (newest version) into Child (my current version). I don't think the gulpfile.js and package.json are compatible between Parent and Child.

I've actually never run npm install or npm update on the parent understrap theme. I only do these on the child theme.

My recent workflow for updating is

1) update the parent theme by straight up copying the new parent theme .zip file and unzipping it 2) update the child theme by copying gulpfile.js and package.json from the most recent child theme into my child theme 3) run npm update, gulp copy-assets, gulp scripts and gulp styles (as well as my own gulp criticalcss stuff, but that's custom) 5) update the child theme style.css to show the newest child theme version 6) make sure everything isn't broken

Try this and let me know if it helps.

[lilpxl]

@axlright Ah ok, so there is my error. Upon re-reading the instructions above that makes sense, the "new files" should come from the child theme and not the (updated) parent theme. I did indeed always run npm install on the Child, not the Parent. But I wonder, if the Parent theme gets an update but the child theme does not, then is there even anything to update? Would be curious the process in that instance. Do the parent theme updates (with all the new goodies) not require any additional steps on the child theme? Or do we just run npm install on the existing Child set up (which maybe then -somehow - pull in all the new stuff from the Parent)? I try not to mess with anything that I don't understand, but this is different than the Child themes I am used to where its basically devoid of anything except the files I either copied over from the Parent (like functions.php or header.php) and the accompanying lone child stylesheet (don't get me wrong, I much prefer this set up and all the added bonuses, I just need to wrap my head around it all). I am admittedly somewhat new to all this, so I really appreciate your kind assistance and sage advice! Glad I checked here before wrecking myself (god bless git!)

[lilpxl]

@axlright I am not sure why my child them was missing gulpconfig.json, but I copied that as well as gulpfile.js and package.json from a fresh version of understrap-child and its working fine. Please pardon my human error and thank you for your help.

[axlright]

@jaredsnider it looks like gulpconfig.json is new to version 5.0.1 - it's not located in the 5.0.0 release. I haven't yet updated my child themes to 5.0.1 but I'll be sure to include it. I probably would have missed it as well. Thanks!

[lilpxl]

@axlright Cool! I guess I will just assume a child theme update whenever there is a parent theme update... ?

[axlright]

@jaredsnider This definitely need more clarification, even with me. I don't update both at the same time. But this issue needs clarification / explanation. I will work on that. Thank you.

[Thomas-A-Reinert]

@holger1411 : any reason why I cannot assign this issue to anyone or flag it?

[andrewl64]

The easiest way to update your child theme is to overwrite the package.json and gulpfile.js with the new files. Than run "npm install" followed by "gulp scripts" and "gulp styles" to rebuild your child theme.

So you can keep your changes but rebuild it with new dependencies and keep it compatible with the parent theme

Thank you. This is what I was looking for.

[lilpxl]

This could definitely be a user error, but wondering if anything has changed since the latest update as far as updating the child theme. After copying package.json, gulpconfig.json and gulpfile.js then running npm install I am getting the following:

$ npm install

> understrap@0.8.6 postinstall /Users/MY-LOCAL-PATH/wp-content/themes/understrap-child/node_modules/understrap
> gulp copy-assets

module.js:540
    throw err;
    ^

Error: Cannot find module '../lib/completion'
    at Function.Module._resolveFilename (module.js:538:15)
    at Function.Module._load (module.js:468:25)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/MY-LOCAL-PATH/wp-content/themes/understrap-child/node_modules/.bin/gulp:13:18)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
npm WARN bootstrap@4.1.3 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.1.3 requires a peer of popper.js@^1.14.3 but none is installed. You must install peer dependencies yourself.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! understrap@0.8.6 postinstall: `gulp copy-assets`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the understrap@0.8.6 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/MY-LOCAL-PATH/.npm/_logs/2018-07-30T19_39_06_547Z-debug.log

Thanks in advance for all your continued help.

UPDATE: I fixed this by uninstalling/reinstalling Gulp, deleting the entire contents of node_modules and then running npm install again. No idea why this was happening but leaving here on the off chance its helpful for someone else.

[tolkadot]

I'm really enjoying using the understrap/understrap-child combo but what are the risks of using understrap and understrap-child to build a theme for a client who wants to manage their own support? ie - if they update the understrap theme from wp-admin (which they are likely to do) how likely is this to break the site.

[Thomas-A-Reinert]

@tolkadot : Although it is really not recommended, there´s a solution to prevent the client from updating themes (and plugins and core) until they switch the theme. As long as the theme containing this function is active, no updates will be shown for whatever themes are in the theme-folder, remember that!

Put the following code in your child-themes functions.php:

// hide update notifications
function remove_core_updates(){
  global $wp_version;return(object) array('last_checked'=> time(),'version_checked'=> $wp_version,);
}

// add_filter('pre_site_transient_update_core','remove_core_updates'); // hide updates for WordPress itself
// add_filter('pre_site_transient_update_plugins','remove_core_updates'); // hide updates for all plugins
add_filter('pre_site_transient_update_themes','remove_core_updates'); // hide updates for all themes