WordPress.org
Get WordPress

Develop Your First Low-Code Block Theme

This course is now complete! All modules are available. Happy designing!

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 function of theme.json
  • Your first codes in theme.json
  • 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.

A Note About Your Block Theme

Please note that this course is generally meant for people who want to take the first step in learning to design themes. This is a complex topic with a lot of nuance; this course will teach you the very basics of block theming and get you thinking like a theme designer for the first time.

A more advanced course geared toward developers also exists with more complex information and is linked at the end of this course.

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? Low-Code: Preparing to Set Fonts For Your Block Theme A Website's Look and Feel: Design Element Best Practices and Brainstorm

Get Design: Using the Site Editor to Build Your Custom Theme

Lessons

Your First Template: Create A Style Guide Using the Site Editor Saving Your Work: Create Block Theme Selecting Your Theme's Default Fonts Using Patterns to Design Your Header & Footer Template Parts Block Theme Design Challenge: Templates In The Site Editor

Completing Your Custom Theme

Lessons

Completing Your Custom Theme: Taking a Screenshot Completing Your Custom Theme: Adding Information in style.css Theme Enhancements – Offering Reusable Blocks, Unique Templates, Unique Patterns, Style Variations You're Almost Finished! What's Next?