Highly Dynamic WordPress Sites with Gatsby and WordPress

Presentation at Gatsby Days LA

Transcript

1. Highly
   Dynamic
   Gatsby Sites
   With WordPress
   

   View Slide

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
   

   View Slide

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

   View Slide

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
   

   View Slide

5. COMMENTS FORMS MEMBERSHIPS
   ECOMMERCE LMS GUTENBERG
   Dynamic Components
   

   View Slide

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.
   

   View Slide

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
   

   View Slide

8. Comments
   

   View Slide

9. KEEP IT
   NATIVE
   COMMENTS
   CODE IT
   CUSTOM
   SASS IT
   

   View Slide

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
    

    View Slide

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

    View Slide

12. COMMENTS
    

    View Slide

13. COMMENTS
    

    View Slide

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

    View Slide

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

    View Slide

16. COMMENTS
    jamstack-comments.netlify.com
    

    View Slide

17. COMMENTS
    css-tricks.com/jamstack-comments
    

    View Slide

18. COMMENTS
    

    View Slide

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

    View Slide

20. COMMENTS
    SASS IT
    

    View Slide

21. COMMENTS
    

    View Slide

22. KEEP IT
    NATIVE
    COMMENTS
    CODE IT
    CUSTOM
    SASS IT
    

    View Slide

23. Forms
    

    View Slide

24. FORMS
    WORDPRESS
    PLUGIN ROLL
    YOUR
    OWN
    SASS IT
    

    View Slide

25. COMMENTS
    

    View Slide

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

    View Slide

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

    View Slide

28. FORMS
    

    View Slide

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

    View Slide

30. FORMS
    

    View Slide

31. FORMS
    GatsbyWPthemes.com
    

    View Slide

32. FORMS
    

    View Slide

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
    

    View Slide

34. FORMS
    

    View Slide

35. FORMS
    

    View Slide

36. FORMS
    

    View Slide

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

    View Slide

38. FORMS
    netlify.com/products/forms
    

    View Slide

39. FORMS
    

    View Slide

40. FORMS
    getform.io
    

    View Slide

41. FORMS
    

    View Slide

42. Memberships
    

    View Slide

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

    View Slide

44. MEMBERSHIPS
    woocommerce.com/products/woocommerce-memberships
    

    View Slide

45. MEMBERSHIPS
    

    View Slide

46. MEMBERSHIPS
    

    View Slide

47. Ecommerce
    

    View Slide

48. ECOMMERCE
    WORDPRESS
    PLUGIN
    SASS IT
    

    View Slide

49. ECOMMERCE
    

    View Slide

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

    View Slide

51. COMMENTS FORMS MEMBERSHIPS
    ECOMMERCE LMS GUTENBERG
    Dynamic Components
    

    View Slide

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

    View Slide