WordPress.org
Get WordPress

Develop Your First Low-Code Block Theme

This course is not complete! You can see all of the module and lesson titles, but only the first three modules are currently available.

Have you ever wanted to know how theme developers design WordPress themes?

Source: Figma’s Open-Source Theme Design Files
  • Are you familiar with how themes are designed, but want to know how designers tackle block themes?
  • Have you ever wanted to design a theme of your very own from scratch?
  • Is the thought of writing php, theme.json, css, or html code daunting?

If so, this course is for you!

COURSE OBJECTIVES
By the end of this course, you will be able to build a fully functional, custom WordPress theme using very little code.

We will explore…

  • The basics of how a theme is developed from start to finish
  • The role of each “classic” WordPress file as they relate to block themes (style.css, index.php, index.html)
  • The basic functions of theme.json
  • The basics of coding in theme.json
  • The challenges of exporting images in block themes
  • Optional extras you can learn to include to make your theme stand out among the rest

Take this course geared toward intermediate WordPress users and beginning theme designers to learn how to build a custom block theme from scratch using the WordPress Site Editor–using only a little code.

We’ll show you how!

How do I know if this course is right for me? (If you’re not sure, click the arrow to expand)

Ask yourself the following:

1. Are you comfortable navigating the WordPress dashboard?
2. Are you comfortable installing and activating different WordPress themes?
3. Have you experimented with block themes and the Site Editor in the past?
4. Are you familiar with templates, template parts, and the Site Editor?
5. Do you know what “Global Styles” are and why they are helpful to users?

If you answered “Yes” to all those questions, take this course!

If you answered “No” to any of these questions, we would recommend taking our three courses on block themes first to get familiar with the site editing tools you will be using throughout this course.

Modules In Development

This course is not complete! You can see all of the module and lesson titles below, but only the first three are currently available.

The following modules are still in development:

  • Get Design: Using the Site Editor to Build Your Custom Theme (50%)
  • Finishing Your Theme: Exporting Your New Theme and Optional Next Steps

Building Background Knowledge: The Theme Creation Process

If you’re new to the theme design process, you might be curious how themes have been developed in the past, and how block themes are often designed in the present. This module provides context for beginning theme developers to understand how themes go from an idea to an installable WordPress theme.

Lessons

Different Types Of Themes: Overview How Themes Are Designed How Classic And Block Themes Are Developed From Designs What A New Theme Developer Needs To Know: Anatomy Of A Block Theme

Get Technical: Setting Up Your Development Environment And Essential Files

Dive right in! This module gets you started immediately setting up your theme development environment.

Lessons

Setting Up Your Block Theme's Development Environment Creating Your Block Theme's style.css Creating Your Block Theme’s index.php Creating your templates folder and index.html Creating Your Block Theme’s theme.json file

Low-Code Challenge: Turn On Important Design Features

Lessons

Low-Code: The Basics of theme.json for New Developers Your First Codes In theme.json Check Your Work: Is Your Theme Working? A Website's Look and Feel: Design Element Best Practices and Brainstorm