Creating a WordPress Child Theme (Classic and Block)

Classic Themes vs. Block Themes: a very quick comparison

Classic Themes:

Traditional approach: Classic themes were the standard before block themes, defining the structure of a website with limited customization options.
Coding knowledge required: Modifying classic themes often demanded coding expertise in CSS, HTML, and PHP for significant changes.
Static layouts: Classic themes featured static layouts, making comprehensive design overhauls more complex and time-consuming.

Block Themes:

Introduced with WordPress 5.9: Block themes revolutionized WordPress by enabling "full site editing" for users.
Design freedom: Users have unparalleled freedom to design entire site layouts, including headers and footers, using a new set of intuitive tools.
Modular approach: Built on a modular structure, block themes represent content and design elements as individual blocks for enhanced flexibility.

In essence, block themes bring full site editing capabilities and a modular design approach, while classic themes relied on predefined structures with less flexibility and a higher coding knowledge requirement. The choice depends on the user preferences and the level of control desired over the website's appearance.

How to create a child theme: Classic Themes

Step-by-Step Guide

Create a child theme directory
Start by creating a new directory in the wp-content/themes/ folder for your child theme. Name it appropriately, such as `yourtheme-child`.
Create style.css file and screenshot.png file
Inside the child theme directory, create a style.css file. Use the following template and make necessary adjustments:
/* Theme Name: YourTheme Child Template: yourtheme */

Create functions.php file
In the same directory, create a functions.php file. This file will be used to enqueue styles and scripts. You can add your custom functions here.

// Enqueue parent theme styles
function enqueue_parent_styles() {
  wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'enqueue_parent_styles');
?>

Activate the Child theme
Go to the WordPress dashboard, navigate to Appearance > Themes, and activate your child theme.
Customize as needed
Now you can make changes to the child theme's files without affecting the original theme. Customize styles, templates, or add new functionalities as needed.

How to create a child theme: Block Themes

With the advent of block themes, the process of creating child themes has evolved. This section will guide you through creating a child theme for block themes, including a code approach and using the "Create Block Theme" plugin (available for free on wordpress.org).

Code Approach

Create a child theme directory
Similarly to classic themes, create a new directory in the wp-content/themes folder for your block theme child theme.
Create a style.css file and screenshot.png
Understand the file structure for block themes and create necessary files, such as style.css and `functions.php`, with appropriate content.
Enqueue Styles and Scripts
Modify the functions.php file to enqueue the parent theme styles and any additional styles or scripts.
Configure theme.json File
Create a theme.json file in your block theme child theme directory. This file allows you to configure various aspects of the block theme, such as colors, typography, and block styles. Refer to the WordPress Block Editor Handbook for detailed documentation on configuring `theme.json`.

Using "Create Block Theme" Plugin

Install and Activate the plugin
Install the "Create Block Theme" plugin from the WordPress repository and activate it.
Create Child Theme
Navigate to the plugin settings and follow the steps to create a child theme based on your block theme.
Customize and Extend
Once the child theme is created, customize it further by adding custom styles, templates, or functionalities.

Screenshot of the "Create Block Theme" plugin panel

Hi. How can we help?