$30 off During Our Annual Pro Sale. View Details »

Highly Dynamic WordPress Sites with Gatsby and WordPress

Zac Gordon
February 03, 2020

Highly Dynamic WordPress Sites with Gatsby and WordPress

Presentation at Gatsby Days LA

Zac Gordon

February 03, 2020
Tweet

More Decks by Zac Gordon

Other Decks in Technology

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