Block Theme Examples

January 5, 2024 · View on GitHub

This repository is meant to showcase various WordPress block-related features and how to use them in your theme. The goal is to provide concise code examples that serve as a foundation for your projects. They are meant for development purposes to customize however you need.

Each sub-folder is an individual child theme of Twenty Twenty-Four and contains a README.md file that explains the example. The decision to use child themes was to create small examples that only had the code needed for the feature.

Each of the examples also have corresponding documentation in either the WordPress Theme Handbook or WordPress Developer Blog.

Requirements:

  • You must be running at least WordPress 6.4.
  • You must have the Twenty Twenty-Four theme installed in your wp-content/themes folder.

Download or Test Live

FolderShort descriptionTagsDownload .zipLive Demo
📁example-block-style-jsBLOCK THEME, BLOCK STYLE, JAVASCRIPT📦
📁example-block-style-phpBLOCK THEME, BLOCK STYLE, PHP📦
📁example-block-stylesheetBLOCK THEME, PHP📦
📁example-block-variationBLOCK THEME, JAVASCRIPT📦
📁example-build-processBLOCK THEME, JAVASCRIPT📦
📁example-locked-patternBLOCK THEME, CURATION📦
📁example-template-part-areaBLOCK THEME, PHP📦
📁twentytwentyfour-starter-content-patternsBLOCK THEME, CURATION📦
📁twentytwentyfour-starter-template-patternsBLOCK THEME, CURATION📦