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. 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
  2. 3.

    GIVE THANKS @JASONBAHL @MARCYSUTTON @HUSSAIN_THAJ @MUHSINLK @KIDUNOT89 @ALEXADARK @PEHAA @JLENGSTORF

    @SCOTTBOLINGER @CHRISBISCARDI @KELLENMACE @ALEXANDERBYOUNG @TYLBAR @THEJEFFMATSON
  3. 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
  4. 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.
  5. 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
  6. 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
  7. 12.
  8. 13.
  9. 15.

    COMMENTS CODE IT CUSTOM 1 Code a comment form in

    Gatsby 2 Save entries somewhere* 3 Setup moderation (and anti-spam)
  10. 18.
  11. 19.

    COMMENTS 1 Find the right one 2 Signup (Pay) 3

    Embed / Install Pluing SASS IT
  12. 21.
  13. 23.
  14. 25.
  15. 26.

    FORMS WORDPRESS PLUGIN 1 Find WP REST API or WP

    GraphQL Compatible Plugin 2 Parse (or Custom Code) Form
  16. 28.
  17. 30.
  18. 32.
  19. 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
  20. 34.
  21. 35.
  22. 36.
  23. 37.

    FORMS SASS IT 1 Find the right one 2 Signup

    (Pay) 3 Embed / Install Pluing
  24. 39.
  25. 41.
  26. 43.

    Find plugin(s) with compatibility WORDPRESS PLUGIN 1 2 Setup Authentication

    3 Login User & Check Permissions 4 Pull in Content Client Side MEMBERSHIPS
  27. 47.
  28. 49.
  29. 52.

    COME TALK TO ME! strattic.com // Static WP Hosting jsforwp.com

    // Courses, Bootcamps GatsbyWPThemes.com // Themes! @zgordon