Skip to main content

Asset Management

The Suma Elementor theme uses Webpack Mix for compiling and bundling front-end assets.

Build Configuration​

File: wp-content/themes/suma-elementor/webpack.mix.js

The build pipeline:

  1. Compiles SCSS sources into assets/css/custom.css and assets/css/widgets.css
  2. Bundles TypeScript/JS into assets/js/bundle.js
  3. Generates mix-manifest.json for cache-busting version strings

Build Commands​

Run from wp-content/themes/suma-elementor/:

npm install        # Install dependencies
npm run dev        # Single development build
npm run watch      # Watch mode (auto-recompile on file changes)
npm run prod       # Production build (minified, no source maps)

Asset Enqueuing​

Assets are registered (not auto-enqueued by Elementor) in Theme::queue_assets():

wp_enqueue_style( 'suma-theme-custom', get_stylesheet_directory_uri() . '/assets/css/custom.css', [], 1.6 );
wp_enqueue_style( 'suma-theme-widgets', get_stylesheet_directory_uri() . '/assets/css/widgets.css', [], 2.3 );

The version numbers (1.6, 2.3) are incremented manually when releasing a style change.

Dequeued Assets​

The theme removes many default WordPress and WooCommerce assets to minimise page weight:

  • jQuery (replaced by CDN copy of jQuery 3.4.1)
  • jQuery Migrate
  • WooCommerce CSS (only loaded on account and preferences pages)
  • Font Awesome (not used globally)
  • Swiper.js (re-registered Elementor without it)
  • Elementor Dialog

Algolia Assets​

Algolia InstantSearch is only loaded on search pages:

if ( is_search() && defined( 'ALGOLIA_VERSION' ) ) {
    wp_enqueue_script( 'algolia-instantsearch' );
    wp_enqueue_style( 'algolia-instantsearch' );
}

Production Build (Compile to Dist)​

The theme includes a compile-prod.sh script for generating a production-ready distributable:

chmod +x compile-prod.sh
./compile-prod.sh

This script runs npm run prod and outputs the compiled assets to the dist/ directory.