Demystifying Block Themes
For use during the Jan 2025 Marlborough WordPress interactive workshop
Relevant Links to Services/SOftware
- playground.wordpress.net
- Creates an instant WordPress installation you can use in your browser
- localwp.com
- Creates a local instance of WordPress you can use on your local machine
- Integrates with hosts WP Engine and Flywheel
- Studio by WordPress.com
- Does the same thing as Local WP
- Integrates with WordPress.com
- Visual Code Studio
- Code Editor
- Will allow you to edit theme files for installations in Local or Studio by WP.com
Relevant Plugins
- WPIDE
- Allows you to use a code editor in-browser
- Necessary for those using WordPress Playground who want to edit theme files
- Lazy Blocks
- Useful for building custom blocks in your WordPress instance
- Advanced Custom Fields
- Useful for adding custom fields to leverage in custom blocks
- Useful Gutenberg-compatible plugins
- From Danielle’s talk at MWP August 2024
- We’ll be using Block Visibility during this workshop
- Gutenberg Hub All-Access Club
- An excellent resource for some time-saving (paid) block-based plugins
- Not all of them work, but even if only 10% of them did it would be a good value
Barebones Theme File Structure
Required Files To have
- style.css
- Necessary just for the metadata added to the Appearance > Themes page
- Despite its name, does not style the theme is not enqueued in the theme to do so
- We use many metadata items but the absolute necessary ones are Theme Name and Version
- templates/index.html
- This is an empty file in our theme
- But it must be present in the theme for it to function correctly
Optional Files We’ve Included
- screenshot.png
- Must be formatted as 1200×900
- Doesn’t do anything but makes the themes page look pretty
- functions.php
- Allows you to add modifiers to how WordPress functions
- scripts.js
- Enqueued in functions.php
- We can add JavaScript logic to the front-end
- theme.css
- Enqueued in functions.php
- We can add CSS styling to the front-end
- theme-editor.css
- Enqueued in functions.php
- We can add CSS styling to the back-end editor
- theme.json
- The brain of your editor
- We’ve included a blank one
- Provides more granular control of the editor configuration than using the Site Editor alone