Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Highly Dynamic WordPress Sites with Gatsby and ...
Search
Zac Gordon
February 03, 2020
Technology
0
930
Highly Dynamic WordPress Sites with Gatsby and WordPress
Presentation at Gatsby Days LA
Zac Gordon
February 03, 2020
Tweet
Share
More Decks by Zac Gordon
See All by Zac Gordon
How We Can Make WordPress Better for the JAMstack
zgordon
0
260
Decoupled Days - JAMstack and WordPress for 2020
zgordon
0
170
The State of JavaScript and WordPress in 2020
zgordon
0
910
100 Things to Know About Building, Selling and Supporting Online Courses and Content
zgordon
0
580
How the New Redux Based Data API is Changing Everything in WordPress*
zgordon
0
340
The Data API in WordPress - WCMIA 2019
zgordon
0
980
Building Custom WordPress Blocks with React - WCPHX 2019
zgordon
0
74
React for Gutenberg, WordPress & Beyond - WordCamp Baltimore 2018
zgordon
0
250
WordCamp Seattle 2017 JavaScript Workshop
zgordon
0
930
Other Decks in Technology
See All in Technology
Snowflake ML モデルを dbt データパイプラインに組み込む
estie
0
110
JAWS DAYS 2025 アーキテクチャ道場 事前説明会 / JAWS DAYS 2025 briefing document
naospon
0
150
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
270
Potential EM 制度を始めた理由、そして2年後にやめた理由 - EMConf JP 2025
hoyo
2
2.8k
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
どちらかだけじゃもったいないかも? ECSとEKSを適材適所で併用するメリット、運用課題とそれらの対応について
tk3fftk
1
140
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
310
生成AI “再”入門 2025年春@WIRED TUESDAY EDITOR'S LOUNGE
kajikent
0
130
Amazon Aurora のバージョンアップ手法について
smt7174
2
150
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
150
ウォンテッドリーのデータパイプラインを支える ETL のための analytics, rds-exporter / analytics, rds-exporter for ETL to support Wantedly's data pipeline
unblee
0
130
AI自体のOps 〜LLMアプリの運用、AWSサービスとOSSの使い分け〜
minorun365
PRO
6
350
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Writing Fast Ruby
sferik
628
61k
GitHub's CSS Performance
jonrohan
1030
460k
Git: the NoSQL Database
bkeepers
PRO
427
65k
Gamification - CAS2011
davidbonilla
80
5.2k
Embracing the Ebb and Flow
colly
84
4.6k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
The World Runs on Bad Software
bkeepers
PRO
67
11k
How to Ace a Technical Interview
jacobian
276
23k
What's in a price? How to price your products and services
michaelherold
244
12k
Transcript
Highly Dynamic Gatsby Sites With WordPress
Hi! I'M ZAC Static & Headless WordPress Community Builder at
Strattic Hosting Educator at JavaScript for WordPress, Frontend Masters, Udacity, Udemy, Treehouse @zgordon gatsbyWPthemes.com
GIVE THANKS @JASONBAHL @MARCYSUTTON @HUSSAIN_THAJ @MUHSINLK @KIDUNOT89 @ALEXADARK @PEHAA @JLENGSTORF
@SCOTTBOLINGER @CHRISBISCARDI @KELLENMACE @ALEXANDERBYOUNG @TYLBAR @THEJEFFMATSON
Dynamic Sites A portion of the content is queried from
WordPress on the client side after the build process is complete. Static Sites Content is queried and created during build time
COMMENTS FORMS MEMBERSHIPS ECOMMERCE LMS GUTENBERG Dynamic Components
CODE IT Write the GraphQL or REST API requests needed
to create the functionality you want. DYNAMIC APPROACHES SASS IT Use a 3rd party service to get the functionality you want.
EXACTLY WHAT YOU WANT EXTENDABLE CODE IT + - SASS
IT DEVELOPMENT TIME & SKILL MAINTENANCE COSTS LITTLE / NO CUSTOM CODING MAINTAINED MAY NOT BE EXTENDABLE OR EVEN EXIST! COSTS
Comments
KEEP IT NATIVE COMMENTS CODE IT CUSTOM SASS IT
KEEP IT NATIVE COMMENTS 1 Code a custom comment form
2 Use Apollo and GraphQL to send comment to WP 3 Trigger rebuild after moderation * Check for new comments client side
COMMENTS tnorthstack.com/dynamic-comments-gatsby-wordpresst
COMMENTS
COMMENTS
COMMENTS github.com/zgordon/gatsby-wordpress-course
COMMENTS CODE IT CUSTOM 1 Code a comment form in
Gatsby 2 Save entries somewhere* 3 Setup moderation (and anti-spam)
COMMENTS jamstack-comments.netlify.com
COMMENTS css-tricks.com/jamstack-comments
COMMENTS
COMMENTS 1 Find the right one 2 Signup (Pay) 3
Embed / Install Pluing SASS IT
COMMENTS SASS IT
COMMENTS
KEEP IT NATIVE COMMENTS CODE IT CUSTOM SASS IT
Forms
FORMS WORDPRESS PLUGIN ROLL YOUR OWN SASS IT
COMMENTS
FORMS WORDPRESS PLUGIN 1 Find WP REST API or WP
GraphQL Compatible Plugin 2 Parse (or Custom Code) Form
FORMS gatsbyjs.org/packages/gatsby-source-gravityforms/
FORMS
FORMS github.com/harness-software/wp-graphql-gravity-forms
FORMS
FORMS GatsbyWPthemes.com
FORMS
FORMS ROLL YOUR OWN 1 Code Custom Form in Gatsby
2 Store Form Submissions 3 Validate(?) Send Emails Check for new comments client side
FORMS
FORMS
FORMS
FORMS SASS IT 1 Find the right one 2 Signup
(Pay) 3 Embed / Install Pluing
FORMS netlify.com/products/forms
FORMS
FORMS getform.io
FORMS
Memberships
Find plugin(s) with compatibility WORDPRESS PLUGIN 1 2 Setup Authentication
3 Login User & Check Permissions 4 Pull in Content Client Side MEMBERSHIPS
MEMBERSHIPS woocommerce.com/products/woocommerce-memberships
MEMBERSHIPS
MEMBERSHIPS
Ecommerce
ECOMMERCE WORDPRESS PLUGIN SASS IT
ECOMMERCE
ECOMMERCE anywherewc.com??? wcanywhere.com???
COMMENTS FORMS MEMBERSHIPS ECOMMERCE LMS GUTENBERG Dynamic Components
COME TALK TO ME! strattic.com // Static WP Hosting jsforwp.com
// Courses, Bootcamps GatsbyWPThemes.com // Themes! @zgordon