Why is headless so hot right now? It helps companies meet people where they are digitally—including their devices. Headless is a new pattern for building websites that introduces several new concepts to WordPress. According to a new study, 64% of enterprise organizations are currently using a headless approach, representing a nearly 25% increase from 2019. Getting started with headless may feel overwhelming, but once you understand the playing field, your team will be building absurdly fast, decoupled websites in no time. WP Engine and Click Here Labs are teaming up in this session to cover key terms, emerging trends, and cutting-edge best practices for Headless WordPress.

2. Jonathan Jeter
Headless 101
Everything you wanted to know and more!
Hashim Warren
SENIOR PRODUCT
MARKETING MANAGER,
WP ENGINE
hashim.warren@wpengine.com
DIRECTOR OF DIGITAL
DEVELOPMENT, CLICK
HERE LABS
jjeter@clickherelabs.com

3. What is Headless
WordPress?
AND WHAT MAKES IT
DIFFERENT THAN
TRADITIONAL WORDPRESS?
 Headless is a new approach to
using WordPress
 CMS not responsible for
rendering content
 Content (or data) delivered over
an API
 Separate system for rendering
the content — Nate Archer,
developers.wpengine.com

4. A Front-end Meta-
framework
Renders The
Content
 Meta-frameworks are based on
JavaScript UI frameworks and
libraries like React and Vue
Popular choices include:
 Nextjs and Gatsby
▪ Based on React
 Nuxt
▪ Based on Vue
 Solves speed, accessibility, and
SEO problems

5. What is Nextjs and Gatsby?
AND WHICH META-FRAMEWORK SHOULD I USE WITH HEADLESS
WORDPRESS?
Gatsby has 2800+ free helper and source
plugins
This makes Gatsby ideal for sites that require
multiple sources of data/content, such as
WordPress + Shopify.
Nextjs can generate dynamic and static
pages
This makes Nextjs ideal for large sites and sites
with several content updates a day.

6. Why marketers and developers are adopting
this architecture
THE HEADLESS WORDPRESS BENEFITS
Cutting-Edge
Performance
 Perf focused front-end
frameworks
 Static pages that scale
 Image optimization,
prefetching, PWA, and more
Modern Developer
Experience
 Decoupled architecture
 JavaScript and component
based UI development
 CI/CD workflow
Rock-Solid Site
Security
 Decoupled architecture
 Additional WordPress
restrictions
 Fewer front-end WordPress
plugins

7. Speed & Reliability

8. Salvation Army
Annual Report
Website

9. Static Site

10. To cover this area exactly:
Size & Rotation
Height = 3”
Width = 4.3”
Position
X-position = 0.5”
Y-position = 0.5”
Core Web Vitals
SPEED IS EVERYTHING
 First Contentful Paint
 Speed Index
 Largest Contentful Paint
 Time to Interactive
 Total Blocking Time
 Cumulative Layout Shift

11. Flexibility

12. Multiple Data Sources

13. Multiple Applications

14. Consistency

15. Consistent UI
CONTENT ENTRY
 Familiar UI for content entry
 Reduces training requirements
 Doesn’t require specialist to add content
 User Management
 Publishing workflow

16. Challenges

17. Challenges with Headless
FLEXIBILITY BRINGS CHALLENGES
 Multiple platforms and technologies to support and
maintain
 Data architecture planning is paramount
 Costs can be higher initially, but ROI can be greater
 Content Preview
 Compatible WordPress Plugins

18. Thank You
Jonathan Jeter
Hashim Warren
SENIOR PRODUCT
MARKETING MANAGER,
WP ENGINE
hashim.warren@wpengine.com
DIRECTOR OF DIGITAL
DEVELOPMENT, CLICK
HERE LABS
jjeter@clickherelabs.com