Introduction
Who is this course for?
This course is an overview of the new WordPress site editing features and block themes for experienced and aspiring theme developers.
Are there any prerequisites?
I recommend you have basic theme development knowledge: Basic PHP, HTML, some JavaScript, and CSS. Having experience with and knowledge of the block editor is also helpful.
In parts of this course, I make references to classic PHP-based themes, and I make comparisons between classic themes and block themes. Without going into detail, I will discuss concepts like functions.php, theme support, enqueuing, and the template hierarchy. If these concepts are new to you, everything in the lessons might not be perfectly clear, but you should still be able to use the code examples to create your first block theme.
You also need a WordPress installation and a code editor to edit your files.
What you will learn
You will learn how block themes work and how to create a basic theme. You will learn how to use the Site Editor and theme.json to achieve the design you want for your theme.
My goal with this website is for you to gain enough information and knowledge about block themes and site editing to decide if you want to use and create block themes.
Recommended learning path
Complete the lessons in the introduction and then use the following chapters as references for continuing to improve your block theme.
Course Content
Introduction
Welcome & How to use the course
Preparations -Quick start guide
- Creating block themes
- Block grammar basics
- Exercise: Templates and template parts
- Global Styles & theme.json
- Exercise: Creating theme.json
Templates and template parts
Creating block templates for custom post types
How to add blocks to user-created templates
WooCommerce and Full Site Editing themes
Theme.json
Theme.json typography: Font family
Theme.json typography: Font size
Theme.json typography: Line height, font weight, and text decoration
Theme.json layout and spacing options
How to add hover and focus styles using theme.json
How to add box-shadows with theme.json
How to use custom CSS in theme.json
How to filter theme.json with PHP
Modifying block style variations via theme.json
Cheat sheet: Every setting that you can remove using theme.json
Classic themes & Hybrid themes
Adding full site editing features to classic themes
How to use PHP templates in block themes
How to re-enable the Customizer in a block theme
Miscellaneous
Community resources and how to stay up to date with changes to Site Editing
Block reference with block supports, attributes and links to documentation
How to remove default block styles
Accessibility in full site editing themes
How to add default blocks to the block editor
Block Styles
Block variations
Block variation examples for full site editing