Learn How to Build a WordPress Block Theme Style Variation

WordPress block themes offer plenty of flexibility. You can make style and layout changes within your web browser – no coding knowledge is required. They can also include extras like block patterns and style variations.

Style variations give you a head start on design. They allow us to create multiple color and typography combinations. They also house custom block styles defined in the Site Editor. Anything in a theme.json file can also be included in a style variation.

This is handy for web professionals and users alike. Choose the variation that suits your needs and start building your site.

Creating a custom block theme style variation is easier than you think. The entire process takes place in the WordPress Site Editor. A simple variation can be built in minutes.

So, follow along as we build a style variation! We’ll show you how to point and click your way to a custom design.

Style Variation Project Requirements

The requirements for building a custom style variation are minimal. You’ll need:

We don’t recommend using a production website for this process. A staging or local WordPress installation is the safer way to go.

Let’s Build a Style Variation

Now, it’s time to start building! Log in to your WordPress website and follow the steps below.

Step 1: Open the WordPress Site Editor

First, navigate to Appearance > Editor in the WordPress admin to open the Site Editor. Then, click the Styles link in the left sidebar.

The Styles panel includes links for Typography, Colors, Background, Shadows, and Layout. You’ll also find a Browse Styles link that displays available style variations for the theme.

Finally, the Blocks link allows you to customize individual block styles across the site.

Customize your theme in the Site Editor's Styles panel.

Step 2: Change Your Theme’s Styles

This step is all about personal preference. Work your way through the Styles panel and start making changes.

Color and typography are the most obvious changes, but you can take things further. For example, you can change the layout width and spacing. Plus, every block included with WordPress can be customized. Add margins, padding, borders, or custom CSS.

We added custom fonts to the Twenty Twenty-Five block theme.

We covered the basics in our variation, including:

  • Created a custom color palette;
  • Installed new fonts from Google Fonts;
  • Added custom spacing for the Group and Paragraph blocks;
  • Changed the look of the Button block;

The result is an earthy look that aims for simplicity. But you can do as much or as little as you like. Just remember to save your changes when done.

The custom color and typography of our style variation.

Step 3: Save Your Style Variation

Our next task involves saving our custom style variation. This functionality is part of the Create Block Theme plugin.

The feature is located within the Site Editor. Here’s how to find it:

  1. While in the Site Editor, click on the right panel, highlighted in green below:

Click on the right panel of the Site Editor to access the Create Block Theme settings.

  1. Click the wrench icon on the upper right of the screen and select Create Theme Variation:

The Create Block Theme menu in the WordPress Site Editor.

  1. Name the variation and ensure the Save Fonts box is checked. We’ll call ours “Beautiful Earth.”

We saved our custom style variation.

  1. Click the Create Theme Variation button to save the settings.

Once saved, the new variation is added to the list in the Browse Styles area of the theme editor. Hovering over the variation reveals its name.

Our custom style variation is now available in the Site Editor.

How to Use Your Style Variation on Another Site

Style variations are portable and can be used on multiple websites. The process involves copying the generated JSON file and adding it to the desired site.

  1. Locate the style variation’s JSON file in /wp-content/your-theme/styles/
    Replace your-theme with the name of the theme you’re using (ours is twentytwentyfive).

    For reference, our JSON file is called beautiful-earth.json

  2. Copy your style variation’s JSON file.
  3. On your new website, paste the file into /wp-content/your-theme/styles/ – you may need to upload the file via SFTP or your web host’s file manager.
  4. You’ll now be able to choose the style variation within the Site Editor.

About Custom Fonts

Earlier, we mentioned the ability to add custom fonts to a style variation. It requires a few extra steps to work when moving your variation to a new site.

  1. Locate the custom fonts you added at /wp-content/themes/your-theme/assets/fonts/
  2. Copy each font’s respective folder.
  3. Paste the font folders into the same directory on your new site. Once again, you may need to upload them.

Give Your Block Theme a Custom Look

Style variations are a convenient way to add personality to your block theme. You can build them to suit your project requirements.

They also act as a starting point for designers. You can continue to add custom styles after applying a variation. The changes you make will be saved in the site’s database.

There’s also an option to reset the styles to the variation’s defaults. That makes it easy to experiment without losing the key elements of your design.

The best part is that style variations don’t require coding expertise. That puts custom design within everyone’s reach.

The post Learn How to Build a WordPress Block Theme Style Variation appeared first on Speckyboy Design Magazine.

Tags: , , , , , ,