Use the Create Block Theme plugin for exports, and theme variations

Transcript

Introduction

In this lesson, you will learn how to use the Create Block Theme plugin to save and export design variations. If you want to explore the more advanced options available with the plugin, check out the Create Block Theme plugin lesson, which forms part of the Intermediate Theme Developer learning pathway. Here are the lesson objectives. Why would you need to export your theme customizations? How do you create your custom WordPress theme? Install the modified theme as a zip file using the Create Block Theme plugin, and install and use the custom theme on another website.

Create Block Theme

Once you have installed and activated a theme on your website, you might want to make some changes, such as adjusting colors and layouts to match your brand or personal preferences. By default, these changes are stored as database entries. They are not integrated into the theme files. However, if you are working on a test website and want to transfer the design you created to another website, you would need to save it as part of the theme. That’s where the Create Block Theme plugin comes in. It lets you transform your customizations into permanent variations of the original theme and export the modified theme as a zip file, effectively creating your own custom theme. You can then use it in other WordPress sites without redesigning the same elements. This approach is particularly important because it avoids overwriting your customizations when updating the theme. Lastly, it also serves as a backup of your updated design. Let’s make our way to plugins and search for the Create Block Theme plugin. Once you have installed and activated the plugin, you can go to Appearance and select Create Block Theme. Here, you will see a few options. You can export the active theme as a zip file, create a new blank theme, clone the active theme, or create a child theme.

Customizations

Next, let’s talk about customizing the active theme on your site. You can customize various aspects of your theme without coding. This includes adjusting global styles, like typography, colors, and spacing, and modifying theme templates and template parts such as headers and footers. You can also create custom block styles, design block patterns, and manage site layout options, including site width and alignment. For this example, let’s make a few customizations to see this in action. So, let’s make our way to Appearance and open the Site Editor. Then we can go ahead and open up Styles and make our way to Colors, as I want to create a custom color for my site. Then I can click on Palette, click on the plus next to Custom and then create my custom color. And once I’m finished, I will name it appropriately and click on Done. Now, I can return to Elements and change the color of my text and headings to my custom color. Next, I will open up my Style Book, click on Design and then update my Buttons block. Firstly, I will change the background color and then change the color of the text to my custom color, scroll down, add a one-pixel border, and also change the color of my border to my custom color. Then I’ll go ahead and click Save. And for the last example, I will customize one of my templates. In this case, the 404 template and that is, of course, the page that displays when no page is found. I will add an image of a hand holding a compass, showing that a person is trying to find their way.

Save changes to theme files

Now that we have made our customizations, we can click on the little wrench or Create Block Theme wrench and then select Save Changes to Theme, and then save all the changes we’ve made. After you select Save Changes to Theme, you will notice a few changes. For example, the custom color I added is now listed below Theme because it has been added to the theme.json file. As a reminder, theme.json is a configuration file that defines the global settings and styles for your WordPress theme. In other words, my changes are now part of the theme files. Let’s look at another example and see how the theme file of the 404 template changed. We can make our way to the Theme file editor, click on Templates, and then select 404.html. Here, we will notice that the image we added is now part of the Theme file. So as mentioned, the Create Block Theme plugin allowed us to transform our customizations into permanent variations of the original theme.

Renaming theme and exporting zip file

The next step is to rename our theme and to do that; we will click on Create a New Blank Theme. Then, we can name it appropriately, in this case, Ocean Blue, and add a Theme Description and the theme’s author. We can now continue to customize our theme, and when we are ready to export the modified theme, we can click on the little wrench again and then select Export Zip. Once the zip has been downloaded to your device, you can import it to another live or test website. To import it onto a live site, for example, we can click on Appearance, select Themes, click on Add New Theme, and right at the top, we can select Upload Theme. Then, we can choose the zip file from our device. Click on Install Now and then Activate. Then we are ready to start using our new theme.

Conclusion

Happy exporting and utilizing the Create Block Theme plugin.

Practical

Use WordPress Playground to test your knowledge:

1. Customize your active theme:
   • Navigate to Appearance > Site Editor.
   • Explore the Styles section and make the following customizations:
     • Create a custom color palette.
     • Customize the 404 template.
2. Save changes to theme files:
   • Install and activate the Create Theme Block plugin.
   • Click on the Create Block Theme wrench icon in the Site Editor.
   • Select ‘Save Changes to Theme.’
3. Rename your theme:
   • Return to the dashboard and open the Create Block Theme plugin
   • Click on ‘Create a New Blank Theme.’
   • Name your theme, add a description, and enter the author’s name.
4. Export your theme:
   • Click on the Create Block Theme wrench icon again.
   • Select Export Zip to download your customized theme as a zip file.
5. Import your theme on another site:
   • On a different WordPress installation, go to Appearance > Themes.
   • Click on Add New and then Upload Theme.
   • Select the zip file you exported and click ‘Install Now.’
   • Activate your new theme.