Build Gatsby site with React and WordPress as a headless CMS

Create a layout component in the components/layout folder, importing React and layout.styles to apply primary and global styles, and use a state hook to manage the mobile menu.

Build a responsive hamburger button for the mobile menu in a Gatsby React layout, integrating the Hamburger component with overlay handling to reveal the menu at the small breakpoint.

Fetch header menu data from a GraphQL API in Gatsby using a custom hook and static query, surfacing site metadata and menu items from WordPress.

Build a Gatsby header component with a logo linked to the home page and the Bookworm title fetched via useMenuQuery, styled with wrapper and content, then inserted after the hamburger.

Create a Gatsby navigation by building a navigation component that consumes the WP menu data, renders main items and submenus with links, active states, and styling.

Build and integrate a footer component in a Gatsby React project, using a footer wrapper style, exporting footer, and adding contact info with a mock po box address.

Create a mobile overlay menu in a Gatsby site using OverlayMenu tied to layout state, a WP menu with useMenu, and a close button with opacity and transform.

Create a GraphQL query for the home page hero image and text using WordPress and ACF, then fetch data with a useStaticQuery hook for a full-width image.

Build a Gatsby hero image component for a WordPress headless CMS site using the gatsby-plugin-image, GraphQL data, and styled components to render hero image and text.

Create a call to action area on the home page by querying three CTA images, texts, and links from WordPress via GraphQL, using a fragment for CTA image data.

Build a call-to-action area component for a Gatsby site using CTA area query and a wrapper for three CTAs, then integrate on index page and verify image, link, and text.

Build three dynamic call-to-action boxes in a Gatsby site powered by WordPress as a headless CMS, using Gatsby image and a CTA component with image, text, and links.

Learn to fetch the latest WordPress post in a Gatsby React app by building a GraphQL query, sorting posts by date descending, and creating a useLatestBlogPost hook with useStaticQuery.

Build a latest blog post component in Gatsby with React and the useLatestBlogPost hook to render the first post’s title and excerpt using dangerouslySetInnerHTML, plus a read more link.

Create a GraphQL query in Gatsby to fetch the author and code text from a WordPress page, using the headless CMS workflow and a code query component.

Create a React code component in a Gatsby site, fetch data from WordPress via a query, and render an image, quote, author, and code text using wrapper and content styling.

Create a GraphQL query for the about section in Gatsby, selecting a WP page with database id 47 and retrieving content and featured image as a background via public URL.

Build a Gatsby site using React and WordPress as a headless CMS by constructing an about section with GraphQL queries, components, and image handling for featured images and page content.

Create dynamic Gatsby pages by querying WordPress page links with GraphQL and building a page template using the Route API.

Builds the page structure for a Gatsby page template by creating in-page style components, importing GraphQL tag, and wiring a layout with a wrapper, content wrapper, and content.

Build a dynamic page query in Gatsby using WordPress as a headless CMS, fetching title, content, status, and featured image for pages and their children with a variable ID.

Create page hero images for a Gatsby site using WordPress as a headless CMS by building a PageHero component, wiring Gatsby image, and conditionally rendering the featured image.

Build a breadcrumb component for a Gatsby site using React and WordPress as a headless CMS, wiring Gatsby Link and wrapper styles to render home and a conditional parent title.

Build the page layout with a sidebar and content in a Gatsby React site powered by WordPress as a headless CMS, creating a page sidebar, sidebar message, and menus.

Fetch WordPress categories and post counts via a GraphQL query in Gatsby node, filtering out uncategorized. Set posts per page to ten and create pages with the Gatsby node API.

Build a Gatsby site with React and WordPress as a headless CMS by creating an archive template with GraphQL query for categories and applying archive styles using layout and breadcrumb.

Create category archive pages in a Gatsby blog by wiring gatsby-node to map WordPress categories to archive templates, paginate posts per page, and exclude uncategorized.

Write a Gatsby archive page query by hand, filtering all WP posts by id with variables, and retrieve id, title, excerpt, slug, and a formatted date to render blog archives.

Create a static hero image for the blog page and implement a breadcrumb to navigate posts, using the archive header image and a wrapper component.

Build an archive sidebar component for the Gatsby site, sorting categories, displaying post counts, and linking to category pages with an active highlight and a header icon.

Create an archive template in a Gatsby React app that renders WordPress posts with an archive sidebar, page content, post titles, dates, and read more links, using dangerouslySetInnerHTML.

Build a Gatsby pagination component in React using styled-components and Gatsby Link, implementing previous and next navigation with dynamic URL parameters and conditional rendering based on page and total pages.

Build dynamic blog post pages using the Route API in a Gatsby site, setting up a blog folder, defining a post route, and wiring a React component.

Scaffold the post page by wiring layout, breadcrumbs, and styled components, create a content wrapper and post content with a header and sidebar, and prepare the page query.

Create a page query for a post with GraphQL to fetch id, title, content, author name, formatted date, and categories with slug, then inspect the console for data readiness.

Create the posts sidebar and content in a Gatsby site using React and WordPress as a headless CMS, wiring date, author, and categories to render post content.