Highly Dynamic WordPress Sites with Gatsby and WordPress

Presentation at Gatsby Days LA

Transcript

1. Highly Dynamic Gatsby Sites With WordPress
2. 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
3. GIVE THANKS @JASONBAHL @MARCYSUTTON @HUSSAIN_THAJ @MUHSINLK @KIDUNOT89 @ALEXADARK @PEHAA @JLENGSTORF @SCOTTBOLINGER @CHRISBISCARDI @KELLENMACE @ALEXANDERBYOUNG @TYLBAR @THEJEFFMATSON
4. 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
5. COMMENTS FORMS MEMBERSHIPS ECOMMERCE LMS GUTENBERG Dynamic Components
6. 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.
7. 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
8. Comments
9. KEEP IT NATIVE COMMENTS CODE IT CUSTOM SASS IT
10. 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
11. COMMENTS tnorthstack.com/dynamic-comments-gatsby-wordpresst
12. COMMENTS
13. COMMENTS
14. COMMENTS github.com/zgordon/gatsby-wordpress-course
15. COMMENTS CODE IT CUSTOM 1 Code a comment form in Gatsby 2 Save entries somewhere* 3 Setup moderation (and anti-spam)
16. COMMENTS jamstack-comments.netlify.com
17. COMMENTS css-tricks.com/jamstack-comments
18. COMMENTS
19. COMMENTS 1 Find the right one 2 Signup (Pay) 3 Embed / Install Pluing SASS IT
20. COMMENTS SASS IT
21. COMMENTS
22. KEEP IT NATIVE COMMENTS CODE IT CUSTOM SASS IT
23. Forms
24. FORMS WORDPRESS PLUGIN ROLL YOUR OWN SASS IT
25. COMMENTS
26. FORMS WORDPRESS PLUGIN 1 Find WP REST API or WP GraphQL Compatible Plugin 2 Parse (or Custom Code) Form
27. FORMS gatsbyjs.org/packages/gatsby-source-gravityforms/
28. FORMS
29. FORMS github.com/harness-software/wp-graphql-gravity-forms
30. FORMS
31. FORMS GatsbyWPthemes.com
32. FORMS
33. FORMS ROLL YOUR OWN 1 Code Custom Form in Gatsby 2 Store Form Submissions 3 Validate(?) Send Emails Check for new comments client side
34. FORMS
35. FORMS
36. FORMS
37. FORMS SASS IT 1 Find the right one 2 Signup (Pay) 3 Embed / Install Pluing
38. FORMS netlify.com/products/forms
39. FORMS
40. FORMS getform.io
41. FORMS
42. Memberships
43. Find plugin(s) with compatibility WORDPRESS PLUGIN 1 2 Setup Authentication 3 Login User & Check Permissions 4 Pull in Content Client Side MEMBERSHIPS
44. MEMBERSHIPS woocommerce.com/products/woocommerce-memberships
45. MEMBERSHIPS
46. MEMBERSHIPS
47. Ecommerce
48. ECOMMERCE WORDPRESS PLUGIN SASS IT
49. ECOMMERCE
50. ECOMMERCE anywherewc.com??? wcanywhere.com???
51. COMMENTS FORMS MEMBERSHIPS ECOMMERCE LMS GUTENBERG Dynamic Components
52. COME TALK TO ME! strattic.com // Static WP Hosting jsforwp.com // Courses, Bootcamps GatsbyWPThemes.com // Themes! @zgordon