FIELD GUIDE
to modern WordPress
The independent theme developer’s
Slide 2
Slide 2 text
@marktimemedia
I
Design
&
Build DIGITAL
INTERFACES
HI, I’M
MICHELLE.
Rockstar at saying stuff.
Adorable badass.
Carefully curated spontaneity.
Meticulously organized chaos.
The Anxious Alicorn.
Slide 3
Slide 3 text
@marktimemedia
THE HERO’S
JOURNEY
In which our hero
embraces a disruption,
faces challenges,
and comes out changed
Slide 4
Slide 4 text
@marktimemedia
12 STAGES OF
TRANSFORMATION
IN 3 ACTS
1
2
3
4
5
6
7
8
9
10
11
12
The
Ordinary
World Call of
Adventure
Refusal
of the
Call
Tests,
Allies,
Enemies
Crossing
the First
Threshold
Meeting
the
Mentor
Approach
the
Innermost
Cave
The
Ordeal
The
Reward
The Long
Road Back
Resurrection
(Final Battle)
Return
with the
Elixir
DEPARTURE
RETURN
INITIATION
Departure:
Leaving the Ordinary World
Initiation:
The trials & tribulations of
the Special World
Return:
Journey back to the
Ordinary World
Slide 5
Slide 5 text
THE
ORDINARY
WORLD
The life of the
independent
theme developer
Slide 6
Slide 6 text
@marktimemedia
The independent theme developer
ROLES
Client Service
Creation & Building
Support & Consulting
HR, Finance, Sales,
Marketing, Janitorial…
ROLES
Design
Consulting
Development
Support
Marketing Finance
Family Hobbies
Slide 7
Slide 7 text
@marktimemedia
The independent theme developer
Fine-tuned workflows
Custom suite of tools
Knows what to do
Able to get help
SKILLS
Plugins
Custom Fields
HTML
CSS
PHP
Page Builders
Dev Tools
JS
Slide 8
Slide 8 text
CALL TO ADVENTURE
The release of a new suite of tools
BLOCK EDITOR
WP 5.0 (DEC 2018)
FULL SITE EDITING
WP 5.8 (JULY 2021)
Slide 9
Slide 9 text
@marktimemedia
The lure of adventure
WYSIWYG interface
Powerful content layout tools
More options
Faster page builds
Easily register global styles
More unified theming framework
AS A SERVICE PROVIDER: AS A DEVELOPER
Slide 10
Slide 10 text
@marktimemedia
Do you want to
begin?
YES NO
Slide 11
Slide 11 text
REFUSAL OF
THE CALL
Resistance to adopting
new tooling and workflows
Slide 12
Slide 12 text
@marktimemedia
The resistance to adventure
Glitchy interactions
Missing features
More support requests
Too many options
Inconsistent documentation
New development tools &
language
Missing or obscured functionality
Constant changes
AS A SERVICE PROVIDER: AS A DEVELOPER
Slide 13
Slide 13 text
@marktimemedia
The impossible journey
No one is supporting/paying us to
…learn an entire new programming language
…learn and debug all of these new build tools
…keep up with all of the changes
Slide 14
Slide 14 text
MEETING
THE
MENTOR
Finding the help you
need to move forward
Slide 15
Slide 15 text
@marktimemedia
Find support
social & slack communities
tutorials & talks
developer.wordpress.org
learn.wordpress.org/
fullsiteediting.com
wordpress.tv
RESOURCES
Manage expectations
changes, support, & updates
learn new skills during paid projects
take the journey at your own pace
Slide 16
Slide 16 text
@marktimemedia
Do you want to
begin?
YES NO
Slide 17
Slide 17 text
CROSSING THE
THRESHOLD
Get your bearings in the
new editor interface
Slide 18
Slide 18 text
@marktimemedia
Setting Up Camp
Use preferred local
development tool
or
developer.wordpress.org
/playground/
Slide 19
Slide 19 text
@marktimemedia
Navigate The Post Editor
Block & Pattern Inserter
Tools
Document Overview
View & Preview
Settings
Screen Options
Slide 20
Slide 20 text
@marktimemedia
Navigate The Post Editor
Block Settings
Block Toolbar
Slide 21
Slide 21 text
@marktimemedia
Navigate The Post Editor
Block, Pattern, & Media
Inserter
Slide 22
Slide 22 text
@marktimemedia
Navigate The Post Editor
List & Outline Views
Slide 23
Slide 23 text
@marktimemedia
Create & Copy Blocks Within The Editor
Visual Editor
vs
Code Editor
Slide 24
Slide 24 text
@marktimemedia
Create & Copy Blocks Within The Editor
Block locking
@marktimemedia
Navigate The FSE Editor
Styles & Variations
Slide 29
Slide 29 text
@marktimemedia
Understand the new
interface from a client
perspective
Understand the options
available to us as a
developer
Time to set up a test
environment and use the
editor
Time Level
BENEFITS
Change Level
OBSTACLES
Slide 30
Slide 30 text
TESTS, ALLIES, ENEMIES
Adapting your PHP/Classic Theme
Slide 31
Slide 31 text
@marktimemedia
add_theme_support
Block Tools
Core Block Patterns
Editor Color/Gradient Palettes
Editor Text Size Palettes
Alignment
Custom Color/Gradients
Spacing
Responsive Embeds
Editor Styles
Custom Units
Line Height
developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/
Slide 32
Slide 32 text
@marktimemedia
Theme.json In Traditional Themes
Settings
Styles
Templates – only used in FSE
Template Parts – only used in FSE
developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/
Slide 33
Slide 33 text
@marktimemedia
Theme.json Settings
enable/disable of features
theme presets
(color/spacing/fonts/sizing/etc)
block-level controls
preset & custom variables
fullsiteediting.com/lessons/remove-settings-
in-theme-json/
Slide 34
Slide 34 text
@marktimemedia
Theme.json + CSS
theme.json generated variable format
• --wp--preset--{category}--{slug}
• --wp--custom--{nested}--{object-keys}
variables/settings automatically loaded in both editor and frontend
enqueue_block_assets adds custom scripts and stylesheets to the
editor and frontend
Slide 35
Slide 35 text
@marktimemedia
theme.json variables
appearance of elements,
blocks, and variations
fullsiteediting.com/lessons/global-styles/
JSON
GENERATED CSS
Slide 36
Slide 36 text
@marktimemedia
theme.json variables
any custom variables you need JSON
GENERATED CSS
Slide 37
Slide 37 text
@marktimemedia
theme.json styles
default global styles & block styles
can be a value or reference other styles
Slide 38
Slide 38 text
@marktimemedia
More info: converting classic to block
developer.wordpress.org/themes/block-themes/converting-a-classic-theme-to-a-block-theme/
fullsiteediting.com/lessons/adding-full-site-editing-features-to-classic-themes/
Slide 39
Slide 39 text
@marktimemedia
Opens up the block editor
to client & developer use
Provide branding control
via theme styles and
default controls (limiting
options)
Setting up theme.json
Reworking CSS to use
variables
Time Level
BENEFITS
Change Level
OBSTACLES
Slide 40
Slide 40 text
APPROACH THE
INNERMOST CAVE
Block Editor development
(without Javascript)
@marktimemedia
Additional customization
options (bespoke needs)
Additional controls and
guided brand options
(locking it down)
Time to set up
Learning new functions
Block template PHP
syntax
Time Level
BENEFITS
Change Level
OBSTACLES
Slide 46
Slide 46 text
THE ORDEAL
Building a Full Site Editing (FSE) theme
@marktimemedia
Templates & Template Parts
developer.wordpress.org/news/2023/06/upgrading-the-site-
editing-experience-with-custom-template-part-areas/
fullsiteediting.com/how-to-lock-blocks-and-templates/
fullsiteediting.com/lessons/templates-and-template-parts
Slide 50
Slide 50 text
@marktimemedia
PHP Templates In FSE
fullsiteediting.com/lessons/how-to-use-php-templates-in-block-themes/
Slide 51
Slide 51 text
@marktimemedia
Fully take advantage of
Full Site Editing
Full rebuild or
replacement
Learning new and
uncommon syntax
Lack of error reporting
(WSOD)
Time Level
BENEFITS
Change Level
OBSTACLES
Slide 52
Slide 52 text
THE REWARD
Becoming a FSE developer
Slide 53
Slide 53 text
THE (LONG)
ROAD BACK
Block Editor development
(with Javascript)
@marktimemedia
Custom controls and
options more seamlessly
integrated with UI
Familiarity with CLI
Setting up build tools
Package and dependency
management
JS syntax
Time Level
BENEFITS
Change Level
OBSTACLES
Slide 59
Slide 59 text
RESURRECTION
(FINAL BATTLE)
Building Custom Blocks
Slide 60
Slide 60 text
@marktimemedia
Custom Blocks
developer.wordpress.org/news/2023/02/static-
vs-dynamic-blocks-whats-the-difference/
When variations, patterns,
and styles aren’t enough
New functionality or more
intuitive client UI
Slide 61
Slide 61 text
@marktimemedia
Static Blocks
Content and markup are
created and saved to the
post in the editor
developer.wordpress.org/block-editor/how-to-guides/block-tutorial/
writing-your-first-block-type/
Slide 62
Slide 62 text
@marktimemedia
Dynamic Blocks
Content and markup are
rendered on the server
May be dependent on
changes or updates in other
parts of the site
Can still have styles/options
developer.wordpress.org/block-editor/how-to-guides/block-tutorial/
creating-dynamic-blocks/
Slide 63
Slide 63 text
@marktimemedia
Fully custom functionality
Fully custom UI
Lack of documentation
(“wild west”)
Setting up build tools
Package and dependency
management
React syntax
Time Level
BENEFITS
Change Level
OBSTACLES
Slide 64
Slide 64 text
RETURN WITH
THE ELIXIR
A larger suite of tools
Slide 65
Slide 65 text
THE
HERO
You are a hero every
step of the way
1
2
3
4
5
6
7
8
9
10
11
12
The
Ordinary
World Call of
Adventure
Refusal
of the
Call
Tests,
Allies,
Enemies
Crossing
the First
Threshold
Meeting
the
Mentor
Approach
the
Innermost
Cave
The
Ordeal
The
Reward
The Long
Road Back
Resurrection
(Final Battle)
Return
with the
Elixir
Slide 66
Slide 66 text
@marktimemedia
QUESTIONS?
Here’s how to
get in touch:
Michelle Schulp Hunt
[email protected]
@marktimemedia
mynameismichelle.com
bit.ly/2023-wp-themes
𝕏