Recommended
More Related Content
What's hot
What's hot (20)
Similar to Harness The Power Of ACF For Gatsby and WordPress
Similar to Harness The Power Of ACF For Gatsby and WordPress (20)
More from Imran Sayed
More from Imran Sayed (20)
Recently uploaded
Recently uploaded (20)
Harness The Power Of ACF For Gatsby and WordPress
- 1. Harness The Power of ACF for Gatsby and WordPress @imranhsayed
- 2. To BE COVERED Main points of discussion ⩥ Why use Gatsby with WordPress? ⩥ Gatsby Theme for Decoupled WordPress ⩥ Real world project example. ⩥ Challenges when build custom home page with Gatsby WordPress Theme ⩥ How do we solve those challenges? ⩥ Free Example theme with the implementation.
- 3. ⩥ Free and open-source ( Both Gatsby and WordPress ) ⩥ Blazing fast ⩥ Secure ( no direct connection to the database ) ⩥ Development Experience ( Use modern front-end libraries like React, GraphQL ) ⩥ Content Mesh - ( Pull content from many sources ) ⩥ Content Migration is easy. Why Gatsby with WordPress
- 4. Decoupled architecture Gatsby WordPress Theme WordPress wp-graphql
- 5. Using GUtenberg for content creation
- 8. ⩥ Require custom data ⊳ Selectable and sortable featured posts. ⊳ Relational data ⊳ Taxonomies ⩥ Pages have interactive elements When do we require Custom fields?
- 10. ⩥ Write code to create meta fields ⩥ Register Type by extending WP-GraphQL plugin ⩥ Time consuming
- 11. Solution?
- 15. Repeatables & flexibility ACF Repeatables & Gallery Fields
- 17. Hybrid pages Dynamic + Static
- 18. How do we query ACF fields in Front end?
- 19. Wp-graphQl-ACF exposes ACF fields to the WPGraphQL Schema
- 20. wp-graphql-acf
- 21. wp-graphql
- 22. wp-graphiql
- 23. Install & Activate the plugins on Wordpress
- 24. How do we use ACF with GATSBY? Demo Theme
- 26. ⩥ gatsby-transformer-sharp ⊳ Creates ImageSharp nodes from image types and provides fields for processing your images in a variety of ways including resizing, cropping, and creating responsive images. Image Optimization plugins - sharp library
- 27. ⩥ gatsby-plugin-sharp ⊳ Helper plugin that exposes several image processing functions built on the Sharp image processing library. ⩥ gatsby-source-filesystem ⊳ Sources data from your local filesystem and creates File nodes from files. Image Optimization plugins
- 28. ⩥ gatsby-plugin-graphql-image ⊳ Traverses a grapqhl schema sourced from the gatsby-source-graphql plugin and generates file nodes for use with gatsby-plugin-sharp and gatsby-transformer-sharp. Image Optimization plugins
- 33. References ⩥ https://github.com/imranhsayed/gatsby- wordpress-themes ⩥ https://github.com/wp-graphql/ ⩥ https://github.com/wp-graphql/wp-graphql-acf ⩥ hello@rtcamp.com
- 34. I am Imran Sayed Full Stack Engineer @rtCamp You can find me at @imranhsayed on twitter Thank YOU!
Editor's Notes
- Since its introduction, few can argue that the Gutenberg editor has opened up and elevated the WordPress content creation experience. However, since Gutenberg dumps HTML right onto the page,when we have interactive elements like button click etc, it's not possible to run a direct DOM query on the content using React. One way out is to parse each of the blocks in order to add interactivity in the front end. However, this is a time-consuming process, and not always an option.
- This was exactly the scenario that we found ourselves in with one of our clients, Open Web (formerly SPOT.IM) They wanted to build a Gatsby-powered front end that was lightning quick, and pair it with the flexible and stable WordPress CMS on the backend. The project had a steep deadline, only 1 month between commencement & launch. So we had to find another way forward. What we came up with, and I think you will agree, is pretty stunning.