Wolf Store — WordPress Plugin

A modern WordPress theme store plugin built with a clean OOP PHP architecture and a React frontend powered by the WP REST API.

⚠️ This project is currently in active development and serves as both a functional plugin and a portfolio piece demonstrating modern WordPress + React development practices.

Staging Website

Tech Stack

Architecture

The plugin follows a strict separation of concerns, inspired by WooCommerce's architecture.

wolf-store/
├── Functions/
│   ├── Admin/           # Admin UI: metaboxes, settings panel, columns
│   ├── Config/          # Pure configuration classes (metaboxes, options, taxonomies)
│   ├── Core/            # Plugin bootstrap, REST fields, meta resolution, utilities
│   ├── Frontend/        # Template loading, asset enqueuing, hooks
│   ├── Post_Types/      # Custom post type registration
│   └── Taxonomies/      # Custom taxonomy registration
├── src/
│   ├── scripts/
│   │   ├── plugin.js            # JS entry point
│   │   ├── config/
│   │   │   └── offers.js        # Centralized coupon/offer config
│   │   └── components/          # React components
│   │       ├── Archive.jsx           # Theme grid with filtering
│   │       ├── Single.jsx            # Single theme page (composes all sections)
│   │       ├── ThemeCard.jsx         # Archive card with category badge + builder label
│   │       ├── ThemeHero.jsx
│   │       ├── ThemeDescription.jsx
│   │       ├── ThemeStats.jsx        # Animated count-up stats
│   │       ├── ThemeFeatures.jsx     # Key benefits / target audience columns
│   │       ├── ThemeBenefits.jsx
│   │       ├── ThemeBrandStory.jsx
│   │       ├── ThemeCTAs.jsx
│   │       ├── ThemeComparisonTable.jsx  # WolfThemes vs ThemeForest pricing
│   │       ├── ThemePriceBox.jsx
│   │       ├── ThemeGallery.jsx      # Fancybox-powered lightbox gallery
│   │       ├── ThemeChangelog.jsx
│   │       ├── ThemeTechnicals.jsx
│   │       ├── ThemeTestimonials.jsx
│   │       ├── Sidebar.jsx           # Archive taxonomy filters
│   │       ├── SearchBar.jsx
│   │       ├── RelatedThemes.jsx
│   │       ├── StickyCTA.jsx
│   │       ├── CountdownTimer.jsx
│   │       ├── Pagination.jsx
│   │       ├── SkeletonCard.jsx      # Loading skeleton for archive
│   │       ├── SkeletonSingle.jsx    # Loading skeleton for single view
│   │       ├── ErrorBoundary.jsx
│   │       └── hooks/               # useThemes, useTheme, useTerms
│   └── styles/
│       ├── _tokens.scss         # Design tokens (spacing, colors, typography)
│       ├── main.scss            # SCSS entry — imports all partials
│       ├── components/          # Per-component SCSS partials (BEM)
│       └── vendor/              # Third-party SCSS overrides (Fancybox)
├── templates/           # PHP templates (theme-overridable)
│   ├── archive-wolf_theme.php
│   └── single-wolf_theme.php
├── build/               # Compiled assets — gitignored, built by CI
└── wolf-store.php       # Plugin entry point

Key Patterns

Singleton + global helper — wolf_store() returns the main plugin instance, following WooCommerce's WC() pattern.

Config/Handler separation — configuration is isolated in Config/ classes (plain arrays, no side effects). Handlers read from config and wire up WordPress hooks.

Meta resolution chain (Functions/Core/Meta.php) — theme metadata is resolved in priority order: post meta override → derived slug → remote JSON (changelog.wolfthemes.cloud / assets.wolfthemes.cloud), cached 1 hour via WordPress transients.

Template hierarchy — templates follow WordPress's override convention. A theme can override any template by placing a file in wp-content/themes/your-theme/wolf-store/.

React island — PHP templates render a single <div id="wolf-store-root"> mount point. React takes over from there, fetching data via the WP REST API. The WordPress theme (header, footer, navigation) remains in PHP.

Features

• Custom post type wolf_theme with category and tag taxonomies
• Admin metabox manager with configurable field types (text, URL, select, repeatable, datepicker)
• Settings page with tabbed UI and field dependency support
• Template loader with theme override support
• React archive with sidebar filtering, search bar, and pagination
• React single theme view with hero, gallery, stats, features, comparison table, changelog, testimonials, brand story, and CTA sections
• Fancybox lightbox gallery integration
• Theme cards show category badge and page builder label
• Loading skeletons for archive and single views
• Error boundary for graceful React error recovery
• Sticky CTA bar on single theme pages
• Related themes section on single theme pages
• Countdown timer component for limited-time offers
• Animated count-up stats on scroll (IntersectionObserver + requestAnimationFrame)
• Centralized offer/coupon system — one file to enable, disable, or swap promotions (src/scripts/config/offers.js)
• --ws-* CSS custom property system for consistent spacing, color, and typography tokens
• REST API fields sourced from remote theme_meta.json: features, key benefits, selling points, target audience, use cases, included plugins, design features, testimonials, pricing
• Schema.org Product microdata

Development Setup

Requirements

• PHP 8.1+
• Node.js 20+
• Composer
• A local WordPress install (tested with LocalWP / Docker)

Install

composer install
npm install

Build

# Development — watch + BrowserSync (proxies http://localhost:8080/)
npm run start

# Production build
npm run build

Linting

npm run lint:php    # WordPress + VIP standards
npm run format:php  # Auto-fix PHP
npm run lint:js
npm run lint:css
npm run type-check  # TypeScript (no emit)

Deployment

Automated via GitHub Actions (.github/workflows/deploy.yml):

• Push to master → deploys to production
• Push to dev → deploys to staging

The workflow runs npm ci && npm run build, rsyncs the build/ output to the server, then SSHs in to run git pull + composer install. The build/ directory is gitignored — the server never needs Node.

Secrets required: SSH_HOST, SSH_USER, SSH_PRIVATE_KEY, SSH_PORT.

REST API

GET /wp-json/wp/v2/wolf_theme?per_page=12&page=1&_embed

Data passed from PHP to React via wp_localize_script as window.wolfStoreData:

window.wolfStoreData = {
    restUrl:    '/wp-json/wp/v2/wolf_theme',
    restNonce:  '...',
    perPage:    12,
    pagination: 'numbers',
    siteUrl:    'https://example.com',
}

Status

Roadmap

• Multi-select taxonomy filter — allow visitors to filter by multiple categories/tags simultaneously in the archive sidebar
• Search bar — keyword search across theme name, taxonomy, and metadata directly in the archive
• Related themes — display similar themes by category at the bottom of single theme pages
• Entrance animations — scroll-triggered reveal animations on key sections and UI elements
• Performance — REST response caching, lazy loading optimisations, bundle size audit
• PHP unit test coverage — expand test suite to cover the Meta resolution chain and REST field registration
• Theme card carousel layout — add a carousel as an optional layout mode for the archive grid, alongside the current masonry/grid view
• Cleanup — remove unused npm packages, delete commented-out code, prune unused PHP functions and dead config entries

Author

Constantin Saguin — WordPress developer with a focus on modern, maintainable plugin architecture and React-powered frontend experiences.

• Looking for new opportunities — open to freelance and full-time roles.