Introduction
Who is this course for?
This course is an overview of WordPress full site editing and block themes for theme developers and those who wants to learn to create themes.
Are there any prerequisites?
I recommend that you have basic knowledge of theme development: 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. I will be talking about concepts like functions.php, theme support, enqueuing, and the template hierarchy without going into details. If these concepts are new to you, then 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 code editor for editing your files, and a WordPress installation.
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 so that you can 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
How to add blocks to user-created templates
Creating block templates for custom post types
WooCommerce in Full Site Editing themes
Theme.json
Theme.json typography options: Font family and 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
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