Theme Customizations

Overview

The Walkers Game Ear site uses Suma Elementor, a custom theme built on the Hello Elementor framework with extensive Rhino Group customizations. The theme includes 50+ custom Elementor widgets, BigCommerce integrations, and marketing tool connections.

Theme Details

Theme Name: Suma Elementor
Version: 3.0.0
Parent: Hello Elementor (based on v2.2.0)
Child Theme: Suma Elementor Child v1.0.0
Location: wp-content/themes/suma-elementor/
Text Domain: hello-elementor / suma

Theme Structure

suma-elementor/
├── functions.php                  # Theme initialization
├── style.css                      # Compiled CSS
├── theme.css                      # Additional theme CSS
├── inc/                           # PHP classes
│   ├── class-theme.php           # Main theme class
│   ├── apps/                     # Application modules
│   ├── endpoints/                # REST API endpoints
│   ├── integrations/             # Third-party integrations
│   │   ├── class-acf-fields.php
│   │   ├── class-algolia.php
│   │   ├── class-bigcommerce.php
│   │   ├── class-facetwp.php
│   │   ├── class-klaviyo.php
│   │   ├── class-yoast.php
│   │   └── woocommerce/
│   ├── kit/                      # Elementor kit customizations
│   ├── skins/                    # Widget skins
│   ├── tags/                     # Dynamic tags
│   ├── utils/                    # Utility functions
│   └── widgets/                  # Custom Elementor widgets (50+)
├── bigcommerce/                  # BigCommerce template overrides
│   └── components/
│       ├── accounts/
│       ├── cart/
│       ├── option-types/
│       ├── orders/
│       └── products/
├── dist/                         # Compiled assets
│   ├── css/
│   │   ├── global.css           # Main stylesheet
│   │   └── widgets.css          # Widget-specific styles
│   └── js/
│       └── global.js            # Main JavaScript bundle
├── src/                          # Source files (pre-compilation)
│   ├── js/
│   │   └── Admin/
│   └── scss/
│       └── admin.scss
├── package.json                  # NPM dependencies
├── webpack.mix.js                # Laravel Mix config
└── tailwind.config.js            # Tailwind CSS config

Build System

Dependencies

package.json includes:

• Laravel Mix v6.0.39 — Asset compilation
• Tailwind CSS v3.0.11 — Utility-first CSS
• Preact v10.11.0 — Lightweight React alternative
• @headlessui/react v1.7.3 — Accessible UI components
• @heroicons/react v2.0.12 — Icon set
• mmenu-js v9.3.0 — Mobile menu library
• Sass v1.49.9 — CSS preprocessor

Build Commands

# Development watch mode
npm run watch

# Production build
npm run prod

# Build custom Elementor widgets
npm run prod-widgets

# Tailwind CSS watch mode
npm run tw:watch

# Tailwind CSS production build
npm run tw:build

Compilation Process

Laravel Mix (webpack.mix.js) compiles:

1. SCSS → CSS: src/scss/admin.scss → dist/css/admin.css
2. JS → Bundled JS: src/js/Admin/Index.js → dist/js/admin.js
3. Tailwind CSS: Utility classes for admin panels
4. Preact Components: Interactive UI elements

Theme Features

Menu Locations

Registered navigation menus:

• Primary — Main header navigation
• Secondary — Secondary header menu
• Footer — Footer navigation
• Mobile — Mobile-specific menu
• Panel — Off-canvas panel menu

Theme Supports

add_theme_support( 'menus' );
add_theme_support( 'post-thumbnails' );
add_theme_support( 'align-wide' );
add_theme_support( 'post-formats', array( 'post', 'video' ) );
add_post_type_support( 'page', 'excerpt' );

Asset Loading

CSS:

• jQuery 3.4.1 (CDN: Cloudflare)
• dist/css/global.css (v1.4.5)
• Algolia InstantSearch CSS (conditional, on search pages)

JavaScript:

• dist/js/global.js (v1.2.6)
• Algolia InstantSearch JS (conditional)
• Mmenu mobile navigation
• Custom interactive components

JavaScript Configuration

Theme settings passed to frontend via wp_localize_script:

window.SUMA = {
  footer: {
    menu_script_toggle: true/false  // Footer menu fixes
  },
  header: {
    autohide: true/false             // Auto-hide header on scroll
  },
  mmenu: {
    // Mobile menu configuration
  },
  facetwp: {
    // FacetWP integration settings
  }
};

Custom Elementor Widgets (50+)

Located in inc/widgets/, these custom widgets extend Elementor's capabilities:

Product & E-Commerce Widgets

Widget	Purpose
bc-add-to-cart-form	BigCommerce add-to-cart button
bc-product-price	Product pricing display
bc-product-video	Product video embed
product-badge	Custom product badges
product-grid	Product listing grid
product-slider	Product carousel
product-stack	Stacked product display
product-summary	Product information summary
product-thumbnails-slider	Image gallery slider
product-video	Product video player
suma-product-card	Custom product card layout
bundle-upsell	Product bundle promotions
free-shipping-notice	Shipping threshold notice

Search & Navigation Widgets

Widget	Purpose
algolia-autocomplete	Instant search autocomplete
algolia-catalog	Algolia product catalog
algolia-instantsearch	Full instant search interface
algolia-posts	Blog post search
algolia-search	Global search widget
suma-search-form	Custom search form
facet-list	FacetWP filter list
facet-mobile-button	Mobile filter toggle
facet-pagination	Custom pagination
category-facets	Category filter widget
page-navigation	Page navigation menu
suma-breadcrumbs	Breadcrumb trail

Content & Layout Widgets

Widget	Purpose
hero-banner	Homepage hero section
hero-product-slider	Hero with product carousel
banner-carousel	Image carousel
cta-banner	Call-to-action banner
cta-banner-3	3-column CTA layout
cta-carousel	CTA slider
multi-column-banner	Multi-column layout
feature-slider	Feature highlight slider
video-promo	Video promotional content
promo-callout	Promotional callout box

Review & Rating Widgets

Widget	Purpose
bv-questions-widget	BazaarVoice Q&A display
bv-reviews-widget	BazaarVoice reviews display
bv-star-rating	Product star rating
yotpo-reviews	Yotpo reviews (legacy)

Utility Widgets

Widget	Purpose
header-cart-icon	Mini cart icon in header
menu-cart-icon	Cart icon in navigation
header-top-bar-promo	Top bar promotional message
site-logo-footer	Footer logo
site-logo-mobile	Mobile logo
site-logo-sticky	Sticky header logo
read-more-text-field	Expandable text
share-url	Social sharing buttons
suma-share-buttons	Custom share buttons
tabular-list	Tabular data display
suma-tablepress	TablePress integration
acf-repeater-list	ACF repeater display
taxonomy-field-repeater	Taxonomy data repeater
taxonomy-stack	Taxonomy term display
button-grid	Button grid layout
ad-placement	Advertisement widget
payment-placement	Payment method icons
product-lifestyle-gallery	Lifestyle image gallery
suma-gallery	Custom image gallery
suma-slider	Generic content slider
suma-post-navigation	Post navigation links
gravity-form	Gravity Forms embed

Third-Party Integrations

BigCommerce Integration

File: inc/integrations/class-bigcommerce.php

Hooks and filters:

• Product template overrides
• Cart/checkout customizations
• Product sync event handling

FacetWP Integration

File: inc/integrations/class-facetwp.php

Frontend Configuration:

window.SUMA.facetwp = {
  // Custom FacetWP settings
};

Features:

• Custom facet templates
• Mobile filter button integration
• Pagination customizations

Algolia Integration

File: inc/integrations/class-algolia.php

Features:

• Custom autocomplete templates
• InstantSearch widget integration
• Search results styling
• HTTP client options (CURLOPT_REFERER set to domain)

Klaviyo Integration

File: inc/integrations/class-klaviyo.php

Features:

• Product page view tracking
• Add-to-cart event tracking
• Viewed product metadata
• Custom event properties

ACF Integration

File: inc/integrations/class-acf-fields.php

Custom field groups and templates for:

• Product metadata
• Page layouts
• Widget configurations

Yoast SEO Integration

File: inc/integrations/class-yoast.php

Features:

• Schema markup customizations
• Breadcrumb integration
• SEO meta enhancements

Child Theme Customizations

Location: wp-content/themes/suma-elementor-child/

Child Theme Structure

suma-elementor-child/
├── functions.php           # Theme initialization
├── style.css              # Child theme stylesheet
├── inc/
│   ├── class-theme.php    # Custom theme class
│   └── class-klaviyo.php  # Klaviyo customizations
└── screenshot.png         # Theme preview

Klaviyo Custom Tracking

File: inc/class-klaviyo.php

Company ID: TMcHze (configured in code)

Product View Tracking:

klaviyo.push(['track', 'Viewed Product', {
  Name: "Product Name",
  ProductID: "12345",
  ImageURL: "https://...",
  URL: "https://...",
  Brand: "Walker's",
  Price: "49.99",
  CompareAtPrice: "59.99"
}]);

Add to Cart Tracking:

// Attached to .bc-btn--add_to_cart click events
klaviyo.push(['track', 'Added to Cart', item]);

Script Loading:

• Klaviyo onsite script injected in <head>
• Product tracking scripts in <footer> on product pages
• Events fire on page load and button clicks

Theme Settings

Custom Settings Panel

Location: Suma admin panel (custom)

Available Settings:

• Footer Menu Fixes: Toggle footer menu script enhancements
• Header Autohide: Enable/disable header hide-on-scroll
• FacetWP Configuration: Facet display options
• Mmenu Settings: Mobile menu behavior

Customizer Panels

BigCommerce Panel (native):

• Button labels
• Colors & themes
• Catalog page settings
• Product single settings
• Product archive customization

Performance Optimizations

Asset Loading Strategy

1. jQuery: Loaded from Cloudflare CDN (v3.4.1)
2. Critical CSS: Inlined in <head>
3. JavaScript: Footer-loaded, bundled
4. Conditional Loading: Algolia assets only on search pages

Caching Considerations

Do NOT cache:

• Cart page ([bigcommerce_cart])
• Checkout page
• Account pages (profile, orders, addresses)
• FacetWP-filtered pages (configurable)

Safe to cache:

• Product pages (with dynamic price refresh disabled)
• Category pages
• Static content pages

Development Workflow

Local Setup

# Clone theme
cd wp-content/themes/suma-elementor

# Install dependencies
npm install

# Start development watch
npm run watch

Making Changes

1. CSS Changes: Edit src/scss/admin.scss, compile with npm run tw:build
2. JS Changes: Edit files in src/js/, compile with npm run prod
3. Widget Changes: Edit files in inc/widgets/, run npm run prod-widgets
4. Template Changes: Edit PHP files directly, clear cache

Testing Changes

1. Clear WordPress object cache
2. Clear Elementor cache: Elementor → Tools → Regenerate CSS
3. Test in Elementor editor
4. Test on frontend
5. Test mobile responsiveness

Troubleshooting

Widgets Not Appearing

1. Clear Elementor cache
2. Regenerate CSS and data
3. Check widget registration in inc/class-elementor.php

Styles Not Updating

1. Run npm run prod to rebuild assets
2. Clear browser cache
3. Check asset version numbers in queue_assets() function
4. Verify file paths in enqueued styles

JavaScript Errors

1. Check browser console for errors
2. Verify window.SUMA config is loading
3. Check jQuery version conflicts
4. Ensure all dependencies are loaded

Next Steps

• Development Setup