Skip to main content

Theme System

Suma Elementor v3.0.0 parent theme with child theme customizations for HHA Sports branding and functionality.

Overview​

HHA Sports uses a custom theme framework built on Elementor with 50+ custom widgets, BigCommerce integrations, and extensive customization capabilities.

Theme Structure​

Active Theme: Suma Elementor Child v1.0.0​

Location: wp-content/themes/suma-elementor-child/
Parent: Suma Elementor v3.0.0
Author: Rhino Group

Child Theme Files​

suma-elementor-child/
├── functions.php              # Loads theme class
├── style.css                  # Theme metadata
├── inc/
│   ├── class-theme.php        # Main theme orchestrator
│   ├── class-bigcommerce-product.php  # BC product customizations
│   ├── class-klaviyo.php      # Klaviyo tracking integration
│   └── class-yotpo.php        # Yotpo reviews integration
├── bigcommerce/
│   └── components/            # BC template overrides
│       └── option-types/      # Custom product option displays
└── assets/
    ├── css/                   # Custom styles
    └── js/                    # Custom scripts

Parent Theme: Suma Elementor v3.0.0​

Location: wp-content/themes/suma-elementor/
Based On: Hello Elementor (heavily customized)
Author: Rhino Group

Parent Theme Architecture​

suma-elementor/
├── functions.php              # Bootstraps theme
├── style.css (v3.0.0)         # Compiled styles
├── theme.css                  # Custom theme styles
├── dist/                      # Compiled assets
│   ├── css/
│   │   └── global.css         # Main theme CSS (v1.4.6)
│   └── js/
│       └── global.js          # Main theme JS (v1.2.5)
├── inc/
│   ├── class-theme.php        # Core theme class
│   ├── class-elementor.php    # Elementor integration
│   ├── class-elementor-widgets.php  # Widget registration
│   ├── class-customizer.php   # WordPress Customizer
│   ├── class-settings.php     # Theme settings
│   ├── integrations/          # Third-party integrations
│   │   ├── bigcommerce/       # BC integration
│   │   ├── acf/               # ACF integration
│   │   ├── class-algolia.php  # Algolia search
│   │   ├── class-facetwp.php  # FacetWP filtering
│   │   ├── class-gravity-forms.php
│   │   ├── class-yoast.php
│   │   └── woocommerce/       # (If needed)
│   ├── widgets/               # 50+ custom Elementor widgets
│   ├── skins/                 # Elementor widget skins
│   ├── tags/                  # Dynamic tags
│   └── utils/                 # Helper functions
├── bigcommerce/
│   └── components/            # BC template overrides
├── config.json                # Theme configuration
└── build-widgets.sh           # Widget compilation script

Theme Features​

Registered menu locations:

  • Primary Menu - Main navigation
  • Secondary Menu - Utility links
  • Footer Menu - Footer navigation
  • Mobile Menu - Mobile-specific menu
  • Panel Menu - Off-canvas panel

Post Type Support​

  • Post thumbnails (featured images)
  • Post formats (post, video)
  • Page excerpts
  • Align-wide Gutenberg support

Asset Loading​

Theme Styles:

  • dist/css/global.css (v1.4.6) - Main compiled theme styles
  • Parent theme loaded from child with wp_enqueue_style('parent', ...)

Theme Scripts:

  • jQuery 3.4.1 from CDN (replaces WP default)
  • dist/js/global.js (v1.2.5) - Main theme functionality
  • Algolia scripts (conditional on search pages)

Configuration Script:

  • SUMA JavaScript object with theme config
  • Footer menu toggle scripts
  • Header autohide settings
  • Mmenu configuration
  • FacetWP configuration

Custom Elementor Widgets​

Located in inc/widgets/, 50+ custom widgets including:

Product/Commerce Widgets​

  • bc-add-to-cart-form - BigCommerce add to cart
  • bc-product-price - Product pricing display
  • bc-product-video - Product video player
  • product-badge - Dynamic product flags
  • product-grid - Product grid layouts
  • product-slider - Product carousel
  • product-stack - Product stacking display
  • product-summary - Product information summary
  • product-thumbnails-slider - Image gallery
  • suma-product-card - Custom product cards
  • bundle-upsell - Product bundles
  • free-shipping-notice - Shipping callout
  • payment-placement - Payment method badges

Content Widgets​

  • hero-banner - Homepage hero sections
  • hero-product-slider - Featured product carousel
  • banner-carousel - Image/content carousels
  • cta-banner - Call-to-action banners
  • cta-banner-3 - Three-column CTAs
  • cta-carousel - CTA slider
  • multi-column-banner - Multi-column layouts
  • video-promo - Video promotional blocks
  • promo-callout - Promotional callouts
  • feature-slider - Feature highlight carousel

Search & Navigation​

  • algolia-autocomplete - Search autocomplete
  • algolia-catalog - Catalog search
  • algolia-instantsearch - Instant search results
  • algolia-posts - Post search
  • algolia-search - General search
  • suma-search-form - Search form
  • category-facets - Category filtering
  • facet-list - Filter facets
  • facet-mobile-button - Mobile filter toggle
  • facet-pagination - Pagination controls
  • suma-breadcrumbs - Breadcrumb navigation
  • page-navigation - Page links

Reviews & Ratings​

  • bv-questions-widget - BazaarVoice Q&A
  • bv-reviews-widget - BazaarVoice reviews
  • bv-star-rating - Star ratings
  • yotpo-review-carousel - Yotpo review slider
  • yotpo-reviews - Yotpo reviews display

Layout & UI​

  • button-grid - Button groups
  • tabular-list - Table/list layouts
  • acf-repeater-list - ACF data display
  • suma-gallery - Image galleries
  • suma-slider - Generic slider
  • read-more-text-field - Expandable text

Forms & Interactive​

  • gravity-form - Gravity Forms integration
  • share-url - Social sharing
  • suma-share-buttons - Share buttons

Header/Footer​

  • header-cart-icon - Cart icon widget
  • menu-cart-icon - Menu cart display
  • header-top-bar-promo - Promo bar
  • site-logo-footer - Footer logo
  • site-logo-mobile - Mobile logo
  • site-logo-sticky - Sticky header logo

Miscellaneous​

  • ad-placement - Ad/banner placement
  • suma-post-navigation - Post navigation
  • product-lifestyle-gallery - Lifestyle images
  • taxonomy-stack - Taxonomy display

Dynamic Tags​

Custom Elementor dynamic tags in inc/tags/:

  • Product Gallery IDs - Get product image IDs
  • Site Logo Mobile - Mobile logo URL
  • Site Logo Footer - Footer logo URL
  • Site Logo Sticky - Sticky header logo URL

Widget Element Controls​

All Elementor containers support custom visibility controls:

Hide Element Control​

Location: Section Layout → Additional Options

  • Never - Always visible (default)
  • Always - Hide element unconditionally
  • By Hook - Hide based on filter hook result

When "By Hook" selected, provide filter name that returns true to hide.

Example: pdp_hide_badge filter checks if product badge should be hidden.

Theme Integrations​

BigCommerce Integration​

Location: inc/integrations/bigcommerce/

Files:

  • class-bigcommerce.php - Main integration
  • class-bigcommerce-product.php - Product customizations
  • class-bigcommerce-category.php - Category handling
  • class-bigcommerce-customfields.php - Custom field sync
  • class-bigcommerce-util.php - Helper functions

Features:

  • Custom product single templates via Elementor
  • Product schema markup
  • Custom add-to-cart messages
  • Promo flag/badge system
  • Store credit notices on account pages
  • Login/logout menu buttons
  • Force authentication on account pages
  • Dynamic product section visibility

ACF Integration​

Location: inc/integrations/acf/

Files:

  • class-acf.php - ACF setup
  • class-acf-field-customizations.php - Custom field types

Integrates Advanced Custom Fields Pro for:

  • Product custom fields (synced from BigCommerce)
  • Theme options
  • Page-level configurations

Algolia Integration​

Location: inc/integrations/class-algolia.php

Customizes WP Search with Algolia plugin:

  • Custom autocomplete templates
  • Search result styling
  • InstantSearch configuration
  • Conditional script loading on search pages

FacetWP Integration​

Location: inc/integrations/class-facetwp.php

Enhances FacetWP filtering:

  • Custom facet templates
  • Mobile filter button
  • Pagination integration
  • Result count display
  • JavaScript configuration via SUMA.facetwp object

Gravity Forms Integration​

Location: inc/integrations/class-gravity-forms.php

Custom form styling and functionality for Gravity Forms.

Yoast SEO Integration​

Location: inc/integrations/class-yoast.php

Customizes Yoast SEO output and schema.

Google Integration​

Location: inc/integrations/class-google.php

Google Analytics and Tag Manager integration.

Security Integrations​

  • Imperva - inc/integrations/class-imperva.php
  • Cloudflare - inc/integrations/class-cloudflare.php

Theme Configuration​

config.json​

Location: wp-content/themes/suma-elementor/config.json

{
  "site_info": {
    "name": "Company Name",
    "phone": "123-456-7890",
    "address": "123 Street",
    "city": "Any City",
    "state": "AL",
    "zip": "12345"
  },
  "lazyload": {
    "elements_selector": ".lazy",
    "threshold": 100
  },
  "menu": {
    "mobile": {
      "selector": "#mm-0",
      "max_width": 992
    }
  },
  "social": {
    "facebook": "",
    "twitter": "",
    "instagram": "",
    "youtube": ""
  }
}

Theme Settings​

Location: Suma Theme → Settings (admin menu)

Configurable via class-settings.php:

  • Footer menu script toggle
  • Header autohide on scroll
  • Additional custom settings

Theme Customizer​

Location: Appearance → Customize → Suma (custom panel)

Custom sections managed by class-customizer.php:

  • Site identity
  • Colors
  • Typography
  • Header settings
  • Footer settings
  • Mobile menu options

Child Theme Customizations​

Class: Theme​

File: inc/class-theme.php

class Theme {
    public function __construct() {
        add_action('wp_enqueue_scripts', [$this, 'child_enqueue_parent_scripts']);
        $this->load_dependencies();
    }
    
    private function load_dependencies() {
        include_once('class-bigcommerce-product.php');
        include_once('class-klaviyo.php');
        include_once('class-yotpo.php');
    }
}

Class: Child_BigCommerce_Product​

File: inc/class-bigcommerce-product.php

Custom shortcodes:

  • [available_options_table] - Display product options
  • [product_weights_table] - Product weight specs
  • [bc_product_videos] - YouTube video embeds

Class: Klaviyo​

File: inc/class-klaviyo.php

Klaviyo tracking implementation:

  • Onsite script loading (company ID: VNGrUw)
  • Product page tracking (Viewed Product, Viewed Item)
  • Add to cart tracking
  • Product metadata for Klaviyo (name, ID, image, price, brand)

Class: Yotpo​

File: inc/class-yotpo.php

Yotpo reviews integration:

  • [yotpo-reviews-section] - Full reviews widget
  • [yotpo-star-rating] - Star rating display
  • Widget instance IDs: 983978 (reviews), 983977 (stars)

Build Process​

Build Scripts​

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

  • build-widgets.sh - Bash script for widget compilation
  • build-widgets.bat - Windows batch script

Asset Compilation​

Theme appears to use a custom build process (not Webpack/Grunt visible in repo). Compiled assets output to dist/:

  • dist/css/global.css
  • dist/js/global.js

No package.json, webpack.config.js, or Gruntfile.js found in theme root.

Template Hierarchy​

Standard WordPress Templates​

  • header.php - Site header
  • footer.php - Site footer
  • sidebar.php - Sidebar template
  • index.php - Archive fallback
  • comments.php - Comments template

Template Parts​

Location: template-parts/

  • Content templates
  • Post format templates
  • Reusable sections

BigCommerce Templates​

Location: bigcommerce/components/

Override default BigCommerce for WordPress templates:

  • Product card components
  • Cart components
  • Checkout components
  • Account page components
  • Product option types

Gutenberg/Block Editor​

  • Disabled for BigCommerce Products - Classic editor forced for product posts
  • Enabled for Pages - Elementor used for page building instead

Performance Optimization​

Image Loading​

LazyLoad configuration via config.json:

  • Elements: .lazy class
  • Threshold: 100px
  • Loading/loaded/error classes

Script Management​

  • jQuery loaded from CDN (3.4.1)
  • Conditional Algolia scripts (search pages only)
  • Deferred/async loading where appropriate

Extra Image Sizes Removed​

Theme removes unused WordPress image sizes, keeping only:

  • thumbnail
  • medium
  • medium_large
  • large
  • bc-category-image
  • bc-thumb

Debugging & Development​

Debug Constants​

wp-config.php:

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

Log Location​

Debug log: wp-content/debug.log

Theme Text Domain​

  • Parent: hello-elementor
  • Child: suma