Skip to content

Instantly share code, notes, and snippets.

@jasperf
Created September 15, 2025 06:35
Show Gist options
  • Save jasperf/a30cefe86ef06d865f37f65eb0b570e6 to your computer and use it in GitHub Desktop.
Save jasperf/a30cefe86ef06d865f37f65eb0b570e6 to your computer and use it in GitHub Desktop.
Multi Purpose Sage 11 Based Theme

Looking at your use case, you want Thyra to be a flexible base theme that can quickly adapt to different client needs (Editorial, Agency, etc.) without duplicating code or creating child themes. Here's my comprehensive plan:

Theme Variation System Architecture

  1. ACF Options-Based Theme Selector
  • Single options page with theme variation selector
  • Each variation defines: fonts, colors, typography scale, layout preferences
  • Stored globally, accessible throughout the theme
  1. Dynamic Asset Loading Strategy

resources/css/ ├── app.css (base utilities, layout system, components) ├── variations/ │ ├── editorial/ │ │ ├── fonts.css │ │ ├── colors.css │ │ └── typography.css │ ├── agency/ │ │ ├── fonts.css │ │ ├── colors.css │ │ └── typography.css

  1. Conditional Template Loading
  • Use View Composers to inject variation-specific data
  • Blade conditionals to load different partials based on theme selection
  • Template hierarchy that checks for variation-specific templates first
  1. Block Variation System
  • Native blocks with variation-aware styling
  • CSS custom properties that change based on selected theme
  • Block patterns specific to each variation
  1. Font & Typography Management
  • Dynamic font loading in setup.php based on selection
  • Variation-specific font stacks and sizing scales
  • CSS custom properties for typography that update per theme
  1. Layout Flexibility
  • Different blog layouts (grid vs list vs masonry)
  • Configurable single post templates
  • Header/footer variations per theme type

Implementation Benefits

Speed: Switch themes instantly via admin panel Maintenance: Single codebase, no child theme complexityFlexibility: Easy to add new variations Client-Friendly: Non-technical theme switching Performance: Only loads assets for selected variation

File Structure Impact

  • Keep app.css minimal (layout grid, utilities, base components)
  • Move Editorial-specific styles to variation files
  • Use Vite to compile variation bundles separately
  • Dynamic enqueuing in setup.php based on ACF selection

This approach transforms Thyra into a true multi-purpose theme system where you can rapidly deploy different visual identities while maintaining code efficiency and WordPress best practices.

╭────────────────────────────────────────────────────────────────────────────────────────────╮ │ Ready to code? │ │ │ │ Here is Claude's plan: │ │ ╭────────────────────────────────────────────────────────────────────────────────────────╮ │ │ │ Thyra Multi-Theme Variation System │ │ │ │ │ │ │ │ Goal │ │ │ │ │ │ │ │ Transform Thyra into a flexible base theme with selectable variations (Editorial, │ │ │ │ Agency, etc.) for rapid site deployment. │ │ │ │ │ │ │ │ Implementation Plan │ │ │ │ │ │ │ │ 1. ACF Options Page Setup │ │ │ │ │ │ │ │ - Create theme variation selector with ACF Composer │ │ │ │ - Options for: fonts, colors, typography scales, layout preferences │ │ │ │ - Global storage for theme-wide access │ │ │ │ │ │ │ │ 2. Asset Architecture Restructure │ │ │ │ │ │ │ │ - Move Editorial-specific styles from app.css to variations/editorial/ │ │ │ │ - Create variations/agency/ with unique fonts, colors, typography │ │ │ │ - Update Vite config to compile variation bundles │ │ │ │ - Implement dynamic asset loading in setup.php │ │ │ │ │ │ │ │ 3. Template Variation System │ │ │ │ │ │ │ │ - Create variation-aware View Composers │ │ │ │ - Implement conditional template loading via Blade │ │ │ │ - Build different blog/single layouts per variation │ │ │ │ - Add block patterns specific to each theme type │ │ │ │ │ │ │ │ 4. Dynamic Font & Typography │ │ │ │ │ │ │ │ - Variation-specific font loading system │ │ │ │ - CSS custom properties that update based on selection │ │ │ │ - Unique typography scales per theme │ │ │ │ │ │ │ │ 5. Block System Enhancement │ │ │ │ │ │ │ │ - Make existing blocks variation-aware │ │ │ │ - Create agency-specific block patterns │ │ │ │ - Implement CSS custom property switching │ │ │ │ │ │ │ │ This creates a single theme that can instantly switch between Editorial and Agency (or │ │ │ │ other) variations through the WordPress admin, eliminating the need for multiple │ │ │ │ themes or child themes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment