From f85a8f93a8199e758c08f6328d7c1d26c63c256a Mon Sep 17 00:00:00 2001 From: ahuseyn Date: Thu, 20 Nov 2025 18:31:24 +0100 Subject: [PATCH 1/5] prepare plugin docs and index --- docs/index.md | 2 - .../explanation/core-concepts/index.md | 2 - .../how-to/configure-previews/index.md | 2 - .../how-to/integrate-with-faust/index.md | 2 - docs/plugins/hwp-previews/index.md | 28 ----------- .../tutorial/previews-with-rest/index.md | 2 - .../tutorial/previews-with-wpgraphql/index.md | 2 - .../how-to/admin-add-fields/index.md | 2 - .../how-to/admin-add-new-tab/index.md | 2 - .../how-to/admin-add-view-column/index.md | 2 - .../how-to/event-add-context/index.md | 2 - .../how-to/event-pub-sub/index.md | 2 - .../how-to/logger-add-handler/index.md | 2 - .../how-to/logger-add-processor/index.md | 3 -- .../how-to/logger-add-remove-rules/index.md | 2 - .../how-to/update-log-store-service/index.md | 2 - docs/plugins/wpgraphql-logging/index.md | 46 +++---------------- 17 files changed, 6 insertions(+), 99 deletions(-) diff --git a/docs/index.md b/docs/index.md index fb988033..922c7ae8 100644 --- a/docs/index.md +++ b/docs/index.md @@ -3,8 +3,6 @@ title: "Overview" description: "A modern, framework-agnostic collection of plugins and packages for building headless WordPress applications." --- -## What is the Headless WordPress Toolkit? - The Headless WordPress Toolkit is a modern, framework-agnostic toolkit for building headless WordPress applications. It provides a collection of plugins, packages, and examples to help developers make WordPress a better headless CMS. Our goal is to provide developers with the tools they need to build fast, scalable, and secure headless applications with WordPress, without being tied to a specific frontend framework. diff --git a/docs/plugins/hwp-previews/explanation/core-concepts/index.md b/docs/plugins/hwp-previews/explanation/core-concepts/index.md index 53c52a74..ba1831ef 100644 --- a/docs/plugins/hwp-previews/explanation/core-concepts/index.md +++ b/docs/plugins/hwp-previews/explanation/core-concepts/index.md @@ -3,8 +3,6 @@ title: "Core Concepts" description: "Deep dive explanations of the HWP Previews plugin's core concepts, architecture, and systems." --- -## Overview - This article provides an in-depth exploration of the fundamental concepts that power the HWP Previews plugin, covering the template-based URL system that enables framework-agnostic preview generation, the parameter registry that makes URLs dynamic and context-aware, the flexible post type configuration system, solutions for WordPress hierarchical content challenges, and the different preview modes available to content creators. ## Core Architectural Concepts diff --git a/docs/plugins/hwp-previews/how-to/configure-previews/index.md b/docs/plugins/hwp-previews/how-to/configure-previews/index.md index 536f3e16..572d4737 100644 --- a/docs/plugins/hwp-previews/how-to/configure-previews/index.md +++ b/docs/plugins/hwp-previews/how-to/configure-previews/index.md @@ -3,8 +3,6 @@ title: "Configure Previews" description: "Learn how to configure preview functionality using the HWP Previews plugin in your headless WordPress application." --- -## Overview - This guide shows you how to configure preview URLs for your headless WordPress site using HWP Previews. You'll set up preview links that redirect from WordPress to your front-end application with the necessary context data. > [!TIP] diff --git a/docs/plugins/hwp-previews/how-to/integrate-with-faust/index.md b/docs/plugins/hwp-previews/how-to/integrate-with-faust/index.md index 7acd8c62..17588be0 100644 --- a/docs/plugins/hwp-previews/how-to/integrate-with-faust/index.md +++ b/docs/plugins/hwp-previews/how-to/integrate-with-faust/index.md @@ -3,8 +3,6 @@ title: "Integrate with Faust.js" description: "Learn how to integrate the HWP Previews plugin with Faust.js in your headless WordPress application." --- -## Overview - This guide shows you how to use HWP Previews with Faust.js. The integration happens automatically when both plugins are installed. ## Prerequisites diff --git a/docs/plugins/hwp-previews/index.md b/docs/plugins/hwp-previews/index.md index 5ea0d1fb..b4163519 100644 --- a/docs/plugins/hwp-previews/index.md +++ b/docs/plugins/hwp-previews/index.md @@ -3,23 +3,10 @@ title: "HWP Previews" description: "HWP Previews plugin enables seamless preview functionality for headless WordPress applications, allowing content creators to preview their changes in the frontend application before publishing." --- -## Introduction - **HWP Previews** is a headless preview solution for WordPress that provides fully configurable preview URLs via a settings interface. This plugin bridges the preview gap in headless WordPress architectures, allowing content creators to preview their changes in the front-end application before publishing. -## Table of Contents - -* [Key Features](#key-features) -* [Setup](#setup) -* [Project Structure](#project-structure) -* [Configuration](#configuration) -* [Front-End Integration](#front-end-integration) -* [Using With Faust.js](#using-with-faustjs) -* [Documentation](#documentation) -* [Contributing](#contributing) - ## Key Features ### Framework Agnostic @@ -132,21 +119,6 @@ To implement previews from scratch, refer to your framework's documentation: HWP Previews automatically integrates with [Faust.js](https://faustjs.org/) when both plugins are active. See the [Integrate with Faust.js](how-to/integrate-with-faust/index.md) guide for details. -## Documentation - -### How-to guides - -* [Configure Previews](how-to/configure-previews/index.md) -* [Integrate with Faust.js](how-to/integrate-with-faust/index.md) - -### Tutorials -* [Build Previews with Next.js and WPGraphQL](tutorial/previews-with-wpgraphql/index.md) -* [Build Previews with Next.js and REST API](tutorial/previews-with-rest/index.md) - -### Explanation - -* [Core Concepts](explanation/core-concepts/index.md) - ## Contributing If you feel like something is missing or you want to add documentation, we encourage you to contribute! Please check out our [Contributing Guide](https://github.com/wpengine/hwptoolkit/blob/main/CONTRIBUTING.md) for more details. diff --git a/docs/plugins/hwp-previews/tutorial/previews-with-rest/index.md b/docs/plugins/hwp-previews/tutorial/previews-with-rest/index.md index d080b931..ffdd7697 100644 --- a/docs/plugins/hwp-previews/tutorial/previews-with-rest/index.md +++ b/docs/plugins/hwp-previews/tutorial/previews-with-rest/index.md @@ -3,8 +3,6 @@ title: "Build Previews with Next.js and REST API" description: "Learn how to build a Next.js application with WordPress preview functionality using the REST API and Application Passwords." --- -## Overview - In this tutorial, we will build a Next.js application that displays WordPress content and enables preview functionality for draft posts. By the end, you will have a working headless WordPress setup where clicking "Preview" in WordPress opens your draft content in Next.js. We will use Next.js Pages Router, WordPress REST API for data fetching, and WordPress Application Passwords for authentication. diff --git a/docs/plugins/hwp-previews/tutorial/previews-with-wpgraphql/index.md b/docs/plugins/hwp-previews/tutorial/previews-with-wpgraphql/index.md index 0783bfee..cb5ff96d 100644 --- a/docs/plugins/hwp-previews/tutorial/previews-with-wpgraphql/index.md +++ b/docs/plugins/hwp-previews/tutorial/previews-with-wpgraphql/index.md @@ -3,8 +3,6 @@ title: "Build Previews with Next.js and WPGraphQL" description: "Learn how to build a Next.js application with WordPress preview functionality using WPGraphQL and the HWP Previews plugin." --- -## Overview - In this tutorial, we will build a Next.js application that displays WordPress content and enables preview functionality for draft posts. By the end, you will have a working headless WordPress setup where clicking "Preview" in WordPress opens your draft content in Next.js. We will use Next.js Draft Mode, WPGraphQL for data fetching, and WordPress Application Passwords for authentication. diff --git a/docs/plugins/wpgraphql-logging/how-to/admin-add-fields/index.md b/docs/plugins/wpgraphql-logging/how-to/admin-add-fields/index.md index 5a23bd33..6f0ad0d6 100644 --- a/docs/plugins/wpgraphql-logging/how-to/admin-add-fields/index.md +++ b/docs/plugins/wpgraphql-logging/how-to/admin-add-fields/index.md @@ -3,8 +3,6 @@ title: "How To Guide: Add a new Settings Field" description: "Learn how to add custom settings fields to the WPGraphQL Logging plugin admin interface and retrieve their values programmatically." --- -## Overview - In this guide, you will learn how to extend the WPGraphQL Logging plugin's admin interface by adding custom settings fields and integrating them with the logging system. We will demonstrate how to create a new checkbox field in the admin settings, retrieve its value programmatically, and use it to control logging behavior through custom rules. This approach is useful for adding application-specific configuration options, creating conditional logging scenarios, or providing users with granular control over what gets logged in their GraphQL operations. diff --git a/docs/plugins/wpgraphql-logging/how-to/admin-add-new-tab/index.md b/docs/plugins/wpgraphql-logging/how-to/admin-add-new-tab/index.md index 1ed571ae..db30c858 100644 --- a/docs/plugins/wpgraphql-logging/how-to/admin-add-new-tab/index.md +++ b/docs/plugins/wpgraphql-logging/how-to/admin-add-new-tab/index.md @@ -3,8 +3,6 @@ title: "How To Guide: Add a new Settings Tab" description: "Learn how to add custom settings tabs to the WPGraphQL Logging plugin admin interface." --- -## Overview - In this guide, you will learn how to extend the WPGraphQL Logging plugin's admin interface by creating custom settings tabs with their own fields and configuration options. We will demonstrate how to create a new settings tab, add custom fields to it, and integrate it with the plugin's settings system. This approach is useful for organizing related configuration options, creating plugin-specific settings sections, or providing users with dedicated interfaces for managing complex logging behaviors and integrations with external services. diff --git a/docs/plugins/wpgraphql-logging/how-to/admin-add-view-column/index.md b/docs/plugins/wpgraphql-logging/how-to/admin-add-view-column/index.md index b889203e..906c2f07 100644 --- a/docs/plugins/wpgraphql-logging/how-to/admin-add-view-column/index.md +++ b/docs/plugins/wpgraphql-logging/how-to/admin-add-view-column/index.md @@ -3,8 +3,6 @@ title: "How To Guide: Update the Admin Grid" description: "Learn how to add custom columns to the WPGraphQL Logging plugin admin logs table." --- -## Overview - This guide shows how to add a custom column to the Logs list table using the provided filters. We’ll add a Memory Peak Usage column sourced from the log entry’s `extra.memory_peak_usage`. ### Hooks overview diff --git a/docs/plugins/wpgraphql-logging/how-to/event-add-context/index.md b/docs/plugins/wpgraphql-logging/how-to/event-add-context/index.md index b75bc666..5cf323a6 100644 --- a/docs/plugins/wpgraphql-logging/how-to/event-add-context/index.md +++ b/docs/plugins/wpgraphql-logging/how-to/event-add-context/index.md @@ -3,8 +3,6 @@ title: "How To Guide: Add Data to an Event" description: "Learn how to add custom context data to WPGraphQL Logging event." --- -## Overview - In this guide, you will learn how to extend the logging capabilities of WPGraphQL Logging by transforming events and adding custom context data. We will demonstrate how to modify event payloads before they are logged, which can be useful for adding application-specific metadata, changing log levels dynamically, or enriching log entries with additional debugging information that helps with monitoring and troubleshooting your GraphQL operations. diff --git a/docs/plugins/wpgraphql-logging/how-to/event-pub-sub/index.md b/docs/plugins/wpgraphql-logging/how-to/event-pub-sub/index.md index 1cb594aa..9023bb32 100644 --- a/docs/plugins/wpgraphql-logging/how-to/event-pub-sub/index.md +++ b/docs/plugins/wpgraphql-logging/how-to/event-pub-sub/index.md @@ -3,8 +3,6 @@ title: "How To Guide: Use the Events Pub/Sub System" description: "Learn how to use the WPGraphQL Logging plugin's event pub/sub system to subscribe, transform, and emit events." --- -## Overview - The plugin exposes a lightweight pub/sub bus around key WPGraphQL lifecycle events and bridges them to standard WordPress actions/filters. You can: * Subscribe (read-only) to observe event payloads diff --git a/docs/plugins/wpgraphql-logging/how-to/logger-add-handler/index.md b/docs/plugins/wpgraphql-logging/how-to/logger-add-handler/index.md index a11f359d..69c4e1f6 100644 --- a/docs/plugins/wpgraphql-logging/how-to/logger-add-handler/index.md +++ b/docs/plugins/wpgraphql-logging/how-to/logger-add-handler/index.md @@ -3,8 +3,6 @@ title: "How To Guide: Add a new Handler" description: "This guide shows how to log to a file using a Monolog handler, either in addition to the default WordPress database handler or as a replacement. It also covers per-instance overrides." --- -## Overview - In this guide, you will learn how to extend the logging capabilities of WPGraphQL Logging by adding a new [Monolog](https://github.com/Seldaek/monolog) handler. Specifically, we will demonstrate how to send logs to a file, which can be useful for long-term storage, offline analysis, or integration with external log management systems. ## What is a Monolog Handler? diff --git a/docs/plugins/wpgraphql-logging/how-to/logger-add-processor/index.md b/docs/plugins/wpgraphql-logging/how-to/logger-add-processor/index.md index bfa77def..4b4ea851 100644 --- a/docs/plugins/wpgraphql-logging/how-to/logger-add-processor/index.md +++ b/docs/plugins/wpgraphql-logging/how-to/logger-add-processor/index.md @@ -3,9 +3,6 @@ title: "How To Guide: Add a new Processor" description: "Learn how to add custom Monolog processors to the WPGraphQL Logging plugin to transform log records." --- -## Overview - - In this guide, you will learn how to extend the logging capabilities of WPGraphQL Logging by adding a new [Monolog](https://github.com/Seldaek/monolog) processor. Specifically, we will demonstrate how to add the current WordPress environment variable to the extra data, which can be useful for distinguishing between development, staging, and production environments in your logs. diff --git a/docs/plugins/wpgraphql-logging/how-to/logger-add-remove-rules/index.md b/docs/plugins/wpgraphql-logging/how-to/logger-add-remove-rules/index.md index 6bf31479..ad11a3d7 100644 --- a/docs/plugins/wpgraphql-logging/how-to/logger-add-remove-rules/index.md +++ b/docs/plugins/wpgraphql-logging/how-to/logger-add-remove-rules/index.md @@ -3,8 +3,6 @@ title: "How To Guide: Add or Remove a Rule" description: "Learn how to create and register custom logging rules with the WPGraphQL Logging plugin." --- -## Overview - This guide shows how to create a custom logging rule that only passes when the GraphQL query contains a specific substring (like "GetPost"), how to register it with the RuleManager, and how to remove existing rules. ### Architecture diff --git a/docs/plugins/wpgraphql-logging/how-to/update-log-store-service/index.md b/docs/plugins/wpgraphql-logging/how-to/update-log-store-service/index.md index 7265461e..20128e19 100644 --- a/docs/plugins/wpgraphql-logging/how-to/update-log-store-service/index.md +++ b/docs/plugins/wpgraphql-logging/how-to/update-log-store-service/index.md @@ -3,8 +3,6 @@ title: "How To Guide: Update the Log Store Service" description: "Learn how to replace the default database logging with a custom log storage implementation in the WPGraphQL Logging plugin." --- -## Overview - The WPGraphQL Logging plugin provides a robust database logging solution out of the box. However, for advanced use cases or integration with external logging systems, you can replace the default storage mechanism with your own custom implementation. This is made possible by the `wpgraphql_logging_log_store_service` filter. diff --git a/docs/plugins/wpgraphql-logging/index.md b/docs/plugins/wpgraphql-logging/index.md index 29ba943c..0231ad99 100644 --- a/docs/plugins/wpgraphql-logging/index.md +++ b/docs/plugins/wpgraphql-logging/index.md @@ -3,26 +3,13 @@ title: "WPGraphQL Logging Plugin" description: "WPGraphQL Logging plugin provides observability and visibility into the GraphQL request and event lifecycle. This capability gives users the understandability needed to quickly identify and resolve performance issues and bottlenecks within their headless WordPress application." --- -# Introduction - **WPGraphQL Logging Plugin** provides **observability and visibility** into the **GraphQL request and event lifecycle**. This allows users to **quickly identify** and **resolve performance issues** and bottlenecks within their headless WordPress application. -## Table of Contents - -* [Key Features](#key-features) -* [Setup](#setup) -* [Project Structure](#project-structure) -* [Viewing Logs](#viewing-logs) -* [Uninstallation](#uninstallation) -* [How to Guides](#how-to-guides) -* [Contributing](#contributing) - - ## Key Features -### ♻️ WPGraphQL Event Lifecycle +### WPGraphQL Event Lifecycle The plugin captures key events for the WPGraphQL event lifecycle (configurable) @@ -33,23 +20,23 @@ The plugin captures key events for the WPGraphQL event lifecycle (configurable) * **Response Headers** * **Request Results** -### 🎧 Pub/Sub Event System +### Pub/Sub Event System Built with developers and plugins in mind, the plugin allows users to listen to individual events and transform or collect data from those events. -### 🛠️ Monolog Implementation +### Monolog Implementation The plugin is built using the PHP logging library [Monolog](https://github.com/Seldaek/monolog) with a default handler to log data to the database. The plugin can easily be extended to add, change or remove default processors and handlers. -### 🔍 Rule based logging +### Rule based logging The plugin determines whether to log an event based on a set rules defined in a rule manager. This is built to be easily extended by users to customize or add their own rules. -### 📦 Data Management +### Data Management The plugin provides comprehensive data management capabilities, allowing you to configure which fields should be removed, truncated, or anonymized to protect sensitive information. -### 📈 Admin UI +### Admin UI The plugin delivers a admin UI with some filtering of logs around dates or level and the ability to download logs in CSV format. @@ -185,27 +172,6 @@ define( 'WP_GRAPHQL_LOGGING_UNINSTALL_PLUGIN', true ); > \[!WARNING] > **Data Loss Warning**: When `WP_GRAPHQL_LOGGING_UNINSTALL_PLUGIN` is defined as `true`, deactivating the plugin will permanently delete all logged data and drop the plugin's database tables. This action is irreversible. -## How to Guides - -### 🛠️ Logging - -* [Add a New Handler](how-to/logger-add-handler/index.md) -* [Add a New Processor](how-to/logger-add-processor/index.md) -* [Add or Remove a Rule](how-to/logger-add-remove-rules/index.md) -* [Update the Log Store Service](how-to/update-log-store-service/index.md) - -### ♻️ Events - -* [Use the Events Pub/Sub system](how-to/event-pub-sub/index.md) -* [Add Data to an Event](how-to/event-add-context/index.md) - -### 📈 Admin - -* [Add a new Settings Field](how-to/admin-add-fields/index.md) -* [Add a new Settings Tab](how-to/add-add-new-tab/index.md) -* [Update the Admin Grid](how-to/admin_add_view_column.md) - - ## Contributing If you feel like something is missing or you want to add documentation, we encourage you to contribute! Please check out our [Contributing Guide](https://github.com/wpengine/hwptoolkit/blob/main/CONTRIBUTING.md) for more details. From 1a1f5c5489223ba6277b0f254e3bdc5da6536180 Mon Sep 17 00:00:00 2001 From: ahuseyn Date: Thu, 20 Nov 2025 22:59:03 +0100 Subject: [PATCH 2/5] prepare how-to and explanation docs for website --- docs/explanation/get-vs-post/index.md | 4 +--- docs/explanation/graphql-endpoints/index.md | 2 +- docs/explanation/headless-authentication/index.md | 2 -- docs/explanation/rendering-options/index.md | 2 -- docs/explanation/routing/index.md | 2 -- docs/explanation/sitemaps/index.md | 2 -- docs/how-to/install-toolkit-plugins/index.md | 2 -- docs/how-to/nextjs-pages-router/enable-apq/index.md | 4 +--- 8 files changed, 3 insertions(+), 17 deletions(-) diff --git a/docs/explanation/get-vs-post/index.md b/docs/explanation/get-vs-post/index.md index 46621562..3c6a7719 100644 --- a/docs/explanation/get-vs-post/index.md +++ b/docs/explanation/get-vs-post/index.md @@ -3,8 +3,6 @@ title: "GET vs POST in WPGraphQL" description: "A guide on the differences between using a GET request with a query parameter versus a POST request to the /graphql endpoint." --- -## Overview - When interacting with WPGraphQL, selecting the correct HTTP method to fetch data is crucial. This guide explains the differences between using a GET request with a query parameter versus a POST request to the /graphql endpoint. ## Context @@ -13,7 +11,7 @@ WPGraphQL is a GraphQL API for WordPress, enabling flexible and efficient data q # Details -WPGraphQL supports querying data using [the endpoint](/docs/explanation/graphql-endpoints.md) in two primary ways: +WPGraphQL supports querying data using [the endpoint](/docs/explanation/graphql-endpoints/index.md) in two primary ways: * **GET Request with Query Parameter**: You can query WPGraphQL by appending your GraphQL query as a query parameter to the `/graphql` endpoint. This method is useful for simple queries or testing purposes. diff --git a/docs/explanation/graphql-endpoints/index.md b/docs/explanation/graphql-endpoints/index.md index 388b1b64..5bf82b97 100644 --- a/docs/explanation/graphql-endpoints/index.md +++ b/docs/explanation/graphql-endpoints/index.md @@ -3,7 +3,7 @@ title: "WPGraphQL Endpoints" description: "A guide on the differences between using /graphql and ?graphql WPGraphQL endpoints and how to customize them." --- -# Which WPGraphQL endpoints to use: /graphql vs ?graphql +## Which WPGraphQL endpoints to use: /graphql vs ?graphql WPGraphQL exposes a GraphQL endpoint that developers can use to interact with the WordPress backend and retrieve data. diff --git a/docs/explanation/headless-authentication/index.md b/docs/explanation/headless-authentication/index.md index d91de247..43b8df4f 100644 --- a/docs/explanation/headless-authentication/index.md +++ b/docs/explanation/headless-authentication/index.md @@ -3,8 +3,6 @@ title: "Headless Authentication" description: "A guide on the process of verifying user identity and managing access control in a decoupled architecture where the WordPress and the frontend are separate systems." --- -# What is headless authentication? - Headless authentication refers to the process of verifying user identity and managing access control in a decoupled architecture where the content management system (WordPress) and the user-facing frontend are separate systems. Unlike traditional WordPress sites where authentication happens within a single application, headless authentication must work across systems, that may be located accross different regions. ## Why authentication changes in headless architectures diff --git a/docs/explanation/rendering-options/index.md b/docs/explanation/rendering-options/index.md index d0b0600f..d8acccbb 100644 --- a/docs/explanation/rendering-options/index.md +++ b/docs/explanation/rendering-options/index.md @@ -3,8 +3,6 @@ title: "Headless WordPress Rendering Options" description: "A guide that explores the various approaches to rendering content from a headless WordPress installation, their trade-offs, and best practices." --- -## Introduction - This document explores the various approaches to rendering content from a headless WordPress installation. As a front-end developer working with headless WordPress, you'll need to make important decisions about how to handle and display WordPress content in your frontend application. This guide aims to help you understand the available options, their trade-offs, and best practices. ### 1. Rendering Raw HTML Content from WordPress Classic Editor diff --git a/docs/explanation/routing/index.md b/docs/explanation/routing/index.md index 5257f649..a0de5e93 100644 --- a/docs/explanation/routing/index.md +++ b/docs/explanation/routing/index.md @@ -3,8 +3,6 @@ title: "Routing in Headledd WordPress" description: "A guide that explores the intricacies of implementing routing in a headless WordPress setup. It covers the core challenges, possible implementations, and advanced considerations for optimizing your headless WordPress site." --- -# Routing in Headless WordPress: A Comprehensive Guide - This guide explores the intricacies of implementing routing in a headless WordPress setup. We'll cover the core challenges, possible implementations, and advanced considerations for optimizing your headless WordPress site. ## Background diff --git a/docs/explanation/sitemaps/index.md b/docs/explanation/sitemaps/index.md index cbe8cb1a..d531efdd 100644 --- a/docs/explanation/sitemaps/index.md +++ b/docs/explanation/sitemaps/index.md @@ -3,8 +3,6 @@ title: "Sitemaps in Headless WordPress" description: "A guide on sitemaps in headless WordPress. It explains the challenges, and the different implementation approaches for sitemap generation." --- -## A Comprehensive Overview - ## What is a Sitemap? A sitemap is an XML file that provides a structured list of pages on a website by helping search engines discover and crawl content more efficiently. It acts as a roadmap of your website's structure, containing important metadata about each page. Since WordPress 5.5, there's a built-in XML sitemap generator that: diff --git a/docs/how-to/install-toolkit-plugins/index.md b/docs/how-to/install-toolkit-plugins/index.md index 75849d38..6def0d6a 100644 --- a/docs/how-to/install-toolkit-plugins/index.md +++ b/docs/how-to/install-toolkit-plugins/index.md @@ -3,8 +3,6 @@ title: "Installing HWP Toolkit Plugins with Composer" description: "A guide on how to install any HWP Toolkit plugin using Composer, which is the recommended way for modern WordPress development workflows." --- -## Overview - You can install any HWP Toolkit plugin using Composer, which is the recommended way for modern WordPress development workflows. You can also install them manually from our [Releases](https://github.com/wpengine/hwptoolkit/releases) page. diff --git a/docs/how-to/nextjs-pages-router/enable-apq/index.md b/docs/how-to/nextjs-pages-router/enable-apq/index.md index a76df42d..1a1c62fc 100644 --- a/docs/how-to/nextjs-pages-router/enable-apq/index.md +++ b/docs/how-to/nextjs-pages-router/enable-apq/index.md @@ -3,8 +3,6 @@ title: "Enable Automatic Persisted Queries in Next.js Pages Router" description: "Learn how to reduce latency and network strain in GraphQL queries using Automatic Persisted Queries (APQ) by hashing and reusing query hashes." --- -## Overview - GraphQL queries can use very detailed and long queries to get the appropriate data fields. These queries can increase the latency and put strain on the network. Automatic Persisted Queries (APQ) provides an effective solution to this issue, by hashing the queries and sending the hashes for repeated queries instead of sending the full query string. To benefit APQ in your headless WordPress project both your front-end and WordPress setup should support this functionality. @@ -16,7 +14,7 @@ This guide covers how to implement APQ with Apollo Client and WPGraphQL Smart Ca > [!NOTE] > Automatic Persisted Queries only helps you to reduce your request size. This technique don't cache the response you get from the server. -## 0. Prerequisites +## Prerequisites 1. A WordPress installation with - [WPGraphQL plugin](https://wordpress.org/plugins/wp-graphql/) From d4039a8c8a612a39a370921155d9f43c77fcebde Mon Sep 17 00:00:00 2001 From: ahuseyn Date: Fri, 21 Nov 2025 10:46:53 +0100 Subject: [PATCH 3/5] prepare example readmes --- docs/explanation/index.md | 2 +- docs/how-to/index.md | 2 +- .../README.md | 4 ++-- examples/astro/previews/README.md | 4 ++-- .../next/apollo-client-data-fetch/README.md | 2 +- .../client-app-router-fetch-data/README.md | 19 +------------------ .../README.md | 19 +------------------ examples/next/custom-sitemap-apollo/README.md | 4 +--- .../README.md | 4 +--- examples/next/hybrid-sitemap-apollo/README.md | 2 +- examples/next/proxied-graphql-debug/README.md | 1 - .../next/proxied-sitemap-apollo/README.md | 2 +- .../next/render-blocks-pages-router/README.md | 2 +- .../next/wp-theme-rendered-blocks/README.md | 2 +- .../nuxt-headlesswp-gravity-forms/README.md | 2 +- .../README.md | 4 ++-- 16 files changed, 18 insertions(+), 57 deletions(-) diff --git a/docs/explanation/index.md b/docs/explanation/index.md index b231dd06..a3f34b87 100644 --- a/docs/explanation/index.md +++ b/docs/explanation/index.md @@ -5,7 +5,7 @@ description: "High-level conceptual guides that provide background information a I see you found the root of the Explanatory guides! Explanatory guides are a place where we step away from code and talk high-level concepts and import background information. If you are looking to grow your understanding of Headless WordPress with the toolkit, you are in the right place. -> [!note] Learn More +> [!NOTE] Learn More > For more info on how we layout our documentation and the the role played by Explanatory Guides, please read about the [_Diátaxis_](https://diataxis.fr/explanation/) approach we use. ## Contributing diff --git a/docs/how-to/index.md b/docs/how-to/index.md index a0923da0..498459ec 100644 --- a/docs/how-to/index.md +++ b/docs/how-to/index.md @@ -5,7 +5,7 @@ description: "Step-by-step guides for implementing specific features and achievi I see you found the root of the How-to guides! How-to guides are a place where we walk you through implementing specific features of the Headless WordPress Toolkit. If you are looking to achieve a specific goal with the toolkit, you are in the right place. -> [!note] Learn More +> [!NOTE] Learn More > For more info on how we layout our documentation and the the role played by How-to guides, please read about the [_Diátaxis_](https://diataxis.fr/how-to-guides/) approach we use. ## Contributing diff --git a/examples/angular/template-hierarchy-data-fetching/README.md b/examples/angular/template-hierarchy-data-fetching/README.md index 60d1058c..efa7fd8b 100644 --- a/examples/angular/template-hierarchy-data-fetching/README.md +++ b/examples/angular/template-hierarchy-data-fetching/README.md @@ -7,7 +7,7 @@ description: "In this example we show how to implement the **WordPress Template In this example we show how to implement the **WordPress Template Hierarchy in Angular** for use with a Headless WordPress backend using WPGraphQL. -## Getting Started 🚀 +## Getting Started > [!IMPORTANT] > **Docker Desktop** needs to be installed to run WordPress locally. @@ -24,7 +24,7 @@ In this example we show how to implement the **WordPress Template Hierarchy in A > [!NOTE] > When you kill the long running process this will not shutdown the local WP instance, only Angular. You must run `npm run example:stop` to kill the local WP server. -## Trouble Shooting 🛠️ +## Trouble Shooting 1. I get "Page Not Found. Sorry, the page you are looking for does not exist. Please check the URL." when opening the Angular app and trying to navigate through it. - Run `npm run backend:start` and verify that **http://localhost:3000/api/templates** returns correct data. diff --git a/examples/astro/previews/README.md b/examples/astro/previews/README.md index 9089f240..8ea37609 100644 --- a/examples/astro/previews/README.md +++ b/examples/astro/previews/README.md @@ -3,7 +3,7 @@ title: "Astro Headless WordPress Previews Example" description: "In this example, we show how to implement **Headless WordPress Previews in Astro** using the **`hwp-previews`** plugin and WPGraphQL. This setup allows content creators to preview draft posts directly in the Astro frontend from the WordPress admin panel. We use **URQL** for all routing and fetching page content." --- -# Astro Headless WordPress Previews Example 🚀 +# Astro Headless WordPress Previews Example In this example, we show how to implement **Headless WordPress Previews in Astro** using the **`hwp-previews`** plugin and WPGraphQL. This setup allows content creators to preview draft posts directly in the Astro frontend from the WordPress admin panel. We use **URQL** for all routing and fetching page content. @@ -25,6 +25,6 @@ In this example, we show how to implement **Headless WordPress Previews in Astro 3. Edit any draft post. 4. In the editor, click the **"Preview"** button. The post should open in the Astro frontend, displaying the draft content. -## Trouble Shooting 🛠️ +## Trouble Shooting To reset the WP server and re-run setup you can run `npm run example:prune` and confirm "Yes" at any prompts. \ No newline at end of file diff --git a/examples/next/apollo-client-data-fetch/README.md b/examples/next/apollo-client-data-fetch/README.md index fdec8683..4ec1b7db 100644 --- a/examples/next/apollo-client-data-fetch/README.md +++ b/examples/next/apollo-client-data-fetch/README.md @@ -1,5 +1,5 @@ --- -title: "Example: Fetching data from WordPress with Apollo Client in Next.js" +title: "Fetching data from WordPress with Apollo Client in Next.js" description: "This example demonstrates various approaches to integrate WordPress as a headless CMS with a Next.js frontend using Apollo Client. It showcases different data fetching strategies, state management techniques, and modern web development patterns in a real-world application context." --- diff --git a/examples/next/client-app-router-fetch-data/README.md b/examples/next/client-app-router-fetch-data/README.md index 94d3c3b0..94cbbff6 100644 --- a/examples/next/client-app-router-fetch-data/README.md +++ b/examples/next/client-app-router-fetch-data/README.md @@ -1,27 +1,10 @@ --- -title: "Example: Next.js App Router using the Fetch API" +title: "Next.js App Router using the Fetch API" description: "An example headless WordPress application using Next.js App Router and the fetch API to fetch data from WordPress using WPGraphQL It showcases different data fetching strategies, state management techniques, and modern web development patterns in a real-world application context. This also contains a full example using wp-env and sample data." --- # Example: Next.js App Router using the Fetch API -# Table of Contents - -- [Overview](#overview) - - [Prerequisites](#prerequisites) - - [Project Structure](#project-structure) - - [Features](#features) - - [Screenshots](#screenshots) - -- [Running the Example with wp-env](#running-the-example-with-wp-env) - - [Prerequisites](#prerequisites-1) - - [Setup Repository and Packages](#setup-repository-and-packages) - - [Build and Start the Application](#build-and-start-the-application) - - [Command Reference](#command-reference) - - [Database Access](#database-access) - -# Overview - An example headless WordPress application using Next.js App Router and the fetch API to fetch data from WordPress using WPGraphQL It showcases different data fetching strategies, state management techniques, and modern web development patterns in a real-world application context. This also contains a full example using wp-env and sample data. ## Prerequisites diff --git a/examples/next/client-multisite-app-router-fetch-data/README.md b/examples/next/client-multisite-app-router-fetch-data/README.md index 3d7ab8e1..a8229897 100644 --- a/examples/next/client-multisite-app-router-fetch-data/README.md +++ b/examples/next/client-multisite-app-router-fetch-data/README.md @@ -1,27 +1,10 @@ --- -title: "Example: Multisite Next.js App Router using the Fetch API" +title: "Multisite Next.js App Router using the Fetch API" description: "An example mulitsite headless WordPress application using Next.js App Router and the fetch API to fetch data from WordPress using WPGraphQL. It showcases different data fetching strategies, state management techniques, and modern web development patterns in a real-world application context. This also contains a full example using wp-env and sample data." --- # Example: Multisite Next.js App Router using the Fetch API -# Table of Contents -- [Overview](#overview) - - [Prerequisites](#prerequisites) - - [Project Structure](#project-structure) - - [Features](#features) - - [Screenshots](#screenshots) -- [Running the Example with wp-env](#running-the-example-with-wp-env) - - [Prerequisites](#prerequisites-1) - - [Setup Repository and Packages](#setup-repository-and-packages) - - [Build and Start the Application](#build-and-start-the-application) - - [Command Reference](#command-reference) - - [Database Access](#database-access) - - [Adding More Sites to the Multisite Examples](#adding-more-sites-to-the-multisite-examples) - - -# Overview - An example mulitsite headless WordPress application using Next.js App Router and the fetch API to fetch data from WordPress using WPGraphQL. It showcases different data fetching strategies, state management techniques, and modern web development patterns in a real-world application context. This also contains a full example using wp-env and sample data. ## Prerequisites diff --git a/examples/next/custom-sitemap-apollo/README.md b/examples/next/custom-sitemap-apollo/README.md index ab7af551..0eaccf07 100644 --- a/examples/next/custom-sitemap-apollo/README.md +++ b/examples/next/custom-sitemap-apollo/README.md @@ -1,12 +1,10 @@ --- -title: "Example: Create a custom WordPress sitemap with WPGraphQL and Apollo Client" +title: "Create a custom WordPress sitemap with WPGraphQL and Apollo Client" description: "This example demonstrates how to generate a custom sitemap in a headless WordPress application using the Next.js framework. The example app fetches data from WordPress using Apollo Client and WPGraphQL. Since WPGraphQL doesn't support sitemaps natively, we are extending it with a custom plugin, which is included in this example as well. This plugin exposes new fields to fetch the sitemap index, with data identical to what's rendered on the native WordPress sitemap. Another field exposed by this plugin allows you to request sitemap subpages by specifying the types and pages. The plugin also adds featured image data, enabling you to create [Image Sitemaps](https://developers.google.com/search/docs/crawling-indexing/sitemaps/image-sitemaps)." --- # Example: Create a custom WordPress sitemap with WPGraphQL and Apollo Client -## Overview - This example demonstrates how to generate a custom sitemap in a headless WordPress application using the Next.js framework. The example app fetches data from WordPress using Apollo Client and WPGraphQL. Since WPGraphQL doesn't support sitemaps natively, we are extending it with a custom plugin, which is included in this example as well. This plugin exposes new fields to fetch the sitemap index, with data identical to what's rendered on the native WordPress sitemap. Another field exposed by this plugin allows you to request sitemap subpages by specifying the types and pages. The plugin also adds featured image data, enabling you to create [Image Sitemaps](https://developers.google.com/search/docs/crawling-indexing/sitemaps/image-sitemaps). The example includes a wp-env setup, which will allow you to build and start this example quickly. With this wp-env setup, you don't need to have a separate WordPress instance or demo data to inspect the example. diff --git a/examples/next/custom-sitemap-vanilla-wpgraphql/README.md b/examples/next/custom-sitemap-vanilla-wpgraphql/README.md index 69a2cf2b..fb10b823 100644 --- a/examples/next/custom-sitemap-vanilla-wpgraphql/README.md +++ b/examples/next/custom-sitemap-vanilla-wpgraphql/README.md @@ -1,12 +1,10 @@ --- -title: "Example: Create a custom WordPress sitemap with vanilla WPGraphQL and Apollo Client" +title: "Create a custom WordPress sitemap with vanilla WPGraphQL and Apollo Client" description: "This example demonstrates how to generate a custom sitemap in a headless WordPress application using the Next.js framework. The example app fetches data from WordPress using Apollo Client and WPGraphQL. This example is using only the existing WPGraphQL endpoints, without extending it." --- # Example: Create a custom WordPress sitemap with vanilla WPGraphQL and Apollo Client -## Overview - This example demonstrates how to generate a custom sitemap in a headless WordPress application using the Next.js framework. The example app fetches data from WordPress using Apollo Client and WPGraphQL. This example is using only the existing WPGraphQL endpoints, without extending it. The example includes a wp-env setup, which will allow you to build and start this example quickly. With this wp-env setup, you don't need to have a separate WordPress instance or demo data to inspect the example. diff --git a/examples/next/hybrid-sitemap-apollo/README.md b/examples/next/hybrid-sitemap-apollo/README.md index 41189d57..9eb8ada3 100644 --- a/examples/next/hybrid-sitemap-apollo/README.md +++ b/examples/next/hybrid-sitemap-apollo/README.md @@ -4,7 +4,7 @@ description: "A Next.js application that fetches and transforms WordPress sitema --- # WordPress to Next.js Sitemap Integration -## Overview + A Next.js application that fetches and transforms WordPress sitemaps with clean URL formatting, providing a seamless integration between WordPress content and Next.js frontend. ## Features diff --git a/examples/next/proxied-graphql-debug/README.md b/examples/next/proxied-graphql-debug/README.md index 34aac87b..9098c7e2 100644 --- a/examples/next/proxied-graphql-debug/README.md +++ b/examples/next/proxied-graphql-debug/README.md @@ -5,7 +5,6 @@ description: "A debugging utility for proxied GraphQL APIs within WordPress envi # WordPress GraphQL Proxy Debugger -## Overview A debugging utility for proxied GraphQL APIs within WordPress environments, offering enhanced query inspection, request/response logging, and real-time query complexity estimation. ## Features diff --git a/examples/next/proxied-sitemap-apollo/README.md b/examples/next/proxied-sitemap-apollo/README.md index e3496692..6e01b66f 100644 --- a/examples/next/proxied-sitemap-apollo/README.md +++ b/examples/next/proxied-sitemap-apollo/README.md @@ -4,7 +4,7 @@ description: "This solution provides a proxied sitemap for a WordPress site that --- # WordPress to Next.js Sitemap Integration -## Overview + This solution provides a proxied sitemap for a WordPress site that integrates seamlessly with a Next.js frontend. The WordPress XML sitemaps are fetched, and the domain URLs within the sitemap are replaced with the frontend domain (headless site URL). These transformed sitemaps are then served via a Next.js API route, ensuring SEO-friendly URLs that point to your frontend domain. diff --git a/examples/next/render-blocks-pages-router/README.md b/examples/next/render-blocks-pages-router/README.md index b0bb06e7..68599fa1 100644 --- a/examples/next/render-blocks-pages-router/README.md +++ b/examples/next/render-blocks-pages-router/README.md @@ -1,5 +1,5 @@ --- -title: "Example: Rendering WordPress Blocks in Next.js" +title: "Rendering WordPress Blocks in Next.js" description: "This example demonstrates rendering WordPress Blocks with JSX in a Next.js project. The example includes 16 block components across various categories. Example includes a utility to convert flat blocks data from GraphQL (GQL) response into the hierarchical data structure. Passing this data into BlockRenderer component generates the WordPress content by matching the appropriate blocks and using a default block when block implementation is missing. Default block is also customizable component. Example also gives an option to provide custom HTML parser to render HTML content." --- diff --git a/examples/next/wp-theme-rendered-blocks/README.md b/examples/next/wp-theme-rendered-blocks/README.md index 72122732..b0debe71 100644 --- a/examples/next/wp-theme-rendered-blocks/README.md +++ b/examples/next/wp-theme-rendered-blocks/README.md @@ -1,5 +1,5 @@ --- -title: "Example: WordPress Global Styles in Next.js" +title: "WordPress Global Styles in Next.js" description: "This example demonstrates how to **fetch and apply WordPress Global Styles** in a Next.js project using the `globalStylesheet` GraphQL field. These styles reflect your active theme’s typography, spacing, colors, and layout rules — ensuring that your frontend matches the WordPress editor and theme design." --- diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/README.md b/examples/nuxt/nuxt-headlesswp-gravity-forms/README.md index 80f26229..48bb9ac7 100644 --- a/examples/nuxt/nuxt-headlesswp-gravity-forms/README.md +++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/README.md @@ -1,5 +1,5 @@ --- -title: "Example: Gravity Forms in Headless WordPress with Nuxt/Vue" +title: "Gravity Forms in Headless WordPress with Nuxt/Vue" description: "This example shows you how to wire up a full headless WordPress backend—complete with Gravity Forms, WPGraphQL, and a pre-built \"Questionnaire\" form—alongside a Nuxt 3 front end that dynamically renders your forms using the GraphQL interfaces feature of WPGraphQL for Gravity Forms." --- diff --git a/examples/sveltekit/template-hierarchy-data-fetching-urql/README.md b/examples/sveltekit/template-hierarchy-data-fetching-urql/README.md index 5fc0c9fc..760cd39f 100644 --- a/examples/sveltekit/template-hierarchy-data-fetching-urql/README.md +++ b/examples/sveltekit/template-hierarchy-data-fetching-urql/README.md @@ -3,7 +3,7 @@ title: "SvelteKit Template Hierarchy and Data fetching w/URQL Example" description: "In this example we show how to implement the **WordPress Template Hierarchy in SvelteKit** for use with a Headless WordPress backend using WPGraphQL. We use **URQL** for all routing and fetching page content." --- -# SvelteKit Template Hierarchy and Data fetching w/URQL Example 🚀 +# SvelteKit Template Hierarchy and Data fetching w/URQL Example In this example we show how to implement the **WordPress Template Hierarchy in SvelteKit** for use with a Headless WordPress backend using WPGraphQL. We use **URQL** for all routing and fetching page content. @@ -18,6 +18,6 @@ In this example we show how to implement the **WordPress Template Hierarchy in S > [!NOTE] > When you kill the long running process this will not shutdown the local WP instance, only SvelteKit. You must run `npm run example:stop` to kill the local WP server. -## Trouble Shooting 🛠️ +## Trouble Shooting To reset the WP server and re-run setup you can run `npm run example:prune` and confirm "Yes" at any prompts. \ No newline at end of file From 0bf5ec2bb98a0b11e3a43fd8f61dac6741113c0b Mon Sep 17 00:00:00 2001 From: ahuseyn Date: Fri, 21 Nov 2025 11:11:35 +0100 Subject: [PATCH 4/5] update example titles --- examples/angular/template-hierarchy-data-fetching/README.md | 2 +- examples/astro/previews/README.md | 2 +- examples/astro/template-hierarchy-data-fetching-urql/README.md | 2 +- examples/next/apollo-authentication/README.md | 2 +- examples/next/apollo-client-data-fetch/README.md | 2 +- examples/next/apollo-client-filesystem-routing/README.md | 2 +- examples/next/client-app-router-fetch-data/README.md | 2 +- examples/next/client-multisite-app-router-fetch-data/README.md | 2 +- examples/next/custom-sitemap-apollo/README.md | 2 +- examples/next/custom-sitemap-vanilla-wpgraphql/README.md | 2 +- examples/next/hybrid-sitemap-apollo/README.md | 2 +- examples/next/proxied-graphql-debug/README.md | 2 +- examples/next/proxied-sitemap-apollo/README.md | 2 +- examples/next/render-blocks-pages-router/README.md | 2 +- examples/next/template-hierarchy/README.md | 2 +- examples/next/wp-theme-rendered-blocks/README.md | 2 +- examples/nuxt/nuxt-headlesswp-gravity-forms/README.md | 2 +- examples/nuxt/template-hierarchy-data-fetching/README.md | 2 +- .../sveltekit/template-hierarchy-data-fetching-urql/README.md | 2 +- 19 files changed, 19 insertions(+), 19 deletions(-) diff --git a/examples/angular/template-hierarchy-data-fetching/README.md b/examples/angular/template-hierarchy-data-fetching/README.md index efa7fd8b..85636c2f 100644 --- a/examples/angular/template-hierarchy-data-fetching/README.md +++ b/examples/angular/template-hierarchy-data-fetching/README.md @@ -1,5 +1,5 @@ --- -title: "Angular Template Hierarchy and Data fetching Example" +title: "Angular Template Hierarchy and Data Fetching" description: "In this example we show how to implement the **WordPress Template Hierarchy in Angular** for use with a Headless WordPress backend using WPGraphQL." --- diff --git a/examples/astro/previews/README.md b/examples/astro/previews/README.md index 8ea37609..c915e75f 100644 --- a/examples/astro/previews/README.md +++ b/examples/astro/previews/README.md @@ -1,5 +1,5 @@ --- -title: "Astro Headless WordPress Previews Example" +title: "Astro Headless WordPress Previews" description: "In this example, we show how to implement **Headless WordPress Previews in Astro** using the **`hwp-previews`** plugin and WPGraphQL. This setup allows content creators to preview draft posts directly in the Astro frontend from the WordPress admin panel. We use **URQL** for all routing and fetching page content." --- diff --git a/examples/astro/template-hierarchy-data-fetching-urql/README.md b/examples/astro/template-hierarchy-data-fetching-urql/README.md index 221380d4..9f01c09c 100644 --- a/examples/astro/template-hierarchy-data-fetching-urql/README.md +++ b/examples/astro/template-hierarchy-data-fetching-urql/README.md @@ -1,5 +1,5 @@ --- -title: "Astro Template HIerarchy and Data fetching w/URQL Example" +title: "Astro Template Hierarchy with URQL" description: "In this example we show how to implement the WP Template Hierarchy in Astro for use with a Headless WordPress backend using WPGraphQL. We use URQL for all routing and fetching page content." --- diff --git a/examples/next/apollo-authentication/README.md b/examples/next/apollo-authentication/README.md index 4275f580..2a388697 100644 --- a/examples/next/apollo-authentication/README.md +++ b/examples/next/apollo-authentication/README.md @@ -1,5 +1,5 @@ --- -title: "Next.js pages Apollo Authentication" +title: "Next.js Authentication with Apollo Client" description: "This example demonstrates authentication with username and password in a headless WordPress setup, running Next.js as a frontend framework. Example is using WPGraphQL and WPGraphQL Headless Login plugins to enable authentication features." --- diff --git a/examples/next/apollo-client-data-fetch/README.md b/examples/next/apollo-client-data-fetch/README.md index 4ec1b7db..d33a6245 100644 --- a/examples/next/apollo-client-data-fetch/README.md +++ b/examples/next/apollo-client-data-fetch/README.md @@ -1,5 +1,5 @@ --- -title: "Fetching data from WordPress with Apollo Client in Next.js" +title: "Next.js Data Fetching with Apollo Client" description: "This example demonstrates various approaches to integrate WordPress as a headless CMS with a Next.js frontend using Apollo Client. It showcases different data fetching strategies, state management techniques, and modern web development patterns in a real-world application context." --- diff --git a/examples/next/apollo-client-filesystem-routing/README.md b/examples/next/apollo-client-filesystem-routing/README.md index d21f1f89..11be5056 100644 --- a/examples/next/apollo-client-filesystem-routing/README.md +++ b/examples/next/apollo-client-filesystem-routing/README.md @@ -1,5 +1,5 @@ --- -title: "Next.js + WPGraphQL Headless CMS" +title: "Next.js Filesystem Routing with Apollo Client" description: "This is a Next.js project integrated with **WPGraphQL** and **WPGraphQL for ACF** to build a headless WordPress-powered site." --- diff --git a/examples/next/client-app-router-fetch-data/README.md b/examples/next/client-app-router-fetch-data/README.md index 94cbbff6..27edb661 100644 --- a/examples/next/client-app-router-fetch-data/README.md +++ b/examples/next/client-app-router-fetch-data/README.md @@ -1,5 +1,5 @@ --- -title: "Next.js App Router using the Fetch API" +title: "Next.js App Router with Fetch API" description: "An example headless WordPress application using Next.js App Router and the fetch API to fetch data from WordPress using WPGraphQL It showcases different data fetching strategies, state management techniques, and modern web development patterns in a real-world application context. This also contains a full example using wp-env and sample data." --- diff --git a/examples/next/client-multisite-app-router-fetch-data/README.md b/examples/next/client-multisite-app-router-fetch-data/README.md index a8229897..4ab989d0 100644 --- a/examples/next/client-multisite-app-router-fetch-data/README.md +++ b/examples/next/client-multisite-app-router-fetch-data/README.md @@ -1,5 +1,5 @@ --- -title: "Multisite Next.js App Router using the Fetch API" +title: "Next.js Multisite App Router with Fetch API" description: "An example mulitsite headless WordPress application using Next.js App Router and the fetch API to fetch data from WordPress using WPGraphQL. It showcases different data fetching strategies, state management techniques, and modern web development patterns in a real-world application context. This also contains a full example using wp-env and sample data." --- diff --git a/examples/next/custom-sitemap-apollo/README.md b/examples/next/custom-sitemap-apollo/README.md index 0eaccf07..615ada2a 100644 --- a/examples/next/custom-sitemap-apollo/README.md +++ b/examples/next/custom-sitemap-apollo/README.md @@ -1,5 +1,5 @@ --- -title: "Create a custom WordPress sitemap with WPGraphQL and Apollo Client" +title: "Next.js Custom Sitemap with Apollo Client" description: "This example demonstrates how to generate a custom sitemap in a headless WordPress application using the Next.js framework. The example app fetches data from WordPress using Apollo Client and WPGraphQL. Since WPGraphQL doesn't support sitemaps natively, we are extending it with a custom plugin, which is included in this example as well. This plugin exposes new fields to fetch the sitemap index, with data identical to what's rendered on the native WordPress sitemap. Another field exposed by this plugin allows you to request sitemap subpages by specifying the types and pages. The plugin also adds featured image data, enabling you to create [Image Sitemaps](https://developers.google.com/search/docs/crawling-indexing/sitemaps/image-sitemaps)." --- diff --git a/examples/next/custom-sitemap-vanilla-wpgraphql/README.md b/examples/next/custom-sitemap-vanilla-wpgraphql/README.md index fb10b823..1d19322f 100644 --- a/examples/next/custom-sitemap-vanilla-wpgraphql/README.md +++ b/examples/next/custom-sitemap-vanilla-wpgraphql/README.md @@ -1,5 +1,5 @@ --- -title: "Create a custom WordPress sitemap with vanilla WPGraphQL and Apollo Client" +title: "Next.js Custom Sitemap with Vanilla WPGraphQL" description: "This example demonstrates how to generate a custom sitemap in a headless WordPress application using the Next.js framework. The example app fetches data from WordPress using Apollo Client and WPGraphQL. This example is using only the existing WPGraphQL endpoints, without extending it." --- diff --git a/examples/next/hybrid-sitemap-apollo/README.md b/examples/next/hybrid-sitemap-apollo/README.md index 9eb8ada3..77dea2fb 100644 --- a/examples/next/hybrid-sitemap-apollo/README.md +++ b/examples/next/hybrid-sitemap-apollo/README.md @@ -1,5 +1,5 @@ --- -title: "WordPress to Next.js Sitemap Integration" +title: "Next.js Hybrid Sitemap Integration" description: "A Next.js application that fetches and transforms WordPress sitemaps with clean URL formatting, providing a seamless integration between WordPress content and Next.js frontend." --- diff --git a/examples/next/proxied-graphql-debug/README.md b/examples/next/proxied-graphql-debug/README.md index 9098c7e2..828cb1b8 100644 --- a/examples/next/proxied-graphql-debug/README.md +++ b/examples/next/proxied-graphql-debug/README.md @@ -1,5 +1,5 @@ --- -title: "WordPress GraphQL Proxy Debugger" +title: "Next.js GraphQL Proxy Debugger" description: "A debugging utility for proxied GraphQL APIs within WordPress environments, offering enhanced query inspection, request/response logging, and real-time query complexity estimation." --- diff --git a/examples/next/proxied-sitemap-apollo/README.md b/examples/next/proxied-sitemap-apollo/README.md index 6e01b66f..9bc11a6f 100644 --- a/examples/next/proxied-sitemap-apollo/README.md +++ b/examples/next/proxied-sitemap-apollo/README.md @@ -1,5 +1,5 @@ --- -title: "WordPress to Next.js Sitemap Integration" +title: "Next.js Proxied Sitemap with Apollo Client" description: "This solution provides a proxied sitemap for a WordPress site that integrates seamlessly with a Next.js frontend. The WordPress XML sitemaps are fetched, and the domain URLs within the sitemap are replaced with the frontend domain (headless site URL). These transformed sitemaps are then served via a Next.js API route, ensuring SEO-friendly URLs that point to your frontend domain." --- diff --git a/examples/next/render-blocks-pages-router/README.md b/examples/next/render-blocks-pages-router/README.md index 68599fa1..8f3ae680 100644 --- a/examples/next/render-blocks-pages-router/README.md +++ b/examples/next/render-blocks-pages-router/README.md @@ -1,5 +1,5 @@ --- -title: "Rendering WordPress Blocks in Next.js" +title: "Next.js Rendering WordPress Blocks" description: "This example demonstrates rendering WordPress Blocks with JSX in a Next.js project. The example includes 16 block components across various categories. Example includes a utility to convert flat blocks data from GraphQL (GQL) response into the hierarchical data structure. Passing this data into BlockRenderer component generates the WordPress content by matching the appropriate blocks and using a default block when block implementation is missing. Default block is also customizable component. Example also gives an option to provide custom HTML parser to render HTML content." --- diff --git a/examples/next/template-hierarchy/README.md b/examples/next/template-hierarchy/README.md index ce25e252..ce5a774b 100644 --- a/examples/next/template-hierarchy/README.md +++ b/examples/next/template-hierarchy/README.md @@ -1,5 +1,5 @@ --- -title: "Next.js Template Hierarchy and Data fetching w/URQL Example" +title: "Next.js Template Hierarchy with URQL" description: "In this example we show how to implement the WP Template Hierarchy in Next.js for use with a headless WordPress backend using WPGraphQL. We use URQL for all routing and fetching page content." --- diff --git a/examples/next/wp-theme-rendered-blocks/README.md b/examples/next/wp-theme-rendered-blocks/README.md index b0debe71..c29765d0 100644 --- a/examples/next/wp-theme-rendered-blocks/README.md +++ b/examples/next/wp-theme-rendered-blocks/README.md @@ -1,5 +1,5 @@ --- -title: "WordPress Global Styles in Next.js" +title: "Next.js WordPress Global Styles" description: "This example demonstrates how to **fetch and apply WordPress Global Styles** in a Next.js project using the `globalStylesheet` GraphQL field. These styles reflect your active theme’s typography, spacing, colors, and layout rules — ensuring that your frontend matches the WordPress editor and theme design." --- diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/README.md b/examples/nuxt/nuxt-headlesswp-gravity-forms/README.md index 48bb9ac7..fa886ab1 100644 --- a/examples/nuxt/nuxt-headlesswp-gravity-forms/README.md +++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/README.md @@ -1,5 +1,5 @@ --- -title: "Gravity Forms in Headless WordPress with Nuxt/Vue" +title: "Nuxt Gravity Forms Integration" description: "This example shows you how to wire up a full headless WordPress backend—complete with Gravity Forms, WPGraphQL, and a pre-built \"Questionnaire\" form—alongside a Nuxt 3 front end that dynamically renders your forms using the GraphQL interfaces feature of WPGraphQL for Gravity Forms." --- diff --git a/examples/nuxt/template-hierarchy-data-fetching/README.md b/examples/nuxt/template-hierarchy-data-fetching/README.md index 0d647472..0a7d74c8 100644 --- a/examples/nuxt/template-hierarchy-data-fetching/README.md +++ b/examples/nuxt/template-hierarchy-data-fetching/README.md @@ -1,5 +1,5 @@ --- -title: "Nuxt Data fetching" +title: "Nuxt Template Hierarchy and Data Fetching" description: "In this example we show how to implement the WP Template Hierarchy and Data Fetching in Nuxt for use with a Headless WordPress backend using WPGraphQL." --- diff --git a/examples/sveltekit/template-hierarchy-data-fetching-urql/README.md b/examples/sveltekit/template-hierarchy-data-fetching-urql/README.md index 760cd39f..48d071e0 100644 --- a/examples/sveltekit/template-hierarchy-data-fetching-urql/README.md +++ b/examples/sveltekit/template-hierarchy-data-fetching-urql/README.md @@ -1,5 +1,5 @@ --- -title: "SvelteKit Template Hierarchy and Data fetching w/URQL Example" +title: "SvelteKit Template Hierarchy with URQL" description: "In this example we show how to implement the **WordPress Template Hierarchy in SvelteKit** for use with a Headless WordPress backend using WPGraphQL. We use **URQL** for all routing and fetching page content." --- From 99a8a3a0d4e1b3d4969af45d8cd132809c343e0f Mon Sep 17 00:00:00 2001 From: ahuseyn Date: Fri, 21 Nov 2025 12:01:04 +0100 Subject: [PATCH 5/5] fix index title --- docs/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/index.md b/docs/index.md index 922c7ae8..9637e2f1 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,5 +1,5 @@ --- -title: "Overview" +title: "Headless WordPress Toolkit" description: "A modern, framework-agnostic collection of plugins and packages for building headless WordPress applications." ---