A professional management interface for Elementor Version 4 CSS assets.
| New to AFF? | Quick Start Guide → — from zero to an organized project in about ten minutes |
| Looking up a feature? | User Manual → — complete reference for every panel and workflow |
Start with the Quick Start Guide — it covers installation through your first saved project and explains every part of the interface.
Atomic Framework Forge for Elementor (AFF) is a WordPress developer tool that gives you a purpose-built management interface for the CSS custom properties introduced by Elementor Version 4 (the new atomic widget architecture).
Instead of hunting through Elementor's generated CSS by hand, AFF reads your kit file, organizes your variables into labeled categories, and lets you manage them as a structured, multi-project workspace with full backup and version history.
Migrating from Elementor V3 to V4? AFF handles the hardest part of the transition. Import all your V3 Global Colors into AFF with one click — the four standard system colors (Primary, Secondary, Text, Accent) are automatically annotated with their usage roles. Then import your V4 variables alongside them, map each V3 color to its V4 equivalent, and track migration progress as you rebuild pages. See the V3 → V4 Migration Workflow →
Read: AFF reads global variables directly from the active Elementor kit's
_elementor_global_variablespost meta — the same authoritative data store Elementor itself uses. This happens only when you click ↓ Variables (Fetch Elementor Data). It is purely read-only; nothing in Elementor is touched.Write: When you click ↑ Variables (Write to Elementor), AFF writes the current variable values back to
_elementor_global_variableson the kit post — the same authoritative data store, updated the same way Elementor itself updates it. This is the primary and authoritative write. As a secondary, best-effort step, AFF also patches the active kit's generated CSS file directly so the page reflects the change immediately, instead of waiting for Elementor's own regeneration on next load. AFF writes to no other Elementor data.Every write is:
- Always user-triggered — no background or automatic writes, ever
- Always preceded by a confirmation dialog showing exactly what will change
- Always limited to variables you have managed in AFF — AFF does not touch anything else in your Elementor configuration
Use on staging or a local development environment only. A corrupted write could damage your Elementor kit's variable data. Always export a project backup before writing to Elementor.
AFF manages Elementor V4 assets through four distinct, user-controlled data channels. All controls live in the right panel.
| Channel | Into AFF | Out of AFF |
|---|---|---|
| Elementor V4 Sync | Pull variables from Elementor kit | Commit AFF variables back to Elementor kit |
| Elementor V3 Import | Import V3 Global Colors into current project | Not supported — V3 is read-only |
| Backup / Restore | Restore a saved project snapshot | Save Project — creates a timestamped backup |
| External File | Import an .atfrfo.json from disk |
Export current project to .atfrfo.json |
The only automatic operation is startup auto-load — AFF reloads the last active project when you open the plugin. Everything else is user-initiated.
Version 1.5.0. The complete Variables workflow (Colors, Fonts, Numbers — sync, edit, organize, commit back to Elementor) is fully functional, including drag-drop category/subcategory reorganization. Classes management is planned for v2.0.0; Components registry for v3.0.0.
Report issues at https://github.com/Mij-Strebor/atomic-framework-forge-for-elementor/issues
| Feature | Status |
|---|---|
| Sync CSS variables from Elementor V4 kit | ✅ Working |
| Auto-classify variables into Colors / Fonts / Numbers | ✅ Working |
| Organize variables into named categories | ✅ Working |
| Inline rename variables and categories | ✅ Working |
| Drag-and-drop reorder within and across categories | ✅ Working |
| Color swatch — click to open Pickr visual color picker | ✅ Working |
| Color picker — HEX / RGB / HSL + alpha | ✅ Working |
| Expand panel — tint / shade / transparency generator | ✅ Working |
| Add / rename / delete / duplicate / reorder categories | ✅ Working |
| Manual CSS path fallback when sync auto-detect fails | ✅ Working |
| Default categories per variable set (configurable) | ✅ Working |
| Usage count scan (how many widgets use each variable) | ✅ Working |
| Commit variable values back to Elementor V4 kit CSS | ✅ Working |
| Undo / Redo — Ctrl+Z / Ctrl+Y (50-step history) | ✅ Working |
| Light / Dark interface theme | ✅ Working |
| Auto-load last used project on startup | ✅ Working |
| Multiple named projects per site | ✅ Working |
| Save Project — creates timestamped backup snapshot | ✅ Working |
| Restore from backup — two-level project / backup picker | ✅ Working |
| Auto-prune — oldest backups removed at configurable limit | ✅ Working |
Export project to .atfrfo.json |
✅ Working |
Import project from .atfrfo.json |
✅ Working |
| Classes management | 🔜 v2.0.0 |
| Components registry | 🔜 v3.0.0 |
| Sync options dialog (Sync by name / Clear and replace) | ✅ Working |
| Commit summary dialog | ✅ Working |
| Elementor V3 Global Colors import | ✅ Working |
| Print / PDF — variable reference sheet with sub-category hierarchy and optional comments | ✅ Working |
Four panels:
- Top bar — Preferences, Manage Project, Functions, History, Search, Help
- Left nav — Collapsible tree: Variables (Colors / Fonts / Numbers) · Classes (v2.0.0) · Components (v3.0.0)
- Center edit space — Category blocks, variable rows, inline editing
- Right panel — All data management: active project, save & backups, Elementor sync, V3 import, export/import
| Requirement | Version |
|---|---|
| WordPress | 5.8 or later |
| PHP | 8.2 or later |
| Elementor (free) | Latest recommended |
| Elementor Pro | Latest recommended |
Both Elementor and Elementor Pro must be installed and active. AFF shows an admin notice and refuses to load if either is missing.
cd wp-content/plugins
git clone https://github.com/Mij-Strebor/atomic-framework-forge-for-elementor.gitActivate Atomic Framework Forge for Elementor in WordPress → Plugins → Installed Plugins.
- Click Code → Download ZIP on this page.
- Unzip into
wp-content/plugins/atomic-framework-forge-for-elementor/. - Activate in WordPress.
From an elevated Command Prompt:
mklink /D "C:\path\to\wp\wp-content\plugins\atomic-framework-forge-for-elementor" "E:\path\to\your\eff"macOS / Linux:
ln -s /path/to/eff /path/to/wp/wp-content/plugins/atomic-framework-forge-for-elementorThe Quick Start walks through installation, syncing variables, organizing into categories, saving your project, and using the backup system. Takes about ten minutes.
The short version:
- Activate the plugin and open AFF in the WordPress admin sidebar.
- In the right panel under Elementor Sync, click ↓ Variables to pull your variables from Elementor.
- Variables appear under Colors, Fonts, and Numbers in the left panel.
- Click any category to open it in the edit space. Edit values inline; click a swatch to open the color picker.
- Click Save Project in the right panel to create your first backup snapshot.
AFF stores projects in uploads/atfrfo/{project-slug}/ as timestamped .atfrfo.json snapshots:
uploads/atfrfo/
my-brand/
my-brand_2026-03-19_14-30-00.atfrfo.json
my-brand_2026-03-19_16-45-12.atfrfo.json
client-theme/
client-theme_2026-03-18_09-00-00.atfrfo.json
The format is plain JSON — portable between installations and designed to support a future desktop application.
atomic-framework-forge-for-elementor/
├── atomic-framework-forge-for-elementor.php # Plugin entry, headers, bootstrap
├── includes/
│ ├── class-atfrfo-admin.php # Admin page, asset enqueueing
│ ├── class-atfrfo-ajax-handler.php # All AJAX endpoints
│ ├── class-atfrfo-css-parser.php # Elementor kit CSS parser (read-only)
│ ├── class-atfrfo-data-store.php # Platform-portable data layer
│ ├── class-atfrfo-loader.php # Hook registration
│ ├── class-atfrfo-settings.php # Plugin preferences
│ └── class-atfrfo-usage-scanner.php # Widget var() reference scanner
├── admin/
│ ├── views/page-atfrfo-main.php # Four-panel HTML template
│ ├── css/
│ │ ├── atfrfo-theme.css # Design tokens, light/dark palettes
│ │ ├── atfrfo-layout.css # Panel structure, nav, badges
│ │ ├── atfrfo-colors.css # Colors edit space + Pickr styles
│ │ └── atfrfo-variables.css # Fonts / Numbers edit space styles
│ └── js/
│ ├── atfrfo-app.js # Global state, AJAX wrapper, init
│ ├── atfrfo-colors.js # Colors variable set module + Pickr
│ ├── atfrfo-variables.js # Generic variable set factory (Fonts, Numbers)
│ ├── atfrfo-edit-space.js # Edit space router
│ ├── atfrfo-modal.js # Modal system with focus trap
│ ├── atfrfo-panel-left.js # Left nav tree
│ ├── atfrfo-panel-right.js # Data management panel
│ ├── atfrfo-panel-top.js # Top bar, tooltips, sync, preferences
│ └── atfrfo-theme.js # Light/dark toggle & persistence
├── assets/
│ ├── fonts/ # Inter WOFF2 (400/500/600/700, Latin)
│ ├── icons/ # SVG icon set
│ └── images/ # Banners
└── data/
└── atfrfo-defaults.json # Default category lists per variable set
Non-destructive by default. AFF reads Elementor's CSS and never modifies it unless you click Commit to Elementor. Your Elementor configuration is always the source of truth until you deliberately push changes back.
User-controlled data flow. Every sync, commit, export, import, save, and restore is an explicit user action. The only automatic operation is reloading the last active project on startup.
Platform-portable data layer. ATFRFO_Data_Store contains zero WordPress dependencies in its core methods. The data layer is designed to be ported to a standalone desktop application in a future phase.
No build step. All JavaScript is ES5 IIFE — no webpack, no transpiler, no npm install. The plugin works by dropping files into WordPress.
| Version | Scope |
|---|---|
| 0.0.1-alpha | Variables — Colors, Fonts, Numbers. Sync, organize, save, commit. |
| 0.1.0 | Default categories/types per set. Auto-load last project. Functions menu. |
| 0.2.0 | Pickr color picker (HEX / RGB / HSL + alpha). Live palette refresh. |
| 0.2.2 | Export / Import. Undo / Redo. |
| 0.2.3 | Sync name normalization. Manage Project auto-select. Stacked suffix fix. |
| 0.3.0-beta | Versioned backup system. Two-level picker. Multi-project. Right panel reorganization. Sync options dialog. Commit summary dialog. V3 Global Colors import. |
| 0.3.2-beta | Bug fixes: drag-and-drop color reorder; column sort persistence across tab switches; auto-load reliability. |
| 0.3.3-beta | Auto-regenerate Elementor kit CSS when file is missing, preventing 0-variable sync on first load. |
| 0.3.4-beta | Renamed EFF → ATFRFO for WordPress.org compatibility. Sync reads Elementor kit meta directly. Category defaults and AJAX action name fixes. |
| 0.3.5-beta | Load Project modal improvements (save count, inline rename, copy, delete). Cross-module event contamination fix. Drag fixes in Numbers view. Write to Elementor auto-regenerates missing kit CSS. Duplicate variable name prevention. Removed forced -- prefix while typing. |
| 0.4.1-beta | Placeholder sign background transparency fix. |
| 1.0.0-beta | Elementor post-meta commit; CSS var prefix fixes on commit/import/storage; category rename/add/count fixes; shared utilities refactor (Phase 1 & 2). |
| 0.4.0-beta | Numbers editing overhaul (pure storage, autofill suffix, unitless type, fₓ display). Nav variable counts. Double-chevron collapse buttons. Drag/drop and scroll bug fixes. QUICK-START.md corrections. |
| 0.5.x-beta | Super Categories — two-level nesting within Colors, Fonts, and Numbers. Top-level category contains sub-categories only; sub-categories contain variables only. Elementor commit remains flat. Requested for large design systems (382-variable projects). |
| 1.3.0 | V3 import result modal, system color auto-notes, expand modal two-row header, sticky filter bar. Print hierarchy: sub-categories indented, comments toggle. Modal DRY refactor. Title fade fix. |
| 1.4.0 | "Take a look" notify sign. New blacksmith-hammer brand assets. Help panel content refresh. Security fix (HTML-escape consolidation). Font-size default correction. Dead patch-script cleanup. |
| 1.4.1 | Critical fix: every AJAX endpoint was non-functional due to a method-naming mismatch from the 1.4.0 prefix rename. All endpoints restored. |
| 1.4.2 | Project file writes use LOCK_EX (prevents JSON corruption from concurrent writes). Commit to Elementor matches Variables by stored Elementor ID first, not name alone (rename + recommit no longer orphans class/widget references). Backup filename collisions no longer need a blocking sleep() retry. |
| 1.4.3 | WordPress.org review fix: icon SVG output escaped via wp_kses() at the point of echo, not only upstream (19 call sites). |
| 1.5.0 (this release) | Category/subcategory drag-drop reparenting (nest, promote, move between categories); header hierarchy display; click-to-collapse. |
| 2.0.0 | Classes management. |
| 3.0.0 | Components registry. |
| Future | Elementor Kit Manager API write-back. Standalone Windows / Mac desktop application. |
All endpoints require manage_options capability and a valid atfrfo_admin_nonce.
| Action | Description |
|---|---|
atfrfo_save_file |
Save full project state to a new timestamped backup |
atfrfo_load_file |
Load a backup into the working store |
atfrfo_list_projects |
List all projects (Level 1 picker) |
atfrfo_list_backups |
List all backups for a project (Level 2 picker) |
atfrfo_delete_project |
Delete one backup; remove project dir if empty |
atfrfo_sync_from_elementor |
Parse Elementor V4 kit CSS; return variables |
atfrfo_sync_v3_global_colors |
Read V3 Global Colors from kit post meta; return color list |
atfrfo_save_color |
Save one variable (add or update) |
atfrfo_delete_color |
Delete a variable by ID |
atfrfo_add_category / atfrfo_delete_category / atfrfo_rename_category |
Category management |
atfrfo_reorder_categories / atfrfo_duplicate_category |
Category ordering |
atfrfo_commit_to_elementor |
Write AFF variable values to Elementor kit CSS |
atfrfo_get_usage_counts |
Scan widget data for var() references |
atfrfo_save_user_theme |
Persist light/dark preference to usermeta |
atfrfo_get_config / atfrfo_save_config |
Read/write subgroup configuration |
atfrfo_get_settings / atfrfo_save_settings |
Read/write plugin preferences |
- PHP — WordPress hooks, AJAX handlers, CSS parsing, post meta scanning
- Vanilla JavaScript (ES5) — No jQuery for AFF UI logic;
fetch()for all AJAX; no build step - CSS Custom Properties — Full design token system; light/dark mode via
[data-atfrfo-theme] - Pickr v1.10.1 — Visual color picker (vendored locally, not CDN-loaded); classic theme; HEX / RGB / HSL + alpha
- Inter — Loaded locally from
assets/fonts/(WOFF2, Latin subset, no CDN) - SVG icons —
stroke="currentColor", no icon font
This plugin is free software released under the GNU General Public License v2.0 or later.
See LICENSE for the full terms.
Developed by Jim Roberts / JimRForge
Built with Claude Code — Anthropic