Awesome
Block Theme Examples
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/themesfolder.
Download or Test Live
<!-- Please, do not remove these @TABLE EXAMPLES BEGIN and @TABLE EXAMPLES END comments or modify the table inside. This table is automatically generated from the data at data/examples.json and data/tags.json --> <!-- @TABLE EXAMPLES BEGIN -->| Folder | Short description | Tags | Download .zip | Live Demo |
|---|---|---|---|---|
| 📁 | example-block-style-js | <small><code><a target="_blank" href="https://github.com/WordPress/block-theme-examples/wiki/Tags#block-theme">BLOCK THEME</a></code></small>, <small><code><a target="_blank" href="https://github.com/WordPress/block-theme-examples/wiki/Tags#block-style">BLOCK STYLE</a></code></small>, <small><code><a target="_blank" href="https://github.com/WordPress/block-theme-examples/wiki/Tags#javascript">JAVASCRIPT</a></code></small> | 📦 |  |
| 📁 | example-block-style-php | <small><code><a target="_blank" href="https://github.com/WordPress/block-theme-examples/wiki/Tags#block-theme">BLOCK THEME</a></code></small>, <small><code><a target="_blank" href="https://github.com/WordPress/block-theme-examples/wiki/Tags#block-style">BLOCK STYLE</a></code></small>, <small><code><a target="_blank" href="https://github.com/WordPress/block-theme-examples/wiki/Tags#php">PHP</a></code></small> | 📦 | |
| 📁 | example-block-stylesheet | <small><code><a target="_blank" href="https://github.com/WordPress/block-theme-examples/wiki/Tags#block-theme">BLOCK THEME</a></code></small>, <small><code><a target="_blank" href="https://github.com/WordPress/block-theme-examples/wiki/Tags#php">PHP</a></code></small> | 📦 | |
| 📁 | example-block-variation | <small><code><a target="_blank" href="https://github.com/WordPress/block-theme-examples/wiki/Tags#block-theme">BLOCK THEME</a></code></small>, <small><code><a target="_blank" href="https://github.com/WordPress/block-theme-examples/wiki/Tags#javascript">JAVASCRIPT</a></code></small> | 📦 | |
| 📁 | example-build-process | <small><code><a target="_blank" href="https://github.com/WordPress/block-theme-examples/wiki/Tags#block-theme">BLOCK THEME</a></code></small>, <small><code><a target="_blank" href="https://github.com/WordPress/block-theme-examples/wiki/Tags#javascript">JAVASCRIPT</a></code></small> | 📦 | |
| 📁 | example-locked-pattern | <small><code><a target="_blank" href="https://github.com/WordPress/block-theme-examples/wiki/Tags#block-theme">BLOCK THEME</a></code></small>, <small><code><a target="_blank" href="https://github.com/WordPress/block-theme-examples/wiki/Tags#curation">CURATION</a></code></small> | 📦 | |
| 📁 | example-template-part-area | <small><code><a target="_blank" href="https://github.com/WordPress/block-theme-examples/wiki/Tags#block-theme">BLOCK THEME</a></code></small>, <small><code><a target="_blank" href="https://github.com/WordPress/block-theme-examples/wiki/Tags#php">PHP</a></code></small> | 📦 | |
| 📁 | twentytwentyfour-starter-content-patterns | <small><code><a target="_blank" href="https://github.com/WordPress/block-theme-examples/wiki/Tags#block-theme">BLOCK THEME</a></code></small>, <small><code><a target="_blank" href="https://github.com/WordPress/block-theme-examples/wiki/Tags#curation">CURATION</a></code></small> | 📦 | |
| 📁 | twentytwentyfour-starter-template-patterns | <small><code><a target="_blank" href="https://github.com/WordPress/block-theme-examples/wiki/Tags#block-theme">BLOCK THEME</a></code></small>, <small><code><a target="_blank" href="https://github.com/WordPress/block-theme-examples/wiki/Tags#curation">CURATION</a></code></small> | 📦 | |