How wpdevelopers/essential-addons-for-elementor-lite works
1. Project type and runtime boundary
- This is a WordPress plugin: *Essential Addons for Elementor*.
- The primary runtime is PHP inside WordPress, with JavaScript/CSS for Elementor editor widgets, frontend behavior, and admin dashboards.
- The plugin depends on Elementor and integrates heavily with WooCommerce and several form/documentation plugins.
2. Top-level plugin bootstrap
- The entry points are essential_adons_elementor.php and index.php, with autoloading via autoload.php and Composer metadata in composer.json.
- config.php and includes/Classes/Bootstrap.php likely coordinate initialization, versioning, and feature registration.
- includes/Classes/Elements_Manager.php is the central registry for widgets/elements, while includes/Classes/Asset_Builder.php and includes/Traits/Enqueue.php handle asset orchestration.
3. Core architecture: traits + class-based plugin services
- The plugin uses a mixed class/trait architecture under includes/Classes and includes/Traits.
- Traits such as Core, Elements, Controls, Admin, Enqueue, Ajax_Handler, Template_Query, and Library partition major responsibilities.
- This suggests shared behavior is composed into multiple classes rather than inherited through a deep hierarchy.
4. Widgets/elements subsystem
- Each Elementor widget is represented as a PHP class under includes/Elements, for example Post_Grid.php, Advanced_Data_Table.php, Login_Register.php, Woo_Product_Grid.php, etc.
- These classes define Elementor controls, frontend rendering, and feature-specific integration logic.
- Widget-specific markup is often separated into template fragments under includes/Template, keeping render logic and presentation modular.
5. Extensions subsystem
- Free and pro-style enhancements live under includes/Extensions, such as Reading_Progress.php, Wrapper_Link.php, Image_Masking.php, Liquid_Glass_Effect.php, and Table_of_Content.php.
- These are not standalone widgets in the same sense; they act as behavioral extensions or page-level capabilities that augment Elementor content.
- Their frontend counterparts are implemented in src/js/view and src/css/view.
6. Control layer and editor experience
- Custom Elementor controls are defined under includes/Controls, including EAEL_Background.php, EAEL_Choose.php, EAEL_Gradient_Text.php, and Select2.php.
- These controls shape the widget authoring experience in the Elementor editor and are reflected in the editor-facing JS under src/js/edit.
- The repository also contains documentation for control patterns and widget development in docs/architecture and .claude/rules.
7. Frontend asset pipeline
- Source assets live in src/js and src/css, with many widget-specific files under view and editor-specific files under edit.
- Built/distributed assets are committed under assets/front-end and assets/admin, including shared libraries such as swiper, isotope, magnific-popup, plyr, tooltipster, full-calendar, gsap, and quill.
- This indicates a compile step transforms source assets into distributable plugin assets, likely via webpack.config.js, postcss.config.js, and Babel configuration.
8. Admin UI subsystem
- The plugin includes standalone admin applications under includes/templates/admin.
- Notably, there are Vite-based React apps for the EA dashboard and quick setup wizard:
- includes/templates/admin/eael-dashboard
- includes/templates/admin/quick-setup
- These apps have their own src, dist, and vite.config.js, showing a separate frontend build boundary from the WordPress/PHP runtime.
9. Dynamic data and AJAX flows
- Dynamic widget behavior is handled through includes/Traits/Ajax_Handler.php, includes/Traits/Template_Query.php, and docs in docs/architecture/dynamic-data.
- This area covers server-side querying, load-more/pagination, login/register flows, third-party integrations, and WooCommerce-specific data retrieval.
- The architecture is therefore split between static editor configuration and runtime server-driven rendering/data fetching.
10. Platform integrations and compatibility boundaries
- Major integrations are built into widget classes and traits for:
- WooCommerce: cart, checkout, product gallery/grid/list/compare/carousel, add-to-cart, price/rating/images.
- Forms: Gravity Forms, WPForms, Ninja Forms, Fluent Forms, Formstack, Caldera, weForms, Contact Form 7.
- Docs/knowledge base: BetterDocs widgets.
- Social/content sources: Facebook Feed, Twitter Feed, Business Reviews, Event Calendar, Typeform, EmbedPress.
- Compatibility support is centralized in includes/Classes/Compatibility_Support.php.
11. Template and rendering structure
- Reusable PHP view fragments are grouped under includes/Template, organized by widget family and preset.
- Examples include multiple preset layouts for Post-Grid, Woo-Product-Carousel, Woo-Product-Gallery, and WooCommerce cart/checkout helpers.
- This structure suggests a pattern of widget class → data preparation → template preset selection → render output.
12. Packaging, release, and QA tooling
- The repo has GitHub Actions workflows in .github/workflows for assets, build/archive, and release automation.
- There is end-to-end testing under tests/e2e using Playwright, with a WordPress setup plugin (tests/e2e/mu-plugins/e2e-setup.php) and template fixtures.
- Code style and safety are enforced via phpcs.xml.dist, Husky pre-commit hooks, Prettier configs, and repository-specific CLAUDE rules.
13. Distribution and WordPress.org readiness
- Files like .distignore, .wordpress-org/blueprints/blueprint.json, readme.txt, and wpml-config.xml show the plugin is prepared for WordPress.org-style distribution and multilingual compatibility.
- The languages directory and POT file indicate gettext-based localization is part of the release artifact.
- assets/index.php, includes/index.php, and src/index.php are typical hardening files to prevent directory browsing.
14. How the main data flow works
- WordPress loads the plugin bootstrap.
- The bootstrap registers widgets, extensions, assets, notices, and compatibility services.
- In Elementor editor mode, widget classes expose controls and React/JS-enhanced editing experiences.
- On the frontend, widget classes render PHP templates and enqueue the matching CSS/JS bundle from assets/front-end.
- For dynamic widgets, AJAX/server queries fetch or filter data at runtime rather than relying only on static markup.
15. Key architectural boundary to capture in a diagram
- The most important boundary is between:
- PHP plugin core: registration, rendering, data retrieval, admin logic
- Built JS/CSS assets: editor interactions, frontend effects, admin dashboards
- Secondary boundaries are between free widgets vs extensions, and core plugin logic vs external services like WooCommerce, Elementor, form plugins, and review/event APIs.
Main entry points: Elements_Manager.php Elements manager · Bootstrap.php Bootstrap · Elements Core widgets · admin Admin assets
Components 22
Plugin Core
PHP bootstrap, service wiring, registries, and shared runtime logic.
- Main plugin · Primary WordPress plugin entry point and bootstrap handoff.
essential_adons_elementor.php - Autoloading · Loads classes and initializes plugin wiring.
autoload.php - Config · Central configuration and version/runtime constants.
config.php - Bootstrap · Coordinates plugin startup, registration, and lifecycle hooks.
includes/Classes/Bootstrap.php - Elements manager · Central registry for Elementor widgets and element definitions.
includes/Classes/Elements_Manager.php - Asset builder · Builds and registers plugin frontend/admin asset bundles.
includes/Classes/Asset_Builder.php - Shared traits · Trait-based shared behavior used across core services and widgets.
includes/Traits
Widgets
Elementor widget classes and their template-driven rendering.
- Core widgets · Representative Elementor widget classes for layout, content, and UI blocks.
includes/Elements - Woo widgets · WooCommerce-facing widget classes for shop, cart, checkout, and product views.
includes/Elements - Form widgets · Form-plugin integrations exposed as Elementor widgets.
includes/Elements - Docs & feeds · Content-source widgets for docs, social feeds, calendar, and reviews.
includes/Elements - Widget templates · Reusable PHP fragments selected by widget and preset during rendering.
includes/Template
Extensions
Elementor behavior extensions that augment existing content.
- Content extensions · Page-level behaviors such as wrapper links, masking, progress, and text effects.
includes/Extensions - Editor controls · Custom Elementor controls for authoring and design-time configuration.
includes/Controls
Assets & Admin
Frontend bundles, admin React apps, and build outputs.
- Admin dashboard · Standalone Vite-built dashboard UI for plugin administration and promotion.
includes/templates/admin/eael-dashboard - Quick setup · Standalone Vite-built onboarding and setup wizard.
includes/templates/admin/quick-setup - Frontend bundles · Compiled distributable frontend and editor assets consumed by WordPress.
assets/front-end - Admin assets · Compiled admin-side styles, scripts, icons, and promotional assets.
assets/admin - Asset source · Source JavaScript and SCSS that compile into distributable plugin assets.
src
Integrations
External platforms and compatibility boundaries used by widgets and services.
- Elementor · Primary page builder runtime the plugin extends.
- WooCommerce · Shop, cart, checkout, and product data source.
- Third-party plugins · Form, docs, embed, and social integrations supported by widgets and traits.
Connections 24
- Main plugin → Autoloading: loads · Plugin entry loads the autoloader.
- Main plugin → Config: reads · Bootstrap uses shared configuration.
- Autoloading → Bootstrap: boots · Autoloaded classes initialize through the bootstrap orchestrator.
- Bootstrap → Elements manager: registers · Bootstrap delegates widget registration to the elements manager.
- Bootstrap → Asset builder: registers · Bootstrap initializes frontend/admin asset orchestration.
- Bootstrap → Shared traits: composes · Core services share behavior via traits.
- Elements manager → Core widgets: loads · Core registry loads standard Elementor widgets.
- Elements manager → Woo widgets: loads · Core registry loads WooCommerce widgets.
- Elements manager → Form widgets: loads · Core registry loads form widgets.
- Elements manager → Docs & feeds: loads · Core registry loads docs, feed, and calendar widgets.
- Core widgets → Widget templates: renders via · Widgets select preset PHP templates for output.
- Woo widgets → Widget templates: renders via · Commerce widgets use dedicated WooCommerce template fragments.
- Form widgets → Third-party plugins: integrates with · Form widgets connect to external form plugins.
- Docs & feeds → Third-party plugins: integrates with · Docs, feed, embed, and review widgets connect to external services.
- Content extensions → Frontend bundles: pairs with · Extensions have matching frontend view assets.
- Editor controls → Elementor: extends editor · Custom controls shape Elementor editor experiences.
- Frontend bundles → Asset source: built from · Frontend bundles are compiled from source assets.
- Admin assets → Asset source: built from · Admin assets are compiled from source assets and admin app outputs.
- Admin dashboard → Admin assets: outputs to · Dashboard app is packaged into admin assets.
- Quick setup → Admin assets: outputs to · Setup wizard is packaged into admin assets.
- Core widgets → Elementor: depends on · Widgets are built for the Elementor runtime.
- Woo widgets → WooCommerce: depends on · Commerce widgets depend on WooCommerce data and behavior.
- Form widgets → Elementor: depends on · Form widgets are exposed inside Elementor.
- Docs & feeds → Elementor: depends on · Content-source widgets are exposed inside Elementor.