ET Helper
Developer tools for Elegant Themes / Divi — debug controls, SVG support, the Divi JSON Converter (with CSS/HTML validation), a QA database reset tool, and a keyboard command palette.
Install
No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:
wp plugin install https://github.com/showhan/et-helper/archive/refs/heads/main.zipThis plugin helps with debugging things through various tools and have some necessary things supported.
Features
- Divi JSON Parser
- Prettier Format of Divi Builder Raw JSON.
- Free Form CSS Detector.
- Element CSS Detector.
- Invalid HTML Detector.
- Invalid CSS Detector.
- Show/Hide/Delete Debug Display.
- SVG Support.
- Stats of the Layout.
- Reset and Import Feature with two predefined SQL files.
- Reset Divi Presets & Global Variables. (From Eduard)
- Restore Missing Theme Builder Templates. (From Eduard)
- Command Palette. (Ported from VladET/et-command-palette)
Divi JSON Parser & Prettier Format
This feature helps convert the raw Divi Builder JSON to a prettier format to make the debugging process easier to find out the necessary information quickly.
It has a nested structure added to the code to understand which section/row belongs which modules. It works like a tree now. We can easily understand where a section/row/coluomn/module is started/ended with a tag-format.
Free-Form CSS Detector
This feature collects all the Free-Form CSS from the entire layout elements and put them into a single tab in the plugin settings. It is helpful to find out any CSS quickly from that list. It also list out the CSS of responsive devices.
All blocks have a nested breadcrumb to quickly find out the specific element the CSS belongs to.
Element CSS Detector
It is the same as the Free-Form CSS. It collects all elements' CSS separately into a single place.
Invalid HTML Detector
It searches all text fields across the entire layout's all modules to find out any invalid/unclosed/missing tags, etc HTML markup that can break the layout or cause unnecessary rendering issue.
With this detector, corrupted codes can be easily found using the nested breadcrumb.
Invalid CSS Detector
It searches for all invalid/corrupted CSS codes across the layout elements - Free-Form CSS and Element CSS fields. Any invalid codes found are listed in a single place with the nested breadcrumb to quickly navigate to that instance.
Show/Hide/Delete Debug
This tools helps turning on/off the debug mode by one click and also the debug log file can be deleted entirely.
SVG Support
With this plugin, we can upload SVG images to the website since WordPress doesn't support it by default.
Stats & Others
Also, it shows the number of sections/rows/columns available on a layout. Additionally, the formatted JSON file can be downloaded. There is a search field that scrolls to the targeted element quickly.
Sample File For Testing
Reset & Import Feature
This can be used to reset the website database and import with two SQL files. One for fresh installation and another with data. fresh-sql.sql and with-data.sql.
The credentials will remain the same because once the website is initiated, the existing SQL files will automatically be regenerated with the current user's credentials and wit the current website URL.
Reset Divi Presets & Global Variables
Adds a "Reset Divi Presets" submenu under the ET Helper admin bar menu to reset Divi 4/5 builder presets (element presets, option group presets) and Divi 5 global variables (colors, fonts, images, links, numbers, text) individually or all at once. Useful for clearing corrupted presets/global variables or getting back to a clean QA baseline.
This feature is vendored in from a Eduard's plugin — see Vendored & Ported Features below for where it lives and how to pull in upstream updates.
Restore Missing Theme Builder Templates
Adds a "Restore TB Templates" item under the ET Helper admin bar menu. Recovers Divi Theme Builder templates and template parts that were deleted or marked unused before Divi's 7-day auto-trash job removes them for good — with three tabs: Templates (restore a deleted template and its linked parts, or restore all at once), Template Parts (export any deleted header/body/footer part as a Divi-compatible JSON file for re-import), and Revisions (browse and restore any past revision of a template part with a side-by-side diff). Compatible with Divi 4 and Divi 5.
This feature is vendored in from a Eduard's plugin — see Vendored & Ported Features below for where it lives and how to pull in upstream updates.
Command Palette
Adds a keyboard-driven command palette (Ctrl+Shift+C / Cmd+Shift+C by default, customizable per user) that works on both wp-admin and the frontend. Fuzzy-searches admin menu pages, admin bar links, and Divi pages; offers context actions for the current post/page (Edit with Divi, Edit in WordPress, View); built-in commands (Open…, Edit with Divi…, Edit in WordPress…, Clear Cache, Change Shortcut…); plugin activate/deactivate without leaving the page; pinned and recent actions; and an accent color that follows the Divi Visual Builder color scheme.
Ported into ET Helper's own codebase (includes/features/class-command-palette.php, assets/css/command-palette.css, assets/js/command-palette.js) from VladET/et-command-palette, which originally shipped as a standalone must-use plugin of global acp_-prefixed functions. See Vendored & Ported Features below for what changed in the port.
Video Overview
Vendored & Ported Features
Three features started life in other repositories. Reset Divi Presets & Global Variables and Restore Missing TB Templates are pulled in from Eduard's separate repositories via git subtree, so we can absorb upstream updates without manually re-copying code. Command Palette came from a single-file, procedurally-styled must-use plugin that doesn't lend itself to git subtree, so it was rewritten as a normal ET Helper feature class instead — a one-time port rather than something kept in sync automatically.
| Feature | Source | Location |
|---|---|---|
| Reset Divi Presets & Global Variables | eduard-un/reset-divi-presets-and-global-variables | includes/vendor/reset-divi-presets/ |
| Restore Missing TB Templates | eduard-un/restore-missing-tb-templates | includes/vendor/restore-missing-tb-templates/ |
| Command Palette | VladET/et-command-palette | includes/features/class-command-palette.php, assets/css/command-palette.css, assets/js/command-palette.js |
Files under includes/vendor/ should not be hand-edited. Any ET Helper-specific integration (e.g. admin bar/menu placement) lives in an adapter class in includes/features/ instead (see class-reset-divi-presets-adapter.php and class-restore-tb-templates-adapter.php), so upstream pulls stay conflict-free.
Command Palette, by contrast, is a straight rewrite living directly in includes/features/class-command-palette.php — there's no vendor copy to leave untouched, so pulling in a future upstream update means manually diffing the new et-command-palette.php against it rather than a git subtree pull.