Technical details

Superfunky Theme – Technical Specification

Overview

Superfunky is a headless WordPress + Gatsby WooCommerce theme designed for high-performance e-commerce. It utilizes a WordPress backend with a strict set of plugin versions and a Gatsby frontend with a predefined development workflow.

Backend (WordPress) Requirements

A running WordPress instance with Woo extension activated. We recommend secure and scalable hosting services like AWS or GCP for the backend instance, it will also need a separate domain or subdomain and SSL certificate.

Must-Have Plugins (Exact Versions Required)

• Advanced Custom Fields – Version 6.3.12 (ACF for custom fields management)
• Headless Mods – Version 1.0 (Custom plugin for headless modifications)
• WooCommerce – Version 9.6.1 (E-commerce functionality)
• WooCommerce Stripe Gateway – Version 9.1.1 (Stripe payment gateway)
• WP Gatsby – Version 2.3.3 (Integration with Gatsby frontend)
• WPGraphQL – Version 1.32.1 (GraphQL API for WordPress)
• WPGraphQL for ACF – Version 2.4.1 (GraphQL support for ACF fields)
• JWT Authentication for WPGraphQL – Version 0.7.0 (JWT-based authentication for GraphQL queries)
• WPGraphQL WooCommerce (WooGraphQL) – Version 0.15.0 (WooCommerce GraphQL integration)

Recommended Plugins (Optional)

• WPGraphQL CORS – Version 2.1 – For advanced CORS management & security layer
• WPGraphQL Smart Cache – Version 1.3.3 – Optimized GraphQL caching for top performance
• Woo Image SEO – Version 1.4.7 Image SEO enhancements
• Rank Math / Yoast (coming soon) SEO management
• Rank Math / Yoast for GraphQL – GraphQL compatibility for SEO plugin
  • not included with purchase requires extra modification
• Polylang – Multilingual support
  • + Polylang for WooCommerce (extra paid)
  • + PolylangGraphQL (integration available on the custom mods plan)
• Mailgun (latest version) – SMTP and email autoresponders for Woo

Configuration & Considerations

• Plugin Updates: Exact versions must be maintained for seamless integration.
• ACF JSON Schema Import: Required for theme options and extra variables.
• Stripe Account & Keys: Necessary for payment processing.
• CI/CD: Deploys via Netlify with GitHub integrations.
• .env Configuration: Required for API keys and credentials.
• One-Click Deploy: GitHub-based deployment button.

Frontend (Gatsby) Requirements

Development Setup

• gatsby-cli (For managing Gatsby commands)
• node.js (>=20.12.2)
  • nvm recommended for the exact version
• Code editor
  • VSCode recommended
• FTP/SSH Client
  • For backend development access and configuration

Dependencies (From package.json)

Core Libraries

• Gatsby (^5.0.0)
• React (^18.2.0)
• React-DOM (^18.2.0)
• GraphQL (^16.8.1) (WPGraphQL integration)

UI & Styling

• Tailwind CSS (^3.4.17) (Utility-first CSS framework under migration to v4)
• @fontsource/dm-mono (^4.5.9) & @fontsource/dm-sans (^4.5.8) (Typography)
• React-Feather (^2.0.9) (Feather icons for UI components)
• swiper: (^11.2.4) (Carousel support)

Note: Other plugins from utilities category are not listed due to security concerns, the details are available after purchase.

Development Tools

• Prettier (^2.5.1) (Code formatting)
• Husky (^7.0.4) (Git hooks)
• Lint-Staged (^12.3.5) (Linting pre-commit)

Deployment & Build Process

Scripts

• start / develop / dev – Runs Gatsby development server
• build – Builds static files for production
• serve – Serves built files locally
• clean – Clears Gatsby cache

Hosting

• Netlify (CI/CD, free tier available)
• GitHub Integration (Automatic deployments via GitHub push)
• .env Configuration (Environment variables for API keys, authentication, etc.)

Summary

Superfunky is a headless WordPress theme with a Gatsby frontend, leveraging WPGraphQL for data fetching and WooCommerce for e-commerce. It follows strict plugin versioning for stability, utilizes Tailwind CSS for styling, and integrates Stripe for payments. The theme supports multilingual setups with Polylang and is optimized for performance using Netlify CI/CD. The frontend is built with Gatsby, React, and Apollo Client, while the backend is managed with WordPress and WPGraphQL.

For further setup instructions, refer to the official documentation.