/empa/case_study.tsx
● Company project
TSXcase_study.tsx
PHPtheme-management.phpJSXdashboard-widgets.jsxPHPadmin-tools.php
// company project · primary developer · 1 year+ · JJ-NET OY · Finland

const project = "Empa";

A custom WordPress theme system built over 1+ year at JJ-NET OY — not just a theme, but a complete block ecosystem with a React-powered admin panel, remote block and pattern libraries with dependency resolution, a full dashboard widget suite, and built-in agency tools that replace entire plugins. Now live across 10+ Finnish client sites.

1+
year to build
primary
developer
10+
live client sites
6
plugins replaced
// the_problem.ts

const problem = {

JJ-NET OY manages 150+ WordPress client sites. The default Gutenberg editor gives every site the same cluttered block library — blocks editors do not need, cannot control, and often misuse. Each new client site needed one-off solutions, forked themes, and constant developer intervention for basic content management tasks.

There was no consistent architecture. No shared block library. No way to give clients a clean, intentional editing experience without starting from scratch every time.

}

const goal = {

Build one theme architecture that any client site could extend. A shared remote block library developers could contribute to and sites could pull from. A pattern system that enforces its own dependencies. An admin toolkit that replaces plugins. One system, maintained in one place, deployed everywhere.

Non-technical content editors had to be able to manage blocks, scripts, and content without developer involvement for day-to-day tasks.

}
// theme-management.php
// React app embedded in WordPress admin — 6 tabs, administrator-only
01Block Manager

Activate or deactivate any block — individually or in bulk. Filter by status (installed, not installed, active, inactive) and namespace (acf, core, empa, woocommerce). Interactive search. Covers everything from core WordPress blocks to WooCommerce to custom ACF blocks. The editor sees only what you enable.

02Remote Block Library

JJ-NET custom blocks (ACF and React) stored on a remote server, fetched via API and browsable with visual previews. Download a block — it installs and activates automatically, appears in the block manager with correct namespace. Delete a block — it deactivates, then removes every instance from every page and post. No broken block warnings, ever. Modal confirmation on delete.

03Pattern Library with Dependency Resolver

Remote pattern library with visual previews. Before a pattern can be installed, the system checks all block dependencies. If core blocks are inactive — activate them first. If custom blocks are missing — download and activate them first. Install button stays locked until all dependencies are satisfied. Delete pattern removes all traces from all pages and posts.

04Child Theme Creator

Create a new child theme by typing a name and clicking create. Generates all necessary folder structure and files following Empa conventions automatically — ensuring block downloads and pattern installs work correctly on every new site. Supports WordPress Multisite. Multiple child themes can coexist, each independently activated.

05License Manager

License key management per installation — status, expiration, domain binding, updates toggle. Foundation for commercial distribution — license keys will gate access to the remote block and pattern libraries, enabling JJ-NET to distribute Empa to other agencies as a licensed product.

06Permissions Matrix

Role-based capability control — toggle matrix with WordPress roles as columns and Empa capabilities as rows. Administrator controls exactly which roles can access FSE, block manager, site scripts, template parts, and other Empa features. Granular access without any plugin.

// dashboard-widgets.jsx
// 7 custom widgets — every one solves a real agency pain point
01Welcome Banner

Personalised greeting by username, shows role, posts and pages owned, last login time, session duration, and most recent activity (last created or edited page/post). Every user sees their own context on login — not generic site stats.

02Block Intelligence

Real-time block inventory — total blocks, core, custom, enabled, disabled, patterns, reusable, remote. Top 5 most used blocks shown in widget. Full report page shows every block with usage count, exact pages and posts where used (with links), and search/filter. Built for safe block removal — see where a block lives before you touch it.

03Quick Access

One-click access to the Full Site Editor directly from the dashboard. Solves a real pain point — WordPress users are consistently confused about the difference between the page editor and FSE. This removes the friction entirely.

04Content Overview

Posts, pages, custom post types, taxonomies, publishing activity, recently published content with author and timestamp. When something breaks on a client site, the first question is always who touched it last. This answers that in one glance.

05User Insights

Users broken down by role — admin, editor, author, contributor, subscriber. Registration activity, most active author with publish count, recent registrations, recent activity feed. Essential for multi-user agency sites.

06Site Health

Three tabs: Server (PHP version, MySQL, nginx, memory limit, disk usage with warnings), Security (HTTPS, failed logins, WP version, file permissions audit, inactive plugins, debug mode), Cleanup (post revisions, auto-saves, trash, expired transients, orphaned metadata — all with one-click clean buttons).

07Media Statistics

Images, video, audio, documents breakdown with percentages, total library size, unattached files warning with review link, recent uploads. Unattached media is a common hidden bloat issue on agency sites — this surfaces it immediately.

// admin-tools.php
// built-in tools that replace dedicated plugins
Site Scripts Manager
Custom post type for injecting tracking scripts (GTM, Matomo, GA etc) into header or footer — global or page-specific, with load order control. No plugin, no touching theme files. Any semi-technical admin can add or remove scripts safely.
Template Parts Editor
Dedicated admin page listing all template parts (header, footer etc) with slug, area, location, and status — File only, DB only, or Customised (File + DB). Solves the Polylang compatibility problem: translation works with dynamic template parts, not patterns. One click to edit any template part directly.
CPT Manager
Built-in custom post type registration — full configuration (publicly queryable, show in menu, REST API, archive, supported features). Edit and delete with modal confirmation. Reserved word validation blocks unsafe slugs before they cause silent breakage. Replaces the Custom Post Type UI plugin entirely.
Taxonomy Manager
Same concept as CPT Manager for custom taxonomies. Full configuration, edit, delete with modal confirmation, and reserved word validation — blocks any taxonomy slug that conflicts with WordPress protected terms.
// architecture.ts
// system overview
  ┌─────────────────────────────────────────────────────────────┐
  │                      Empa Theme System                       │
  ├─────────────────────────────┬───────────────────────────────┤
  │     WordPress / PHP         │     React Admin Panel         │
  │                             │     (Empa Theme Management)   │
  │  ┌─────────────────────┐    │                               │
  │  │  FSE Theme (base)   │    │  Blocks tab                   │
  │  │  Clean-slate editor │    │  Block Library (remote API)   │
  │  └─────────────────────┘    │  Pattern Library + resolver   │
  │                             │  License manager              │
  │  ┌─────────────────────┐    │  Child Theme creator          │
  │  │  Dashboard Widgets  │    │  Permissions matrix           │
  │  │  7 custom widgets   │    │                               │
  │  └─────────────────────┘    └───────────────────────────────┤
  │                             │     Admin Toolkit             │
  │  ┌─────────────────────┐    │                               │
  │  │  Child Theme(s)     │    │  Site Scripts (CPT)           │
  │  │  Auto-generated     │    │  Template Parts editor        │
  │  │  Multisite ready    │    │  CPT Manager                  │
  │  └─────────────────────┘    │  Taxonomy Manager             │
  └─────────────────────────────┴───────────────────────────────┘
                    │                         │
            ┌───────┴───────┐         ┌───────┴────────┐
            │  Remote Block │         │  Remote Pattern │
            │  Server (API) │         │  Server (API)   │
            └───────────────┘         └────────────────┘
WordPressPHPReactACFGutenbergREST APIMultisiteFSEPolylang
// timeline.ts
Problem identified
Agency managing 150+ client sites with no consistent theme architecture — one-off solutions per site, growing maintenance overhead
Architecture design
Designed the full system — block manager, remote library, dependency resolver, dashboard widgets, admin toolkit
Core theme build
Clean-slate WordPress FSE theme — minimal editor defaults, consistent base for all child themes
Dashboard widgets
Block Intelligence, Welcome Banner, Content Overview, Site Health, User Insights, Media Statistics, Quick Access
React admin panel
Empa Theme Management — 6-tab React app embedded in WordPress admin
Remote block library
API-connected block library with auto-install, auto-activate, and clean uninstall
Pattern dependency resolver
Dependency checking system — blocks pattern install until all required blocks are present and active
Admin toolkit
Site Scripts, Template Parts editor, CPT Manager, Taxonomy Manager
Child theme creator + Multisite
Automated child theme generation with correct Empa folder structure, multisite support
License system foundation
License key management built — groundwork for commercial distribution
Production deployment
Live across 10+ Finnish client sites via JJ-NET OY
// outcome.ts
const outcome = {
reach:
10+ sites

Live across 10+ Finnish client sites via JJ-NET OY — including Helsinki City, Finnish Museums Association, and Netox.

pluginsReplaced:
6 plugins

Site Scripts replaces Script inserter plugins. CPT Manager replaces Custom Post Type UI. Taxonomy Manager replaces add-on taxonomy plugins. Block Intelligence replaces block analytics plugins. All built into the theme.

commercialPath:
licensable

License system foundation built. Empa is architected to be distributed to other agencies as a licensed product — block and pattern access gated by license key.

codeVisibility:
private

Code is company property and cannot be open-sourced. Happy to walk through the system in detail during an interview — a demo recording is also available.

}
// deployed_on
JurvanJousiCustom Gutenberg blocks
ProventiaFull site build with empa theme
NetoxAll custom Gutenberg blocks — netox.com
JamiJarviFull site build with empa theme
10+ totalLive Empa installations via JJ-NET OY
// Code is private company property and cannot be shared publicly. This case study documents the architecture, decisions, and outcomes. A demo recording is in progress. Happy to walk through the system in detail during an interview.
back to portfolio
⎇ mainEmpa — Case Study
TypeScriptUTF-8