Download to read offline
More Related Content
![[Codemash] Caching Made "Bootiful"!](https://cdn.slidesharecdn.com/ss_thumbnails/cachingmadebootifulcodemash11217-170112212321-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![[NYJavaSig] Riding the Distributed Streams - Feb 2nd, 2017](https://cdn.slidesharecdn.com/ss_thumbnails/ridingdistributedstreams-nyjavasig-02-02-2017-170203005616-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to Harness The Power Of ACF For Gatsby and WordPress
![Premeditated Architectural Bliss: Post Types, Taxonomies, [Advanced] Custom F...](https://cdn.slidesharecdn.com/ss_thumbnails/wcdayton-premeditatedarchitecturalbliss-rileypaulsen-150321070609-conversion-gate01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Harness The Power Of ACF For Gatsby and WordPress
- 1. Harness The Power ofACF for Gatsby and WordPress @imranhsayed
- 2. To BE COVERED Mainpoints 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 andopen-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 WordPressTheme WordPress wp-graphql
- 5. Using GUtenberg for contentcreation
- 6.
- 7.
- 8. ⩥ Require customdata ⊳ Selectable and sortable featured posts. ⊳ Relational data ⊳ Taxonomies ⩥ Pages have interactive elements When do we require Custom fields?
- 9.
- 10. ⩥ Write codeto create meta fields ⩥ Register Type by extending WP-GraphQL plugin ⩥ Time consuming
- 11.
- 14.
- 15. Repeatables & flexibility ACF Repeatables& Gallery Fields
- 16.
- 17. Hybrid pages Dynamic +Static
- 18. How do wequery ACF fields in Front end?
- 19. Wp-graphQl-ACF exposes ACF fieldsto the WPGraphQL Schema
- 20.
- 21.
- 22.
- 23. Install & Activatethe plugins on Wordpress
- 24. How do weuse ACF with GATSBY? Demo Theme
- 25.
- 26. ⩥ gatsby-transformer-sharp ⊳ CreatesImageSharp 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 ⊳ Helperplugin 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 ⊳ Traversesa 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
- 29.
- 30.
- 31.
- 32.
- 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 ImranSayed Full Stack Engineer @rtCamp You can find me at @imranhsayed on twitter Thank YOU!
Editor's Notes
- #6 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.
- #7 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.