IMPORTANT: the REST wordpress API only works if you enable postname in permalinks Minimum version 6.8 with yoast installed and rest API enabled to expose the menu rest api: add add_filter( 'rest_menu_read_access', '__return_true' ); to functions.php (see https://make.wordpress.org/core/2025/03/27/new-rest-api-filter-for-exposing-menus-publicly-in-wordpress-6-8/)

WordPress Headless Wrapper - Refactored

A refactored WordPress headless wrapper that provides a clean, modular architecture for building headless WordPress applications with Tailwind CSS support.

Running Tests

npm test

🔧 Services

WordPressAPIService

Handles all WordPress API interactions:

• getContent(slug) - Fetch page/post content
• getPosts(page, perPage) - Fetch paginated posts
• searchContent(query, page) - Search content
• getMenu(slug) - Fetch menu items
• getArchive(type, slug, page) - Fetch archive data

TailwindService

Manages Tailwind CSS compilation:

• initialize() - Setup Tailwind compiler
• compileCSS() - Compile CSS from templates
• getCSS() - Get compiled CSS
• getStatus() - Get compilation status

TemplateService

Handles template rendering:

• renderTemplate(name, data) - Render template with data
• loadPartials(html) - Load and insert partials
• replaceTags(html, data) - Replace template tags

CacheService

Manages response caching:

• set(key, data) - Cache data
• get(key) - Retrieve cached data
• has(key) - Check if data exists
• cleanup() - Remove expired entries

🛣️ Route Handlers

The RouteHandlers class contains all route-specific logic:

• handlePage() - Handle page/post requests
• handleSearch() - Handle search requests
• handleArchive() - Handle archive requests
• handleTailwindCompile() - Handle CSS compilation
• handleAPIRequest() - Handle API requests

🔌 Middleware

The Middleware class provides Express middleware:

• setupSecurity() - Helmet security middleware
• setupCORS() - CORS middleware
• setupCache() - Cache middleware
• setupTailwindCSS() - CSS serving middleware

🚀 Usage

import { WordPressHeadlessWrapper } from "./src/wordpress-headless-wrapper";

const wrapper = new WordPressHeadlessWrapper({
  wpBaseUrl: "https://your-wordpress-site.com",
  templatesDir: "./templates",
  port: 3000,
  tailwind: {
    enabled: true,
    configPath: "./tailwind.config.js",
    inputPath: "./src/styles/input.css",
    outputPath: "./public/styles/main.css",
  },
});

wrapper.start();