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

Recording available for Multipass and Full ticket holders
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.

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 transcription, chapters and summary 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
One of the largest draws of headless or decoupled WordPress architecture is that we can endlessly remix the WordPress CMS that content creators love with the latest and greatest of web technology. This presentation will demonstrate how quickly a developer can get up and running with headless WordPress development using the Remix full stack framework. Using open source tools like WPGraphQL and Atlas Content Modeler, you can transform your WordPress site into a powerful headless CMS that serves data via GraphQL. We’ll see how we can query for and use that data in a Remix app, and also discuss how the framework’s focus on web fundamentals can benefit both the developer and the visitors who use our sites.
Scaling WordPress with Next.js
React Summit Remote Edition 2021React Summit Remote Edition 2021
9 min
Scaling WordPress with Next.js
As modern as the web is, WordPress is still king. It’s not the most scalable, but is still compelling with its long history and UX. How can we leverage Next.js to bring WordPress to the modern web? We’ll walk through the tools that Next.js provides us to scale WordPress to the world. We’ll talk about what APIs we can use to easily wrangle WordPress content and how we can make the dynamic bits static.
Exploring the WordPress Graph with Next.js & WPGraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
23 min
Exploring the WordPress Graph with Next.js & WPGraphQL
Headless Wordpress using its built-in REST API is a powerful solution to scale WordPress to the web, but complex relationships can easily turn into chains of requests, making maintainability difficult along with the potential cost of performance.
With WPGraphQL, we can harness the benefits of GraphQL, leading to a better developer experience and optimized request logic, making sure we’re only delivering what we need to our users.We’ll explore these advantages and how these pieces fit together with modern tools like Next.js to build great experiences for the web.

Slides & more
Using GraphQL on WordPress
GraphQL Galaxy 2020GraphQL Galaxy 2020
26 min
Using GraphQL on WordPress
WordPress has been around for a really long time and is the most popular CMS on the web. Consuming its REST API however to build modern static sites leaves a lot to be desired. In this talk, we’ll live code a site that consumes WordPress over GraphQL and see the power of GraphQL in making mature and familiar services, easy to consume.
Building React frontends for WordPress
JSNation Live 2020JSNation Live 2020
8 min
Building React frontends for WordPress
In this talk, Pablo Postigo, co-Founder and CEO of Frontity, will give an introduction to the basics of Frontity Framework and talk about the main challenges when developing a React front-end for a headless WordPress site. In addition, he will share his insight on the future of JavaScript in the WordPress ecosystem and the story behind Frontity.