Highly Dynamic WordPress Sites with Gatsby and WordPress

Transcript

1. 1.

   Highly Dynamic Gatsby Sites With WordPress

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

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

   @SCOTTBOLINGER @CHRISBISCARDI @KELLENMACE @ALEXANDERBYOUNG @TYLBAR @THEJEFFMATSON
4. 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. 5.

   COMMENTS FORMS MEMBERSHIPS ECOMMERCE LMS GUTENBERG Dynamic Components

6. 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. 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. 8.

   Comments

9. 9.

   KEEP IT NATIVE COMMENTS CODE IT CUSTOM SASS IT

10. 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. 11.

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

12. 12.

    COMMENTS

13. 13.

    COMMENTS

14. 14.

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

15. 15.

    COMMENTS CODE IT CUSTOM 1 Code a comment form in

    Gatsby 2 Save entries somewhere* 3 Setup moderation (and anti-spam)
16. 16.

    COMMENTS jamstack-comments.netlify.com

17. 17.

    COMMENTS css-tricks.com/jamstack-comments

18. 18.

    COMMENTS

19. 19.

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

    Embed / Install Pluing SASS IT
20. 20.

    COMMENTS SASS IT

21. 21.

    COMMENTS

22. 22.

    KEEP IT NATIVE COMMENTS CODE IT CUSTOM SASS IT

23. 23.

    Forms

24. 24.

    FORMS WORDPRESS PLUGIN ROLL YOUR OWN SASS IT

25. 25.

    COMMENTS

26. 26.

    FORMS WORDPRESS PLUGIN 1 Find WP REST API or WP

    GraphQL Compatible Plugin 2 Parse (or Custom Code) Form
27. 27.

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

28. 28.

    FORMS

29. 29.

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

30. 30.

    FORMS

31. 31.

    FORMS GatsbyWPthemes.com

32. 32.

    FORMS

33. 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. 34.

    FORMS

35. 35.

    FORMS

36. 36.

    FORMS

37. 37.

    FORMS SASS IT 1 Find the right one 2 Signup

    (Pay) 3 Embed / Install Pluing
38. 38.

    FORMS netlify.com/products/forms

39. 39.

    FORMS

40. 40.

    FORMS getform.io

41. 41.

    FORMS

42. 42.

    Memberships

43. 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. 44.

    MEMBERSHIPS woocommerce.com/products/woocommerce-memberships

45. 45.

    MEMBERSHIPS

46. 46.

    MEMBERSHIPS

47. 47.

    Ecommerce

48. 48.

    ECOMMERCE WORDPRESS PLUGIN SASS IT

49. 49.

    ECOMMERCE

50. 50.

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

51. 51.

    COMMENTS FORMS MEMBERSHIPS ECOMMERCE LMS GUTENBERG Dynamic Components

52. 52.

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

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