Preserving custom theme changes across updates / how often do themes update?

Hello all, another newbie question from me. Appreciate all the support so far.

I’m getting started with the Wave theme and just want to make a few fixes. I figured out how to adjust these icons at the bottom:

The theme itself includes the icons for a ton of different options in the partials/icons folder: Bluesky, Facebook, Instagram, Linkedin, Mastodon, etc. I also figured out how to add this code in by editing the default.hbs and package.json files.

I’m just curious how much trouble it will be to maintain this when the theme updates. I figure I can just keep a copy of the edited section of the files and paste it back in whenever it does update. Unlike a custom CSS addition, I’m not sure if there’s a way to keep this adjustment from being overwritten with a theme update. Any ideas?

Also, how often do the official themes generally update?

Minor things in Wave change every couple of weeks, based on the Github repository:

If you want to have a proper setup, you can look into forking it, to then merge changes back into it. You’ll probably have merge conflicts based on your own adjustments.

That does sound a bit like an overkill to me though. For bigger changes, you can just manually update it, as you suggested, by pasting things back in, as you need them.

1 Like

I was wondering this myself.

I saw something somewhere about custom.css and custom.js files where you could add changes that would persist across theme updates, but I can’t remember where I saw that and I can’t remember if it was for a specific theme or if it applied globally to all Ghost themes.

Is there no way to create a custom CSS and JS override file and stick it somewhere that will persist across theme updates?

No. That is not a thing :smiley:

You can have custom templates, but adding these to an existing theme would still get overridden upon updates. A theme update replaces whatever file’s Ghost has in a given theme folder.

Lol I swear I saw it somewhere.

I found this thread Custom css and js Help - #2 by thebear.dev but that’s not the article I read it on. Naturally I can’t find the article now when searching, but the idea in that above post was pretty much what the article I saw mentioned, with more details about it.

Yeah, you can always add files to the theme folder and load them by adapting the default.hbs. But that won’t persist, if the developer of a theme updates it. You’d need to properly merge these changes.

As I said, if you upload a theme update to Ghost, the changes you made will be overwritten.

Yes you are correct, this is what I was looking at Adding Custom CSS & JS: Code Injection and Custom Assets | Feed Theme Documentation | Priority Vision, and I didn’t read far enough down, so I see the changes have to be reapplied after theme update.

Is this a technical limitation of Ghost? I’m not familiar enough with the theming/templating system, but it does seem strange that custom override files can’t be created that would persist across updates.

EDIT: I know about code injection, but I’m more talking about advanced needs that Code Injection can’t cover.

1 Like

I wouldn’t call it a limitation. It would be the same on Wordpress.

A theme is a versioned, encapsulated set of files. Every time you upload something, these files get replaced by the new ones.

Ghost itself has no idea what files of a theme are created by a theme developer and which ones are “added on top”. It just treats every uploaded theme the same: as that versioned, encapsulated set of files that it applies to the frontend.

Look at it this way: by adding or changing files you are essentially creating a new theme that just happens to have the same name as the “original” one.

Right I get that.

I guess my vision is that there are a set of override files that sit outside of those theme files. For example let’s say a theme developer makes a change to the theme that a user doesn’t like and want’s to keep it like it was. They could set a CSS or JS override in an override file that will always take precedence over the change that the theme developer introduced. So instead of having to go in and manually change it back every time the theme is updated, the override file would just cover it to reduce that burden.

Anyway maybe it’s magical thinking, again I’m not familiar enough with Ghost’s theming and templating system, but I have seen these types of override files in other web building software I’ve used over the years.

With that said, the Code Injection feature has been able to do the overrides I need it to so far, so not complaining, just curious. :grinning_face:

Haha I like the term magical thinking :smiley:

For the use case you mention, the proper solution would be to well…not apply the update (or roll back).

For visual “overrides” code injections are the way to go. In Ghost, for anything functional, a separate override system would just overcomplicate things and bloat everything. If you need to change a theme’s functionality you will need to go into the code and change it. And that does come with the restriction that with any update you’ll have to reapply these changes.

I do see your point, and you can always open a feature suggestion in Ideas, though for such a fundamental change, I can only imagine that the Ghost team would need good reasoning that goes beyond “I don’t want to reapply changes when updates happen”.

1 Like

Appreciate the replies! That does indeed sound like overkill…at least for the initial changes that I’m envisioning, which are pretty minimal.

I guess I’m also wondering how the theme updates work in practice. Is is something where it would automatically update? Or would I be able to choose when the updates happen so that I could quickly reimplement my changes? (Or password protect the page so that I could then have some time to implement larger changes?)

In general, there is no automatic update.

When you install a theme from the built-in official themes, you will see an “Update” button in the theme settings, when an update is available. For Wave that would be the case. You can then click the button and it will pull the latest update for you, though, replacing all manual changes you have made.

For themes you have uploaded yourself, you’d have to upload an update manually as well. There is no built-in update mechanism for these.

If you’re making changes, I’d rather test an update locally first, without doing this on a live site: How To Install Ghost Locally - Ghost Developer Docs

1 Like

Perfect. As long as there are manual updates, this should work for me.

I’ve been testing my fixes on a local installation, and they seem to work without much issue. As I mentioned, they are pretty minor in the big picture and mostly formatted to make Wave less of a podcast theme and more of a general use theme by replacing the icons at the bottom.

I’m still trying to wrap my head around forking. I guess I could pull the updates as they get made and just make sure they don’t affect the work I’ve done, then upload the theme to Ghost and it would essentially do the same thing as updating? I just wouldn’t need to copy and paste my work in?

1 Like

Forking is the “proper” way of doing it, but you need to be familiar with git and how git merges work.

Honestly, copying changes on important updates is perfectly fine, and what most Ghost publishers probably do.

WP has ‘child themes’ that sort of do this, IIRC. From my perspective, MOST of the changes that happen on themes are things that you may not care about, and so you may not bother updating. (I know lots of folks for instance who’d already customized a theme to use the font they wanted, so they never went back and updated to use the new-ish custom fonts feature.) You can also simplify your process by keeping all your CSS changes as overrides in a file loaded last (or concatenated together last), and keeping most of your changes in individual partials instead of sprinkled throughout the theme.

3 Likes