Develop Your First Low-Code Block Theme | Learn WordPress

Develop Your First Low-Code Block Theme | Learn WordPress
Skip to content
Learn WordPress
Develop Your First Low-Code Block Theme
Courses
Develop Your First Low-Code Block Theme
Develop Your First Low-Code Block Theme
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.
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
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?
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
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
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
Practice on a private demo site
Enrolled learners
2422
Average final grade
0%
May 13th, 2025
Estimated duration
Suggestions
Found a typo, grammar error or outdated screenshot?
License
CC BY-SA 4.0 ↗
More helpful resources
Documentation
Developer Resources
Support Forums
Sign up for updates
Get the latest news about everything Learn WordPress. Find out when new courses and lessons are available, and when registration opens for upcoming Online Workshops.
Visit our X (formerly Twitter) account
Visit our Bluesky account
Visit our Mastodon account
Visit our Threads account
Visit our Facebook page
Visit our Instagram account
Visit our LinkedIn account
Visit our TikTok account
Visit our YouTube channel
Visit our Tumblr account
The WordPress® trademark is the intellectual property of the WordPress Foundation.