We are working on a plugin to help you create a Blockbase child theme. The idea is that you can use existing tools to make changes to a Blockbase theme, and then export a bundle of templates and themes. As a new child theme.
I tried to create a new theme called “Typewriter” using these tools.
Step 1 – Setup
Install and activate Blockbase, and Build Blockbase Theme Plugin.
Step 2 – Customization
Make changes to your site using the optimizer. I chose some new colors:
I changed fonts:
You can also use Global Styles to modify your theme at this point:
I only made the changes using the customizer, but you might want to make more changes in the theme.json file directly after the theme is created.
Step 3 – Templates
Edit your templates using the site editor:
I managed to get everything I needed into this theme using the site editor, but for some things you may need to edit the template files directly once the theme is created.
Step 4 – Export
Under Appearance there will be a new page called “Create Blockbase Theme”:
You can add a description for the topic here. These will be used in the style.css file. When you click the “Create Blockbase Theme” button, a ZIP file will be downloaded, containing all the files for your theme. this is my:
Step 5 – Testing
At this point you should have a zip file containing a working theme. You can upload it to your WordPress and activate it.
The theme has a screenshot file, which you will need to update manually.
Now when you look at the frontend of your site it should look like it did before you activated the new theme. Here is my new theme:
further change
Once the theme is created you can unzip the theme zip file and make further changes to the theme files. This may be necessary to make more advanced changes to the theme. You can do this:
- Modify and add configuration in theme.json file.
- update html template files
block-templates
And block-template-parts
- add custom css to file
assets/theme.css
Feedback
We want you to try out this new tool and let us know how you proceed in the comments!
Like this:
like It’s loading…
related