Category: 🇬🇧 English Tutorials

How to Create a Style Variation for the WordPress Twenty Twenty-Four Theme

WordPress themes provide a flexible foundation for designing websites, and with the introduction of Full Site Editing (FSE), customizing these themes has become more powerful and accessible. The Twenty Twenty-Four theme, one of WordPress’s default themes, is an excellent example of a theme that embraces modern design principles while offering a high degree of customization. One of the standout features is the ability to create and apply style variations. In this article, we’ll walk you through the steps to create a style variation for the Twenty Twenty-Four theme.

Understanding Style Variations

Style variations in WordPress allow you to create different design looks without altering the core structure of a theme. By tweaking colors, typography, and other design elements, you can create distinct visual styles that suit different brand identities or personal preferences. These variations can be saved and easily switched, offering a way to experiment with different aesthetics or provide users with multiple design options.

Prerequisites

Before diving into creating a style variation, ensure you have the following:

1. A WordPress Site: Ensure your WordPress site is set up and running with the Twenty Twenty-Four theme installed.
2. Basic Knowledge of CSS and JSON: While not mandatory, understanding CSS (Cascading Style Sheets) and JSON (JavaScript Object Notation) will help you fine-tune your style variation.
3. A Child Theme (Optional): If you prefer not to modify the parent theme directly, creating a child theme is a good practice. This way, you can preserve your customizations even after theme updates.

Step-by-Step Guide to Creating a Style Variation

1. Set Up Your Development Environment

• Access your WordPress installation files via FTP or your hosting provider’s file manager.
• Navigate to the /wp-content/themes/twentytwentyfour/ directory.

2. Create a styles Folder

• Within the Twenty Twenty-Four theme directory, create a new folder named styles. This folder will store your custom style variations.

3. Create a JSON File for Your Style Variation

• Inside the styles folder, create a new file and name it something descriptive, such as custom-style.json.
• This JSON file will define the properties of your style variation, such as colors, typography, and layout settings.

4. Define Your Style Settings

• Open the custom-style.json file in a code editor.
• Here’s a basic structure to get you started:

   {
     "version": 2,
     "isGlobalStylesUserThemeJSON": true,
     "settings": {
       "color": {
         "palette": [
           {
             "slug": "primary",
             "color": "#1a1a1a",
             "name": "Primary"
           },
           {
             "slug": "secondary",
             "color": "#ff6f61",
             "name": "Secondary"
           }
         ],
         "background": "#ffffff"
       },
       "typography": {
         "fontSizes": [
           {
             "slug": "small",
             "size": "12px",
             "name": "Small"
           },
           {
             "slug": "large",
             "size": "24px",
             "name": "Large"
           }
         ],
         "lineHeight": "1.5"
       }
     }
   }

• Color Palette: Customize the color palette by adding your preferred colors. Use the slug to identify the color, color for the hex value, and name for a human-readable label.
• Typography: Adjust the font sizes and line heights to match your desired style.

5. Add Additional Customizations

• Beyond colors and typography, you can customize various other aspects such as spacing, border radii, and more. The structure follows the same JSON format.

6. Save and Apply Your Style Variation

• After defining your customizations, save the custom-style.json file.
• To apply this style variation, go to the WordPress dashboard:
  • Navigate to Appearance > Editor.
  • In the Editor, select Styles from the top-right corner.
  • Your new style variation should appear as an option. Click on it to apply.

7. Test and Refine

• After applying your style variation, preview your site to ensure everything looks as expected. Tweak the JSON file as needed to refine your design.

8. Making the Style Variation Available to Users

• If you want your style variation to be available to other users of the theme, include a description and screenshot:
  • Description: Add a title and description key to your JSON file to provide context about your style variation.
  • Screenshot: Create a 1200x900px image showing a preview of your style variation. Name it the same as your JSON file but with a .png extension (e.g., custom-style.png). Place it in the styles folder.

9. Distribute Your Style Variation

• If you’ve created something worth sharing, consider distributing your style variation. You can package it with your theme or share it on platforms like GitHub for others to use.

10. Shortcut

Since the theme.json file in the root folder contain all the styles of the theme, a very fast way of working is this: just copy-paste the theme.json file from the root directory to the ./styles directory. Rename the file to something convenient, e.g. myWay.json. Then add the title of your style variation, as in line 4 below:

Conclusion

Creating a style variation for the Twenty Twenty-Four WordPress theme is a powerful way to personalize your website’s appearance while keeping the underlying structure intact. Whether you’re aiming for a sleek, modern design or a playful, vibrant look, style variations offer a flexible way to achieve your vision. By following the steps outlined in this guide, you’ll be well on your way to creating a unique style variation that reflects your brand or personal aesthetic.

Note

This article was partly generated by ChatGPT from one of my conversations, see this link: https://chatgpt.com/share/e/8a300d32-5807-43a4-a85e-978a9290a332

For some reason ChatGPT forgot to mention the title field in the json file, so I’ve added the missing information.