Skip to content

Latest commit

 

History

History
34 lines (19 loc) · 2.46 KB

01-Block-Theme-For-This-Course.md

File metadata and controls

34 lines (19 loc) · 2.46 KB

The Block Theme For This Course

In the previous module, you reviewed the basics of a block theme by creating a very limited theme.json, a few templates, and a few template parts.

For the rest of this course, you're going to be using those files and developing a working block theme, with a bunch of theme.json settings and styles, and the rest of the primary templates.

The theme you will be building is based on the Twenty Twenty-Three (aka TT3) theme that shipped with WordPress version 6.1.

It's not a very feature rich theme, but it's a great starting point for learning how to build a block theme.

You won't be building all of the theme files, but you will learn how to build the most important parts.

If you would like to see the code for the final block theme, you can visit the GitHub repository or download an installable zip file from the releases page. The rest of the lessons in this course will be referencing code in that repository.

A Note on Theme Design

The design of the theme you will be building is not the focus of this course. You will be focusing on the technical aspects of building a block theme.

Generally, you, or a designer you work with, would design the theme using something like Figma or Sketch. That design would include the following:

  1. A style guide, which contains things like the colours and typography used in the theme.
  2. A design system, which contains things like the spacing and layout used in the theme, including specific elements like buttons.
  3. A set of layouts for each of the templates and (possibly) the template parts.

To learn more about the process of designing a theme, take a look at the following resources:

  1. Develop Your First Low-Code Block Theme course
  2. The open source theme designs released by the WordPress design team, which include the designs for TT3.

The Twenty Twenty-Three designs are available to view on Figma, but we recommend making a copy of the designs and working on your own copy.

Note: Use the Get a copy button on a public Figma design to copy it to your own Figma account.

Twenty Twenty-Three Designs