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