Highly Dynamic WordPress Sites with Gatsby and WordPress

De0a01122ca4a619004332ab04431b7b?s=47 Zac Gordon
February 03, 2020

Highly Dynamic WordPress Sites with Gatsby and WordPress

Presentation at Gatsby Days LA

De0a01122ca4a619004332ab04431b7b?s=128

Zac Gordon

February 03, 2020
Tweet

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