WordPress.org
Get WordPress

Create a Basic Child Theme for Block Themes

Description

With the release of WordPress 5.9 in January 2022, a brand new theme development experience was created with new block themes. Creating a child theme from a block theme requires a few files to be fully functional. This lesson will walk you through the process of setting up a basic child theme for a block theme.

Objectives

After completing this lesson, participants will be able to:

  • Differentiate between parent & child themes and explain their benefits
  • Create initial files for a child theme and their essential requirements
  • Create a basic, but fully functional block child theme from a block theme

Prerequisite Skills

Participants will get the most from this lesson if they have familiarity with:

Readiness Questions

  • Are you familiar with installing and activating themes via the WordPress Dashboard?
  • Do you have at least basic, general knowledge of HTML, CSS and JSON? (You don’t have to be able to code, just know what you’re looking at!)
  • Do you feel comfortable using a text editor to edit code?
  • Will you have a locally or remotely hosted sandbox WordPress site to use during class?

Materials Needed

Notes for the Presenter

  • Having a sample site set up (complete with a text editor sandbox) for your learners can be exceptionally helpful in this lesson plan! Reach out in Slack to the #training team reps or faculty members for pre-developed, self-destructing sandboxes your students can download with a click of a button.

Lesson Outline

  • First, activate background knowledge: Ask students what a “theme” is and if they have any favorites. Why are those themes their favorite?
  • Second, explain the difference between block themes and classic themes.
  • Next, ask the class if they know what a child theme is, how it works, or what they are used for. Let the students answer and fill in any gaps in knowledge and correct misconceptions.
  • After you’ve clearly explained the benefits of child themes and pitfalls of editing a parent theme’s code directly, talk about the 3 or 4 required files in order for students to be able to do things with their theme.
  • Finish by using the exercises below, walking students through each part of simple child theme creation.
  • Closure: Give the assessment quiz.

Exercises

Instructor Note: These exercises build upon one another to make a simple child theme for a block theme.

Make the Smallest Child Theme Possible?

  1. Make a Style.CSS file = This file, while often empty in block themes, is still required in block themes so that WordPress recognizes it as a child theme (and is required for all themes, parent and child alike).
    • Create a style.css file using a text editor and prompt students to do the same
    • Talk about the required lines in a style.css file; what can be changed? What must be included?
      • Supplemental Information: What’s required in a theme’s CSS file? In the comment section Theme Name: Twenty twenty ←This name is what is going to appear in your theme selector in your WordPress site. A child theme must ALSO include the template – it will point to the directory of the parent theme so that the child theme works correctly with the parent theme.
    • Save the file.
    • Show students that this file is now findable in their theme repository – it doesn’t do anything, but it exists! It has a CSS file, therefore it is!
  2. Add a screenshot.
    • Show students where to find some free pictures (Openverse is a great option!)
    • Show students how to add a screenshot to their theme, then have them add their own
      • Supplemental Information: Point out that the screenshot is clearly not dynamic; it’s important to know where this is so they can take a proper screenshot when they are finished with their theme, but emphasize the point that the screenshot will not change as their child theme changes if they make significant changes.
  3. Create a Theme.json file
    • Walk students through creating a theme.json file
    • Copy and paste the entire theme.json code from the parent theme
      • Supplemental Information: Explain that you can copy and paste the entire theme.json for learning purposes; if they are absolute beginners, the theme will work just fine. You can also point out that they can pull specific ELEMENTS out of it, and that the child theme will rely on the parent theme for anything that they, specifically don’t code.
      • Optional: Walk students through toggling a simple options on and off with theme.json so they understand what this file can do at the most basic level.
      • Optional: Show example of pulling specific theme.json code for a background color.
  4. Optional: Walk students through the creation of a ReadMe file.
  5. Optional: Transition to the theme.json lesson plan overview to get started learning theme.json.

Assessment

Should you ever modify a parent theme (one you didn’t design yourself) directly?

  1. Absolutely not! My changes and all my hard work would be reverted by an update–and I might break my website.
  2. Yes. It is a best practice to modify a parent theme itself – there is no real need to create a child theme.

Answer: 1. Correct answer

What is the only file you need for a child theme to exist?

  1. Style.css
  2. Theme.json
  3. Functions.php
  4. Index.html

Answer: 1. Correct answer

True or False: The screenshot people see of themes in a theme in the WordPress theme repository is dynamic and changes as they update their child themes.

a. True
b. False

Answer: b. False

If you want your child block theme to do something different than the parent theme(not just exist), which file will allow you to make meaningful changes for users of your block theme?

a. Style.css
b. Theme.json
c. Readme.txt
d. The Screenshot

Answer: B, theme.json

Additional Resources

Building Background Knowledge: (Optional)

How a Child Theme inherits components from the parent theme (when they are not present in the child theme.)

  • Template Hierarchy is a good general concept and frame of reference for in-depth explanations of a more advanced nature

Example Lesson

What’s the difference between a block theme and a classic theme? 

With the 5.9 release from January 2022, an entirely new way to WordPress was created; this change enabled anyone who uses what is known as a “block theme” to utilize a new set of features called “full site editing.” This gives users the freedom to design their website’s layout from header to footer using a variety of new tools.

Meanwhile, classic themes created a lot of a website’s structure for users; these defined what could appear on posts, pages, in headers and footers, and often required additional coding knowledge to create significant changes.

This lesson plan covers how to create a child theme for a block theme, specifically. If you would like to work with a child classic theme instead of a child block theme, consider using this lesson plan instead.

Introduction: The Basic of Parent / Child Themes

What is a child theme?

A child theme is merely a portion of a theme that relies on a parent theme for any custom code that the child theme does not contain.

Why should I create a child theme?

For example, imagine you are designing website for a local non-profit–or, for this example, perhaps a website for a tiny used book store in your town. The owners of this bookstore want their website to follow a color palette for branding purposes, but some of their employees will also be updating their website. You want the employees of this bookstore to only be able to use the colors blue, green, and black for text color. In order to limit those options, you, the web designer, would need to make a child theme in order to do so–we will explain why soon!

Rather than rebuilding an entirely theme from scratch, you can use an existing theme and create a child theme. This would save you time because it allows you to ONLY copy and use the parts of the code used for text color. Cool, right?

Why can’t I just change or edit the code of the parent theme?

That’s an option, right?

Wrong–or at least, it’s not a good idea! While you can change that code in your primary/parent theme itself, there are some pretty serious concerns in doing so.

The case for child themes: After a little investigation, some people discover where the theme files live, then directly edit the theme’s files. After the next theme update, they are then horrified to discover that the update completely erased all of their modifications. Many designers have learned this lesson the hard way. How do you prevent this from happening? By using a Block Child Theme! A Block Child Theme is a theme that overrides and adds elements to another block theme (the “Parent” Block Theme) without touching any of the Parent Theme’s code. When the Parent Block Theme is updated, your Block Child Theme will be preserved.

Updates revert customization changes

If you update a modified theme, the update will restore the original code and remove all customizations you made to this theme. Similarly, when you update a plugin, the update will overwrite any edits you’ve made. This is the same for WordPress core files, which is why people use both plugins AND child themes!

NOTE: An important rule of WordPress development is to never directly modify WordPress core files. It’s also recommended that you not edit:

  • Plugin files from the plugin directory
  • Plugin files from 3rd party plugin creators
  • Theme files from the theme directory

Theme files* that have not been created by you originally

What do I need to make a child theme?

  1. A child theme could be just a style.css file, which is the absolute minimum – it wouldn’t do, well, anything, other than exist, though. The other two requirements are
  2. A screenshot of your theme. This will show in two places: in the theme directory and also in your site theme’s selector as kind of like a preview of the idea of what your site will look like:
  3. A theme.json file.
  4. Optional, but essential If you want to make your theme available to everyone in the WordPress repository: A Readme file for a theme directory.

Know that there are more things you can do (especially with custom templates!) but this is the absolute minimum you will need to start making meaningful changes.

Lesson Wrap Up

💡 Follow with the Exercises and Assessment outlined above.

Complete the following exercises with students:

  1. Create Style.CSS file
  2. Add a picture/screenshot
  3. Create a theme.json file
  4. Optional: Readme text
  5. Optional Extension: Transition to theme.json overview lesson plan