Client Wp Kit | WordPress Theme

High-performance WordPress Theme powered by Tailwind CSS v4 and Vite

Quick demo: https://demo.client.studio (PageSpeed 100/100)

🚀 Quick Start

# Install dependencies
npm install

# Development mode (watches for changes)
npm run dev
# or
npm run watch

# Production build
npm run build

⚡ Features

• Vite Build System - Lightning fast builds (no dev server)
• Tailwind CSS v4 - Latest version with CSS-based configuration
• Modular Content Blocks - Clean template architecture (/template-parts/)
• Static Compilation System - Pre-renders ACF modules to static HTML for blazing fast performance
• Module Self-Declaration - Each module controls its own render strategy (static vs dynamic)
• Optimized Asset Loading - Manifest-based cache busting for CSS/JS

📁 Project Structure

client/
├── resources/          # Source files
│   ├── css/            # Tailwind CSS files
│   └── js/             # JavaScript files
├── build/              # Compiled assets (git-ignored)
│   ├── assets/         # Hashed CSS/JS from Vite
│   └── .vite/manifest.json
├── template-parts/     # Modular content blocks
├── vite.config.mjs     # Vite configuration
└── tailwind.config.js  # Tailwind configuration

ACF Modules: naming and rendering

• Field: Flexible Content field named modules
• File naming: each layout's slug maps to template-parts/module-<slug>.php
  • Examples: text → template-parts/module-text.php, columns → template-parts/module-columns.php
• Render in templates: call client_modules() where you want modules to appear.
  • Uses compiled HTML in production; auto-falls back to live rendering for preview/missing cache.

🛠 Development Workflow

1. Run development mode: npm run dev - Vite watch (no dev server)
2. Edit your files: Changes in /resources are automatically compiled to /build
3. View in browser: Use your WordPress/Local site URL
4. Build for production: npm run build - Creates optimized, hashed assets

🎨 Customizing Colors

Edit the theme colors in resources/css/app.css:

@theme {
  --color-primary: #2563eb;
  --color-secondary: #64748b;
  --color-accent: #f59e0b;
  /* Add more custom colors */
}

Requirements

ACF PRO: Modular content blocks are created with ACF Flexible Fields that makes content blocks easy to edit, move and copy.

📦 NPM Scripts

Command	Description
npm install	Install all dependencies
npm run dev	Start development mode with file watching
npm run watch	Alias for npm run dev
npm run build	Build optimized assets for production
npm run production	Alias for production build

🔧 Configuration Files

• vite.config.mjs - Vite build configuration (emits .vite/manifest.json)
• tailwind.config.js - Tailwind CSS configuration
• postcss.config.js - PostCSS plugins configuration
• resources/css/app.css - Main CSS entry with Tailwind directives
• resources/css/global.css - Custom styles and components

⚠️ Important Notes

• Build Output: Assets compile to /build folder (not /dist)
• No Dev Server: Vite runs as a build tool only - WordPress serves the site
• Cache Busting: CSS/JS use manifest-based hashed filenames. PHP reads build/.vite/manifest.json (fallback build/manifest.json) to enqueue correct URLs.
• Custom Classes: Add all custom CSS to resources/css/global.css
• Local Rendering Override: On local/dev, static compilation is disabled by default (modules render live). Append ?live=1 to any URL to force compiled rendering for testing. Use ?live=0 to force live. Legacy params still supported: client_compiled=1, client_live=1.

🚀 Static Compilation System

This theme includes an advanced static compilation system that pre-renders ACF modules to static HTML on save, dramatically improving frontend performance.

How It Works

1. On Save: ACF modules are analyzed and compiled to static HTML
2. Static Modules: Rendered once and cached (text, columns, CTA, logos, FAQ, features)
3. Dynamic Modules: Always render fresh (blog posts, forms with tokens)
4. Module Self-Declaration: Each module declares its render type in PHP

Developer Guide (Simplified)

Helper Functions

Two simple helpers make module development cleaner:

// Context-aware field getter (replaces get_sub_field)
$text = client_field('title', 'Default Title');

// Safe content output (replaces wp_kses_post + echo)
echo client_content($text);

Static Module (Default)

<?php if (!empty($GLOBALS['CLIENT_COMPILE_PROBE'])) return; ?>

<?php
$title = client_field('title');
$content = client_field('content');
?>

<div class="module-text">
    <h2><?php echo client_content($title, 'esc_html'); ?></h2>
    <div><?php echo client_content($content); ?></div>
</div>

Dynamic Module

<?php if (function_exists('client_dynamic') && client_dynamic(['title', 'posts'])) return; ?>

<?php
$title = client_field('title');
$posts = client_field('posts', 3);
?>

<div class="module-blog">
    <h2><?php echo client_content($title, 'esc_html'); ?></h2>
    <!-- Dynamic content like WP_Query -->
</div>

Helper Functions Reference

Function	Purpose	Example
client_field($name, $default)	Get field value (works in all contexts)	client_field('title', 'Untitled')
client_content($content, $filter)	Safe content output	client_content($text, 'wp_kses_post')

Filters: 'wp_kses_post' (default), 'esc_html', 'none'

Notes:

• Helper functions work in static, dynamic, and editor modes
• Static modules compile to HTML on save for maximum performance
• Dynamic modules render fresh content on each request
• Local/dev renders live by default; use ?live=1 to force compiled, ?live=0 to force live

Performance Impact

• ~75% reduction in database queries for typical pages
• Zero ACF overhead for static content on frontend
• Maintains freshness for dynamic content like blog posts
• Automatic fallback to live rendering when needed

Testing

Run the test script to verify the system:

http://your-site.local/wp-content/themes/client/test-static-compilation.php

Notes

For a faster start, use our Blueprint project template with

• WP Functions (Snippets plugin)
• Admin Customisation
• Default Plugin Stack
• Library of ACF blocks
• Image Optimisation
• SEO / Caching / Security Setup

Credits

Made by http://client.studio/

Powered by Vite + Tailwind CSS v4 + ACF