PACS WordPress SIG

A Special Interest Group of the Philadelphia Area Computer Society

You are here: Home / How To / Making a child theme for a block theme

Making a child theme for a block theme

by

VS Code screenshot of a block theme theme.json file

Hi WordPress wizards. Thanks for tuning in today. This is the start of our 2022 – 23 PACS season.

I had hoped to record the session, but alas, Teams and my Microsoft account are not playing well today and I had no option available to me to record the meeting. To be fixed next month.

This Month’s WordPress SIG Topics

  • What’s new in WordPress 6.x, including 6.0.0, 6.0.1, and 6.0.2
  • WordCamp US session recordings.
  • Our featured area is a How-To on building a child theme for a block theme.

Topics from the Trenches

Anyone, anyone? Yes, in the back!

Nothing this month. This ad hoc section of our SIG permits time for us to take questions from online participants, or respond to inquiries submitted via our website or sent in by email.

Nothing came in early this month so we are doing a deeper dive into the latest updates in WordPress core.

So what is new in WordPress 6.0.x?

  • WordPress 6.02, released on August 30, was a security & maintenance release. This security and maintenance release features 12 bug fixes on Core, 5 bug fixes for the Block Editor, and 3 security fixes. Because this is a security release, it is recommended that you update your sites immediately. All versions since WordPress 3.7 have also been updated. Many hosts will automatically apply security updates. If your host does not, you are urged to update as soon as you can.
    • The security updates included fixes for 3 primary issues.
      – Possible SQL injection within the Link API.
      – XSS vulnerability on the Plugins screen.
      – An output escaping issue within the_meta()
  • WordPress 6.0.1 was released on July 12. This one was pretty much a maintenance release. You can read all the details on wordpress.org.

You can view to full release history on the wordpress.org site at https://wordpress.org/download/releases/

  • v6.0 was the 2nd major release of the year. It focused on block improvements and an enhanced writing experience. This includes improvements to selecting text, finding posts through blocks, keeping styles when changing between block types, and better social icons, and tag clouds.
    • A much-needed improvement added finer controls for changing styles directly from the editor. Think font-weight, default colors, and other typography features.
    • There were 5 new template blocks added. These are author blocks, the date block, category selectors, tags and general taxonomies.
    • Throughout, the pattern integration functionality was expanded across the UI and more design tools were incorporated helping the block editor to be a bit more intuitive to use.

We did dig into some of this functionality a bit more with a short demo of using a few of these new elements. I thought it went well, but you know, the whole recording problem.

<insert demo video here> If we had one!

The demo performed the following tasks.

  • Add a new page using the block editor.
    • This included adding a title, a bit of generic lipsom filler text in a paragraph block, and a featured image using an image block. The featured image was sourced from the WordPress Openverse project site.
  • We styled the filler text in the paragraph block using the enhanced staying controls. Highlighting the text in a paragraph block, and changing the background using the right side controls. We also used those controls to change the color and font size of the text.
  • We added an Author box. This pulls the content (user photo, users name) from the user profile. An admin can change this content when setting up a user on your website, or a user can typically edit their profile any time they are logged in. There is an area on the user profile for a brief bio to be added. That bio can then be pulled into a post using the Author Bio block.
  • Planned, but skipped due to time, was inserting a date block, inserting a 3-column wide preformatted pattern into the page, and finally adding a social block linking out to the author’s Facebook, Twitter, and GitHub profiles.
  • The next major release will be version 6.1 planned for November 1, 2022.

Topic of the Month (TOTM) – Building a Child Theme for a Block Theme

Building a Child Theme for a Block Theme

But first, let’s talk about the concept of child themes, and review why you may want to use one.

A child theme allows you to change small aspects of your site’s appearance yet still preserve your theme’s look and functionality. To understand how child themes work it is first important to understand the relationship between parent and child themes.

A parent theme is a complete theme that includes all of the required WordPress template files and assets for the theme to work. All themes – excluding child themes – are considered parent themes.

A child theme inherits the look and feel of the parent theme and all of its functions, but can be used to make modifications to any part of the theme. In this way, customizations are kept separate from the parent theme’s files. Using a child theme lets you upgrade the parent theme without affecting the customizations you’ve made to your site.

Child themes:

  • make your modifications portable and replicable;
  • keep customization separate from parent theme functions;
  • allow parent themes to be updated without destroying your modifications;
  • allow you to take advantage of the effort and testing put into the parent theme;
  • save on development time since you are not recreating the wheel; and
  • are a great way to start learning about theme development.

Back to our block theme child theme question.

After a very quick survey. it appears that the vast majority of our participants are not working with block themes yet. Given that bit of info, we are going to hit on building a child theme for a classic theme too.

For Block Themes

Block themes are built for the newer functionality in WordPress and allow you to use blocks to edit all parts of your site, including easier ways to quickly customize everything from your background colors to font sizes for all heading blocks. Comparatively, classic themes are built with PHP templates, functions.php, and more that include features like Widgets, a dedicated Menus section, the Customizer, and more. Classic themes do not work with the Site Editor.

Building a child theme for a block theme.

What are the files needed to create a child theme?

  • Unique child theme folder under wp-content/themes
  • Stylesheet – style.css – with required tags
    • Theme Name:
    • Template:
  • Text file named theme.json
    • This text file uses JSON format to set values for variables that WordPress will use to set up the block configuration. It is okay, and recommended, to copy this file from the parent theme and then edit it as needed. It is much faster than starting from scratch. Anything that you do not define in the child theme’s theme.json will be set from the parent theme.
  • Image file to be used as the theme screenshot displayed on the Appearence | Themes page in your WordPress dash. In our demo, we sourced a generic image of waves from Openverse.
  • While not required for child themes, a block theme may have new folders within them to set up various elements of the site and create any page templates that may be needed in the theme.
    • parts – with customizable elements, ie headers, and footers, built with HTML.
    • templates – with customizable pages that used to be built using PHP template files.

After creating the style.css, theme.json, and screenshot.jpg, we were able to activate our new child theme having made slight changes to the color palette.

Child theme generators for block themes

Child theme generators for non-block themes

References

Recording

Next time.