DigiFlash Theme Architecture

DigiFlash follows the WordPress block theme architecture, utilizing the modern site editor and full site editing capabilities. The theme is built entirely around blocks, templates, and patterns, with no reliance on traditional PHP-based theme files for layout rendering.

File Structure

The DigiFlash theme uses a specific directory structure that aligns with WordPress block theme standards:

digiflash/
├── assets/
│   ├── css/
│   └── images/
│   └── js/
├── includes/
│   ├── admin/
│   │   ├── dashboard.php
│   ├── class-digiflash-dashboard.php
│   └── class-digiflash-review-notice.php
├── parts/
│   ├── header.html
│   └── footer.html
├── patterns/
│   ├── hero-1.php
│   ├── hero-2.php
│   ├── features-1.php
│   ├── about-1.php
│   └── [additional patterns]
├── styles/
│   ├── autumn-leaves.json
│   ├── cherry-blossom.json
│   ├── cosmic-purple.json
│   ├── crimson-fire.json
│   └── [additional styles]
├── templates/
│   └── 404.html
│   ├── archive.html
│   ├── blank.html
│   ├── front-page.html
│   ├── home.html
│   ├── index.html
│   ├── no-title-and-spacing.html
│   ├── no-title.html
│   ├── page.html
│   ├── search.html
│   └── single.html
├── functions.php
├── style.css
├── theme.json
└── readme.txt
└── screenshot.png

Core Components

theme.json

The theme.json file serves as the central configuration for DigiFlash. It defines:

• Color palettes and gradients
• Typography settings and font families
• Spacing scale
• Layout settings (content width, wide width)
• Shadow presets
• Custom CSS variables
• Block-specific styles
• Template and pattern registration

All global styles and design tokens are managed through this file, making DigiFlash’s visual system centralized and consistent.

Templates

Templates are stored as HTML files in the /templates directory. DigiFlash includes:

• 404.html: Error page template
• archive.html: Archive listing template
• blank.html: A blank template, no header or footer
• front-page.html: You static homepage
• home.html: You blog page
• index.html: Default fallback template
• no-title-and-spacing.html: Template without page header and top/bottom spacing
• no-title.html: Template without page header
• page.html: Page template
• search.html: Search results page template
• single.html: Single post template

Each template uses block markup and references template parts. Templates can be edited directly through the Site Editor without modifying files.

Template Parts

Template parts are reusable sections stored in /parts:

• header.html: Site header with navigation
• footer.html: Site footer with widgets

These parts are called within templates using the template-part block: <!-- wp:template-part {"slug":"header","tagName":"header"} /-->

Block Patterns

DigiFlash includes a comprehensive pattern library in the /patterns directory. Patterns are written as PHP files that return block markup. Each pattern:

• Registers with a unique slug (e.g., digiflash/hero-1)
• Belongs to a pattern category
• Contains complete block markup
• Can be inserted into any template or page

Pattern categories are registered in functions.php and include: hero, features, about, cta, services, testimonials, pricing, and FAQ.

functions.php

The functions.php file handles:

• Enqueueing stylesheets (digiflash_styles())
• Loading editor styles (digiflash_editor_style())
• Registering block pattern categories (digiflash_register_block_patterns())
• Theme setup and support features

DigiFlash uses action hooks like wp_enqueue_scripts and after_setup_theme to initialize these functions. The file follows WordPress coding standards and includes conditional checks for function existence.

Assets

The /assets directory contains:

• CSS files: Minified and unminified versions for both frontend (style.css) and editor (editor-style.css)
• Images: Theme screenshots, pattern images, and other visual assets

CSS files are conditionally loaded based on SCRIPT_DEBUG constant – unminified during development, minified in production.

Loading Mechanism

DigiFlash’s loading sequence:

1. WordPress loads style.css (theme header information)
2. functions.php executes and registers hooks
3. theme.json provides configuration to the Site Editor
4. Templates render with block markup
5. Template parts are inserted where referenced
6. CSS assets are enqueued in the document head
7. Block patterns become available in the inserter

Block-Based Architecture

Every visual element in DigiFlash is a block. The theme contains no traditional template hierarchy PHP files (like single.php or page.php). Instead:

• Templates use HTML files with block markup
• Block attributes control styling and layout
• Global styles from theme.json cascade to blocks
• Custom CSS can be added through the Site Editor or custom code

This architecture makes DigiFlash fully compatible with the WordPress Site Editor and enables visual editing without code.

Hooks and Filters

DigiFlash provides minimal custom hooks since most customization happens through the Site Editor. The primary hooks used are standard WordPress hooks:

• wp_enqueue_scripts: For loading theme assets
• after_setup_theme: For theme setup and editor styles
• Standard block hooks for pattern registration

Developers can extend DigiFlash by hooking into these WordPress core hooks or by creating child themes that override templates and patterns.