Workshop: Mixing Content, Commerce, and SEO with Headless WordPress

certificate
Recording and certification are available to Multipass and Full ticket holders only
Please login if you have one.
Rate this content
Bookmark

When working with Headless WordPress it can be daunting having to setup an e-commerce site. This workshop will take you through connecting a Shopify app with your WordPress site, linking your WordPress content to your Shopify products, building a React and NextJS frontend to show your products and posts, using Yoast SEO, and deploying your site to WP Engine’s Atlas platform.

This workshop has been presented at React Summit Remote Edition 2021, check out the latest edition of this React Conference.

FAQ

Headless WordPress refers to using WordPress as a backend content management system while using a separate system for the front-end display. This approach allows developers to use modern development tools and frameworks to create the user interface, enhancing flexibility and performance.

Atlas is a platform launched by WP Engine specifically designed to host headless WordPress sites. It provides developers with the necessary tools and services to build and manage headless WordPress applications efficiently.

To follow the coding session, clone the provided repository from GitHub, navigate to the folder, check out the start branch, and delete the Git folder as instructed to start coding along with the session.

Yes, when using Headless WordPress, you can integrate multiple data sources such as different CMSs, APIs, or frameworks. This flexibility allows you to leverage the best tools available for each specific function of your site.

Using Headless WordPress for e-commerce offers several benefits including the ability to use modern front-end technologies, improved site performance, enhanced security, and better scalability. It allows for a more customized and optimized shopping experience.

Set up your development environment by cloning the provided repository, configuring your local environment to connect to a headless WordPress instance, and following the specific setup instructions provided in the session or WP Engine's documentation.

WPGraphQL is a plugin for WordPress that provides an efficient and secure way to retrieve and manipulate WordPress data using GraphQL. It is particularly important for headless setups as it optimizes data fetching and updates, making it faster and more scalable.

Matt Landers
Matt Landers
Will Johnston
Will Johnston
114 min
10 Jun, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Headless WordPress allows developers to build the front end using React frameworks like Gatsby or Next, bringing WordPress into the modern development age. The integration of external APIs with Headless WordPress allows for a mix and match approach, using APIs directly or pulling data through WordPress. The project demonstrates the use of Reactaits for state management and the implementation of SEO using Yoast. The workshop also covers the process of retrieving post data, building product cards, and adding products to the cart in a Headless WordPress and Shopify integration. The session concludes with resources for further learning and community engagement.
Video transcription and chapters available for users with access.

Watch more workshops on topic

Build a Headless WordPress App with Next.js and WPGraphQL
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
WorkshopFree
Kellen Mace
Kellen Mace
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Remixing WordPress: Building a Headless Site with Remix, WPGraphQL, and Web Fundamentals
React Summit 2022React Summit 2022
21 min
Remixing WordPress: Building a Headless Site with Remix, WPGraphQL, and Web Fundamentals
In this Talk, the concept of headless WordPress and its benefits for developers are discussed. The use of front-end frameworks like Remix, Nuxt, Next, or SvelteKit to interact with WordPress through REST or GraphQL APIs is highlighted. The process of creating content models, adding data, and querying the GraphQL schema is explained. The setup of a basic Remix app with Apollo Client and the loading of data into route components using Remix are covered. The handling of dynamic routing with Remix and WordPress is also explored.
Scaling WordPress with Next.js
React Summit Remote Edition 2021React Summit Remote Edition 2021
9 min
Scaling WordPress with Next.js
WordPress is still widely used, with over 800 million installs. The Jamstack is a modern approach to building static HTML websites that utilize JavaScript and APIs for dynamic content. Serving static HTML files is faster than server-based solutions like WordPress. Serving static files from storage or a CDN allows for infinite scalability. WordPress is a compelling option for nontechnical users due to its familiarity and thriving ecosystem.
Exploring the WordPress Graph with Next.js & WPGraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
23 min
Exploring the WordPress Graph with Next.js & WPGraphQL
WordPress is widely used, and it now supports a REST API for headless usage. Serving static HTML files allows for infinite scaling and surviving viral traffic. GraphQL can be used to interface with WordPress data, reducing complexity. WordPress can be coupled with plugins like Yoast and ACF, and WPGraphQL works seamlessly with these plugins. GraphQL allows for selecting only necessary data and has performance advantages over REST APIs.
Using GraphQL on WordPress
GraphQL Galaxy 2020GraphQL Galaxy 2020
26 min
Using GraphQL on WordPress
WordPress, powering 30% of all websites, faces issues with overfetching and underfetching when using its REST API. WPGraphQL, a plugin for WordPress, solves this problem by using GraphQL, reducing API calls and improving scalability. By installing WPGraphQL and writing queries, developers can easily fetch data and transform it for rendering. WPGraphQL has been used by popular websites like qz.com and apollographql.com, and it recently hit 1.0. Gatsby Source WordPress is a faster version of Gatsby that works well with WPGraphQL, and Gatsby can handle building large sites. WPGraphQL does not currently support data subscriptions, but community contributions are welcome. The new Gatsby-sourced WordPress plugin offers benefits like real-time preview and incremental builds.
Building React frontends for WordPress
JSNation Live 2020JSNation Live 2020
8 min
Building React frontends for WordPress
Frontity is a framework that combines WordPress and React to create modern user experiences. It is easy to use, SEO-friendly, and extensible. The framework has achieved great results for publishers, increasing page views, organic traffic, and user acquisition. Frontity Pro has served millions of page views worldwide and provides a seamless content management experience. Visit frontity.org to learn more and join the community.