Tel. 02-570-8449 Mobile 088-807-9770 Payment
Mon–Fri 9:00–17:00 @itgenius
IT Genius Institute
IT Genius Institute
CoursesWorkshopSchedule
For business
In-house trainingAI Transformation (TH)Government training (TH)Development servicesTraining room rental
Articles
About us
About IT GeniusInstructorsPortfolioOur clientsPayment methods
Contact usOnline
Theme
Language
THENLA
Ask about a coursePick whichever channel suits you
LINE @itgeniusFastest reply · Mon–Fri 9:00–17:00
Call us
02-570-8449Office088-807-9770Mobile
Email & social
contact@itgenius.co.thFor quotations and documentsFacebookitgeniusonlineYouTubeitgeniusengPlan training for your team
Home / Courses / Graphic Design / Detail
Graphic Design · GPC-33

Creating WordPress Block Themes

Creating WordPress Block Themes is a course in building block themes for WordPress with theme.json, templates, block patterns and the Site Editor, including turning a Figma design into a theme. It suits corporate WordPress site managers, web developers and freelancers who know basic HTML, CSS and PHP, and you leave with your own theme ready to install on a live host.

Updated
Creating WordPress Block Themes
From 5,850 THB / person 6,500 −10% excl. VAT 7% · group rates available
Corporate training quote Join the waiting list
PDFDownload the course outline
  • Duration12 hours · 2 days
  • FormatOnsite / live online
  • Next roundOn request
  • CertificateIncluded

Course overview

WordPress has changed the way themes are built. Modern themes are block themes: colours, fonts, spacing and layout for the whole site live in theme.json, pages are assembled from block-based templates and template parts, and site managers can adjust the design themselves in the Site Editor without touching code. Teams that still build themes only from PHP files find them harder to maintain and miss out on what WordPress can now do.

This course takes learners through building their own block theme on WordPress 7.1, from the file structure, the template hierarchy and theme.json settings and styles, including the responsive and hover styles added in the latest release, to templates, template parts, the Query Loop, block patterns and style variations. Learners use the Site Editor with the Create Block Theme plugin, turn a Figma design into a theme, and finish with a workshop that builds a corporate website theme and installs it on a live host. (2 days, 12 hours, Intermediate level.)

What you’ll gain

  • Understand the difference between classic, block and hybrid themes on WordPress 7.1
  • Organise a block theme's files correctly according to the template hierarchy
  • Set colours, fonts, spacing and site-wide styles with theme.json version 3
  • Build reusable templates, template parts, Query Loops and block patterns
  • Design in the Site Editor and save the changes back to theme files with Create Block Theme
  • Turn a Figma design into a responsive theme and deliver it as a ZIP file

Who this course is for

  • Corporate WordPress site managers who want a theme of their own
  • Web developers who built classic themes and want to move to block themes
  • Freelancers and agencies who build WordPress sites for clients regularly
  • Designers with some coding skills who want to turn Figma designs into themes themselves

Prerequisites

  • Able to write HTML and CSS, such as page structure, classes and selectors
  • Able to read and edit basic PHP, such as variables, functions and arrays
  • Experience with the WordPress admin, such as creating pages, posts and menus
  • A laptop that can run VS Code and XAMPP or Docker, with permission to install software

Curriculum

Course Details

This is the 2026 edition of the Creating WordPress Themes course. It runs for 2 days, 12 hours (09:00-16:00), as lectures with labs, at Intermediate level. The content moves from building PHP-based themes on WordPress 6.x to building block themes on WordPress 7.1 with theme.json, templates, template parts, block patterns, style variations and the Site Editor, and includes turning a Figma design into a theme. All the tools are open source or free. Learners take home the course handbook, sample Figma files and solution themes for every lab.

Day 1 Block Theme and theme.json Fundamentals

Section 1: Lab: WordPress 7.1 and Theme Development Tools

  • Classic, block and hybrid themes compared, and what is new in WordPress 7.0 and 7.1
  • Set up with XAMPP, wp-env or WordPress Playground on PHP 8.3 or later
  • Configure VS Code and import sample content for testing themes
  • Lab: install WordPress 7.1 ready for the whole course

Section 2: Block Theme Structure and the Template Hierarchy

  • Required files: style.css with the theme header, and templates/index.html
  • What the templates, parts, patterns and styles folders are for
  • The template hierarchy: index, home, single, page, archive, search and 404
  • Lab: build a minimal theme that installs and activates

Section 3: Lab: theme.json Settings

  • The structure of theme.json version 3: version, settings, styles and templateParts
  • Colour palettes and font families, including Thai font files bundled with the theme
  • Fluid font sizes, the spacing scale and layout with contentSize and wideSize
  • Lab: set the theme's colour, font and spacing design tokens

Section 4: Lab: theme.json Styles

  • Site-wide styles and element styles such as links, buttons and headings
  • Per-block styles, for example Navigation, Quote and Button
  • Hover, focus and active states and responsive styles in WordPress 7.1
  • Lab: restyle the whole site from a single theme.json file

Section 5: Lab: Templates, Template Parts and the Query Loop

  • Create parts/header.html and parts/footer.html with Site Logo and Navigation
  • Write templates in block markup and include template parts
  • The Query Loop and Post Template for post listings and category pages
  • Templates for single, page, archive and 404
  • Lab: the home page, single post and post listing of the theme

Section 6: Lab: The Site Editor and Create Block Theme

  • Edit templates, template parts and styles in the Site Editor
  • User changes stored in the database versus values in the theme files
  • Save edits back to the theme files with Create Block Theme
  • Lab: design the header in the Site Editor and save it into the theme
Day 2 Patterns, Figma and Theme Delivery

Section 7: Lab: Block Patterns

  • Pattern files in the patterns folder with Title, Slug and Categories headers
  • Starter patterns for new pages, and patterns tied to block types
  • How synced patterns differ from regular patterns
  • Translatable text and images stored in the theme
  • Lab: a set of hero, services, team and call-to-action patterns

Section 8: Lab: Style Variations and Section Styles

  • Style variations in the styles folder for alternative colours and fonts
  • Section styles applied to Group and Columns blocks
  • Extra block styles for buttons and images
  • Lab: let the theme switch between a light and a dark look

Section 9: Lab: Turning a Figma Design into a Theme

  • Read Figma variables and styles and convert them into theme.json values
  • Convert Auto Layout into Group, Row, Stack and Grid blocks
  • Export images as WebP or AVIF and icons as SVG
  • Lab: build the theme's home page to match the Figma file at every screen size

Section 10: functions.php and the PHP You Still Need

  • Load extra CSS and JavaScript only where needed, and per-block styles
  • Register block styles and pattern categories
  • Custom templates and template part areas in theme.json
  • When WP_Query and PHP patterns are still needed instead of the Query Loop
  • Child themes of a block theme for adapting an existing theme

Section 11: Theme Quality and Delivery

  • Accessibility: colour contrast, heading order and keyboard use
  • Performance: fonts, images and CSS size, checked with Lighthouse
  • Export the theme as a ZIP with screenshot.png and a readme
  • Install on a host, and move a site from localhost with a migration plugin

Section 12: Workshop: A Corporate Website Theme from Figma

  • Start from a sample Figma file for a corporate site or shop
  • Build theme.json, templates, parts and patterns for every main page
  • Test on mobile, tablet and desktop, and adjust the responsive styles
  • Export as a ZIP, install it on a fresh site and present your work

Schedule & training options

For individuals — public rounds

No public rounds are open right now. Join the waiting list and we will contact you first when the next round opens, or ask us on LINE. Or call 02-570-8449 or 088-807-9770

Join the waiting list Ask about rounds

For organisations — in-house / private

  • Tailor the content to your team’s tools and projects
  • Your dates, at your office or live online
  • Quotation with tax ID for procurement
Corporate training quote

Instructors

Frequently asked questions

How does a block theme differ from a classic WordPress theme?

A classic theme builds pages from PHP files such as header.php, footer.php and single.php. A block theme builds pages from HTML templates and template parts made of blocks, and sets colours, fonts, spacing and layout for the whole site in theme.json. Site managers can then adjust the header, footer and styles themselves in the Site Editor without editing code. This course focuses on block themes on WordPress 7.1 and summarises classic themes so you can still maintain older sites.

Which files does a block theme need?

At minimum a block theme needs style.css, with a header comment giving the theme name, and index.html inside the templates folder. In practice you also add theme.json for site-wide settings and styles, a parts folder for header.html and footer.html, a patterns folder for block patterns, a styles folder for style variations, and functions.php when you need to load files or register things theme.json cannot handle.

What are the steps to turn a Figma design into a block theme?

Start by reading the Figma variables and styles, such as colours, fonts and spacing, and convert them into theme.json values as the theme's design tokens. Then convert Auto Layout into Group, Row, Stack or Grid blocks, build template parts for the header and footer, turn repeated sections into block patterns, export images as WebP or AVIF, and check the layout at every screen size. This course practises these steps with a sample Figma file until you have a theme you can install.

Who is the Creating WordPress Block Themes course for, and what should I know beforehand?

It suits corporate WordPress site managers, developers who built classic themes and want to move to block themes, freelancers and agencies who build sites for clients, and designers with some coding skills. You should be able to write HTML and CSS, read and edit basic PHP, and have used the WordPress admin before.

What will I be able to do after the Creating WordPress Block Themes course?

You will be able to organise a block theme according to the template hierarchy, set colours, fonts and site-wide styles with theme.json, build templates, template parts, Query Loops, block patterns and style variations, work with the Site Editor and Create Block Theme, turn a Figma design into a theme, and deliver it as a ZIP that installs on a live host. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.

Which software is used on the Creating WordPress Block Themes course?

The course uses WordPress 7.1 on PHP 8.3 or later, installed locally with XAMPP or wp-env, or tried out in WordPress Playground. It uses the Create Block Theme plugin, an official WordPress plugin, VS Code for code, and Figma for the designs. All the tools are open source or free, and a free Figma account is enough for the labs.

Related articles

Articles are published in Thai.