Mayank Tripathi

Understanding theme.json, Classic Themes, Hybrid Themes, and Child Themes in WordPress

WordPress theme development has undergone a significant transformation with the advent of Full Site Editing (FSE). This shift has introduced new tools and methods, such as the theme.json configuration file, which offers a more standardized and flexible way to define global styles, theme settings, and customizations. In this blog, we’ll dive deep into theme.json, compare the evolving types of themes (Classic, Hybrid, and Child themes), and understand how these fit within the modern WordPress ecosystem.

1. What is theme.json?

theme.json is a structured configuration file introduced in WordPress 5.8 that allows theme developers to define global styles and settings in a standardized way. This file enables developers to configure theme-wide settings, such as typography, colors, spacing, and more, without requiring custom CSS or functions in PHP. It plays a crucial role in enabling the Full Site Editing capabilities and gives greater control over block styling.

Key Elements of theme.json

The theme.json file is divided into two primary sections:

  1. Settings: This section controls which customization options are available to users in the block editor. It includes options like enabling or disabling color palettes, font sizes, or spacing.
  2. Styles: This section defines the default styling for different blocks and elements, applying consistent design across the theme.

Here’s an example structure for a basic theme.json file:

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primary", "color": "#3490dc", "name": "Primary" },
        { "slug": "secondary", "color": "#ffed4a", "name": "Secondary" }
      ]
    },
    "typography": {
      "fontSizes": [
        { "name": "Small", "slug": "small", "size": "12px" },
        { "name": "Large", "slug": "large", "size": "36px" }
      ]
    }
  },
  "styles": {
    "color": {
      "background": "#ffffff",
      "text": "#333333"
    },
    "typography": {
      "fontFamily": "'Helvetica Neue', sans-serif"
    }
  }
}

Benefits of theme.json

  • Centralized Style Management: Instead of relying on scattered custom CSS and multiple settings pages, all global styles and theme settings are managed from a single file.
  • Consistent Styling: Ensures that blocks follow the same design pattern across pages and posts, improving consistency.
  • Faster Performance: Styles are only loaded when necessary, reducing the need for excessive inline CSS or bloated external stylesheets.
  • Easier Customization: Users can easily adjust settings like colors or typography from the block editor, allowing for user-specific tweaks without needing to code.

The Role of theme.json in Full Site Editing

The introduction of Full Site Editing (FSE) empowers users to edit all aspects of their site (including headers, footers, and page templates) using the block editor. The theme.json file acts as a blueprint for these edits, providing the styling and configuration for blocks and components.

For example, if you want to allow users to edit colors in the block editor, the theme.json configuration can enable or disable specific color palettes. Likewise, FSE themes rely heavily on the standardized structure of theme.json to define layout, spacing, and block behaviors.

2. Classic Themes, Hybrid Themes, and Child Themes

While Full Site Editing has introduced new types of themes, Classic Themes are still widely used. To fully understand the landscape of WordPress themes today, it’s important to differentiate between Classic, Hybrid, and Child themes.

Classic Themes

Classic Themes are the traditional WordPress themes, created using PHP, HTML, CSS, and JavaScript. They follow the WordPress template hierarchy, with files like header.php, footer.php, index.php, and functions.php controlling the structure and functionality of the theme.

Key Features:

  • PHP Template Files: Uses PHP-based templates for rendering different sections of the website.
  • Customizer for Theme Options: Theme options are handled through the WordPress Customizer, where users can control site-wide settings like colors and fonts.
  • Limited Block Integration: While Classic Themes can use blocks, they don’t offer the same level of customization as FSE themes. They often rely on custom coding for layout and styling.

Example:

<?php get_header(); ?>
<div class="content">
  <?php
    if ( have_posts() ) {
      while ( have_posts() ) {
        the_post();
        // Display post content
      }
    }
  ?>
</div>
<?php get_footer(); ?>

Hybrid Themes

Hybrid Themes bridge the gap between Classic Themes and Full Site Editing themes. They still rely on the traditional template structure but incorporate block-based functionality and partial FSE support. Hybrid themes can use a theme.json file to control styles but do not fully embrace block templates for headers, footers, or page layouts.

Key Features:

  • Uses theme.json: Hybrid themes support the theme.json file for global styles and settings, even if they don’t fully adopt block-based templates.
  • Partial Block Template Support: Can use blocks in some areas (like posts or pages) but relies on traditional PHP templates for headers, footers, and other elements.
  • Gradual Transition to FSE: Hybrid themes are perfect for developers who want to move towards Full Site Editing without fully abandoning the traditional approach.

Example: A Hybrid Theme might have a theme.json for global styles but still use header.php and footer.php for the site’s structure.

Child Themes

A Child Theme is a theme that inherits its functionality and styling from a parent theme. Developers create child themes to modify or extend an existing theme without altering the parent theme’s core files. This ensures that updates to the parent theme don’t overwrite custom changes.

Key Features:

  • Parent-Child Relationship: Child themes inherit all the templates, functions, and styles of the parent theme.
  • Custom Modifications: Developers can override specific files (like style.css or functions.php) to make modifications.
  • Safe Updates: Parent themes can be updated without losing the customizations made in the child theme.

Example:

// functions.php in Child Theme
<?php
function my_custom_child_theme_styles() {
  wp_enqueue_style('parent-theme-styles', get_template_directory_uri() . '/style.css');
  wp_enqueue_style('child-theme-styles', get_stylesheet_directory_uri() . '/style.css', array('parent-theme-styles'));
}
add_action('wp_enqueue_scripts', 'my_custom_child_theme_styles');
?>

When to Use Child Themes

Child themes are useful when you need to make minor customizations to an existing theme, such as:

  • Adding custom CSS for styling
  • Overriding specific template files like header.php or footer.php
  • Adding custom functionality in functions.php

They are particularly useful when working with a robust parent theme that receives regular updates.

Conclusion

The WordPress theme ecosystem is evolving, and understanding these foundational concepts is key to modern theme development. The theme.json file, with its ability to control global styles and settings, is becoming an essential tool for Full Site Editing. While Classic Themes remain important, Hybrid Themes offer a gradual way to embrace block-based design, and Child Themes continue to provide a safe method for customizations.

Thank you for reading through the post… More will be added.

by ~Leaveitblank (Mayank Tripathi)