How to copy Style Book for use on another site?

You can export everything you’ve customized as a theme: styles, templates, patterns, etc. The resulting files could comprise a full, customized version of your theme. So it’s much more than just the style book. While you could overwrite your theme with this version, I recommend giving in a new name in style.css and as the folder it resides in.

Anywhere in the site editor where you’ve clicked a pencil icon to edit some site element, you can click the 3 dot options icon and choose Export.

It might be possible to extract just the style book elements from the resulting download, but I suspect it’s composed of a number of disparate elements and I wouldn’t be too sure about not leaving something important behind.

Thanks for your recommendations. I’m already using 2 child themes of Twenty Twenty-four and each is in their respective language (En / Fr).

Perhaps I’m not understanding what a theme affects and what it does not.

If I export a modified English child theme will that not mess up my French texts when it’s applied (nav bar, header and footer texts, etc ..)?

Exporting alone does not affect any of your network sites at all. Installing it as a theme and activating it will alter the site’s appearance on which it was activated. In any case, if you install a modified theme you should change its name. I know I’m repeating myself, it’s important ??

If you were to install an exported theme as a renamed theme and did NOT activate it, it still would not affect any of your sites. Even if you were to activate a renamed theme and it alters that site’s appearance, you can still return to the initial theme and all will be as it was before. Customizations are saved under the current theme’s name, they do not affect other themes.

I was thinking what you responded after I posted the question. So both language versions can share the same Theme which will contain the Style Book customizations without affecting the site contents.

So I just gave it a try and chose to “Create sibling of (current template name)” and then gave it a new name (“name_240316“). I then saved it and then installed it.

When I activated “name_240316” all my nav link text changed to black (on dark gray) when the child theme it was created from has white nav link text. Re-activating the original child theme restores the nav bar text to the correct colour (white text on dark gray bar).

I see a whole list of “Theme Features” boxes when creating the theme. Do they have any affect on the result? They just seemed to be there to advertise the theme features if ever l wanted to share it with others.

I’m curious why a sibling theme would change the nav bar text colour?

I’ve discovered that the Sibling theme reverts to the 10-colour pallet of the Twenty Twenty-Four theme instead of including my modified 10-colour pallet PLUS an additional 10 custom colours (20 colours total). Perhaps “Sibling” was not the correct option to choose. I’ll look more carefully at the different options. As the appropriate colours were missing the nav bar reverted to its default black text.

[edit] Though on further examination “Sibling” seems to be the appropriate option: “Create a new theme cloning the activated child theme. The parent theme will be the same as the parent of the currently activated theme. The resulting theme will have all of the assets of the activated theme, none of the assets provided by the parent theme, as well as user changes“.

So why did it not contain the modified colour pallet??

I did a bit more digging. The theme.json file in the active child theme does not contain any custom settings. When I export this active child theme (Export the activated theme with user changes) its theme.json file does contain all the customizations, colour pallet, etc…

I just re-read your original reply and I think this (Export w/ changes) is what you recommended. I will also change the theme name in the exported theme’s style.css file so it’s different from the child that’s already installed.

• This reply was modified 8 months, 2 weeks ago by rpmtl22.
• This reply was modified 8 months, 2 weeks ago by rpmtl22.

My knowledge about this aspect of themes is more conceptual than practical. Through your trials and investigation you’ve gained good practical knowledge. You now know more about this topic than I do. If I have any further questions about this, I’m going to ask you ??

The key take away in general is to not be afraid to experiment and try things. Just be sure to have a safe return path in case something unexpected happens. As long as you have a good backup to revert to (which we should have anyway) it’s very difficult to do any real damage by experimenting.

Yes … making sure one has an escape route is VERY important! The revision history feature has saved me a few times along the way (as well as making frequent backups) ??

My next test will be to install the revised (exported w/ settings) theme and see if it works as advertised. It will certainly save time replicating design changes between 2 matching sites (except for language). I’ll report back with the result. If it works, that will close this thread.

No success ??
I really expected this to work:

• Export Theme with settings
• Unpack Zip file
• Edit styles.php to change the theme name
• Rename the folder w/ revised theme name and Zipped it
• Upload/Installed it on the WordPress site
• Activated the Theme.

The custom colour pallet again reverted to the 10 default Twenty Twenty-Four colours. I checked and confirmed that the 20 colours I started with are indeed listed in the theme.json file.

I’m beginning to wonder if it might be due to a server permissions issue or perhaps some plugin is preventing the installation for completing properly. Though, as the site’s not used for a blog with comments, I’ve not installed any antivirus/antispam type plugin, just Limit Logins, Black Hole for Bots and Wp Super Cache. Or perhaps it’s a bug?

Are you sure you looked in the right place for your added colors? I did a quick test by adding one color to the palette. I could have sworn I added it to the Mint style, but after exporting, renaming, importing, and activating just as I believe you did, my new color only shows in the default style, not Mint.

Apparently custom colors can only be added to the default style, since the named styles are pre-defined they cannot keep colors added to them? IDK, wildly grasping for an explanation.

It’s also possible I wasn’t where I thought I was when I added the additional color.

Anyway, if you see your added colors in theme.json, they’d have to be for the default style since named styles are in /styles/*.json. Added colors in theme.json definitely only show up in the default style palette. At least IME added colors persist somewhere through the entire export/import process.

Yes, I looked in the colour pallet and the custom colours were not there and the site header section colours were all wrong. Here’s part of what’s in the theme.json file (I removed the white space to compress the info):

"color": {"palette": [
{"color": "#006393","name": "H1 Bleu ","slug": "custom-h1-bleu"},
{"color": "#ffffff96","name": "Transparent white ","slug": "custom-transparent-white"},
{"color": "#333333","name": "Site Dark Gray ","slug": "custom-site-dark-gray"},
{"color": "#ffffff00","name": "Transparent Nothing","slug": "custom-transparent-nothing"},
{"color": "#eeeeee","name": "Light Gray","slug": "custom-light-gray"}
] },
"color": {"palette": [
{"color": "#006393","name": "H1 Bleu ","slug": "custom-h1-bleu"},
{"color": "#ffffff96","name": "Transparent white ","slug": "custom-transparent-white"},
{"color": "#333333","name": "Site Dark Gray ","slug": "custom-site-dark-gray"},
{"color": "#ffffff00","name": "Transparent Nothing","slug": "custom-transparent-nothing"},
{"color": "#eeeeee","name": "Light Gray","slug": "custom-light-gray"},
{"color": "#002f5f","name": "NavBlue1","slug": "custom-nav-blue1"},
{"color": "#004c72","name": "NavBlue2","slug": "custom-nav-blue2"},
{"color": "#20457c","name": "NavBlue3","slug": "custom-nav-blue3"},
{"color": "#175388","name": "NavBlue4","slug": "custom-nav-blue4"},
{"color": "#15456f","name": "NavBlue5","slug": "custom-nav-blue5"}
] },

Perhaps the multi-site structure prevents the theme files from installing properly? The themes need to be installed in Network Admin, activated on the network, and then activated in each site section. The root of the site has the English pages and the French are in a sub-folder named “fr”. It’s possible certain information (such as the custom colours) is not being passed properly.

As I can edit both versions at the same time on 2 monitors it’s easy to keep things in sync. But it would have been elegant if this had worked.

The next time I start a standard (non-multi-site) WordPress site I’ll try exporting and installing a Theme with custom colours to see if that works properly.

Yes, multisite could be a factor. I did my testing on a single site installation. However, I cannot imagine why data in theme.json doesn’t get properly transformed into palette colors or whatever, even in multisite. There is no special multisite process for parsing theme.json, it’s the same process either way.

In any case, it should have worked. There is possibly some unknown bug in the process. Further investigation would be required. More investigation than I have an interest in.

I’m going to stop poking at it as well. I’ll be back with any info I might stumble upon that might provide any insight into what’s going on. It’s easy enough to do edits on both versions at the same time on 2 monitors so it has little affect on my workflow.

Thanks for your help! ??