Highly Dynamic WordPress Sites with Gatsby and WordPress

by Zac Gordon

Slide 1

Slide 1 text

Highly Dynamic Gatsby Sites With WordPress

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

GIVE THANKS @JASONBAHL @MARCYSUTTON @HUSSAIN_THAJ @MUHSINLK @KIDUNOT89 @ALEXADARK @PEHAA @JLENGSTORF @SCOTTBOLINGER @CHRISBISCARDI @KELLENMACE @ALEXANDERBYOUNG @TYLBAR @THEJEFFMATSON

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

COMMENTS FORMS MEMBERSHIPS ECOMMERCE LMS GUTENBERG Dynamic Components

Slide 6

Slide 6 text

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.

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Comments

Slide 9

Slide 9 text

KEEP IT NATIVE COMMENTS CODE IT CUSTOM SASS IT

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

COMMENTS tnorthstack.com/dynamic-comments-gatsby-wordpresst

Slide 12

Slide 12 text

COMMENTS

Slide 13

Slide 13 text

COMMENTS

Slide 14

Slide 14 text

COMMENTS github.com/zgordon/gatsby-wordpress-course

Slide 15

Slide 15 text

COMMENTS CODE IT CUSTOM 1 Code a comment form in Gatsby 2 Save entries somewhere* 3 Setup moderation (and anti-spam)

Slide 16

Slide 16 text

COMMENTS jamstack-comments.netlify.com

Slide 17

Slide 17 text

COMMENTS css-tricks.com/jamstack-comments

Slide 18

Slide 18 text

COMMENTS

Slide 19

Slide 19 text

COMMENTS 1 Find the right one 2 Signup (Pay) 3 Embed / Install Pluing SASS IT

Slide 20

Slide 20 text

COMMENTS SASS IT

Slide 21

Slide 21 text

COMMENTS

Slide 22

Slide 22 text

KEEP IT NATIVE COMMENTS CODE IT CUSTOM SASS IT

Slide 23

Slide 23 text

Forms

Slide 24

Slide 24 text

FORMS WORDPRESS PLUGIN ROLL YOUR OWN SASS IT

Slide 25

Slide 25 text

COMMENTS

Slide 26

Slide 26 text

FORMS WORDPRESS PLUGIN 1 Find WP REST API or WP GraphQL Compatible Plugin 2 Parse (or Custom Code) Form

Slide 27

Slide 27 text

FORMS gatsbyjs.org/packages/gatsby-source-gravityforms/

Slide 28

Slide 28 text

FORMS

Slide 29

Slide 29 text

FORMS github.com/harness-software/wp-graphql-gravity-forms

Slide 30

Slide 30 text

FORMS

Slide 31

Slide 31 text

FORMS GatsbyWPthemes.com

Slide 32

Slide 32 text

FORMS

Slide 33

Slide 33 text

FORMS ROLL YOUR OWN 1 Code Custom Form in Gatsby 2 Store Form Submissions 3 Validate(?) Send Emails Check for new comments client side

Slide 34

Slide 34 text

FORMS

Slide 35

Slide 35 text

FORMS

Slide 36

Slide 36 text

FORMS

Slide 37

Slide 37 text

FORMS SASS IT 1 Find the right one 2 Signup (Pay) 3 Embed / Install Pluing

Slide 38

Slide 38 text

FORMS netlify.com/products/forms

Slide 39

Slide 39 text

FORMS

Slide 40

Slide 40 text

FORMS getform.io

Slide 41

Slide 41 text

FORMS

Slide 42

Slide 42 text

Memberships

Slide 43

Slide 43 text

Find plugin(s) with compatibility WORDPRESS PLUGIN 1 2 Setup Authentication 3 Login User & Check Permissions 4 Pull in Content Client Side MEMBERSHIPS

Slide 44

Slide 44 text

MEMBERSHIPS woocommerce.com/products/woocommerce-memberships

Slide 45

Slide 45 text

MEMBERSHIPS

Slide 46

Slide 46 text

MEMBERSHIPS

Slide 47

Slide 47 text

Ecommerce

Slide 48

Slide 48 text

ECOMMERCE WORDPRESS PLUGIN SASS IT

Slide 49

Slide 49 text

ECOMMERCE

Slide 50

Slide 50 text

ECOMMERCE anywherewc.com??? wcanywhere.com???

Slide 51

Slide 51 text

COMMENTS FORMS MEMBERSHIPS ECOMMERCE LMS GUTENBERG Dynamic Components

Slide 52

Slide 52 text

COME TALK TO ME! strattic.com // Static WP Hosting jsforwp.com // Courses, Bootcamps GatsbyWPThemes.com // Themes! @zgordon