Skip to main content

Theme Architecture

The Suma Elementor theme follows a modular class-based architecture with a clean entry point. All business logic is encapsulated in separate PHP classes, each responsible for a single feature area.

Namespace Structure​

Suma\
├── Theme                        (inc/class-theme.php)
│   ├── ModuleBase               (inc/class-module-base.php)
│   ├── Customizer               (inc/class-customizer.php)
│   ├── Layout                   (inc/class-layout.php)
│   ├── Elementor                (inc/class-elementor.php)
│   ├── ElementorWidgets         (inc/class-elementor-widgets.php)
│   ├── MetalPricing             (inc/class-metal-pricing.php)
│   ├── WooCommerce\             (inc/class-woocommerce-*.php)
│   │   ├── Order
│   │   ├── User
│   │   ├── Invoice
│   │   ├── ShipStation
│   │   └── ...
│   ├── Endpoints\               (inc/endpoints/)
│   │   ├── Pricing
│   │   ├── User
│   │   ├── Coupon
│   │   ├── Quote
│   │   └── PricingCatalogs
│   └── Integration\             (inc/integration/)
│       ├── TeamAccounts
│       └── WooCommerceProduct
└── Util                         (inc/utils.php)

ModuleBase​

All modules extend ModuleBase, which provides:

$this->add_action( 'hook_name', 'method_name', $priority, $args );
$this->add_filter( 'hook_name', 'method_name', $priority, $args );
$this->run_actions_and_filters();

This deferred registration pattern means hooks are queued in init() and only attached to WordPress when run_actions_and_filters() is called. This ensures hooks are registered at the correct time in the WordPress lifecycle.

Asset Pipeline​

Theme assets are compiled using Webpack Mix:

SourceOutput
src/scss/assets/css/custom.css + widgets.css
src/js/assets/js/bundle.js

Build commands:

npm run dev    # Development build with source maps
npm run watch  # Watch mode
npm run prod   # Production build (minified)

The compiled CSS/JS are enqueued in Theme::queue_assets() with version suffixes for cache busting.

Performance Optimisations​

The theme aggressively dequeues unnecessary WordPress and WooCommerce assets:

  • Removes jQuery and jQuery Migrate (serves a CDN copy of jQuery 3.4.1)
  • Removes WooCommerce CSS/JS on pages that don't need it (only loaded on my-account and preferences)
  • Removes emoji scripts
  • Removes REST API link headers from the <head>
  • Removes Swiper.js and Elementor Dialog (re-registers Elementor Frontend without these dependencies)
  • Removes Gravity Forms reCAPTCHA scripts from pages where Gravity Forms is not used

WooCommerce Template Overrides​

WooCommerce templates that need customisation are placed in woocommerce/ at the theme root. WordPress/WooCommerce automatically uses theme templates over plugin templates when a matching file exists.

Custom order status emails and invoice templates are in inc/emails/.