Asset Loading System
Conditional CSS/JS loading with filemtime() cache busting comes from /inc/core/assets.php, which guards every enqueue with file_exists() checks and context-aware logic.
CSS Architecture
| File | Context | Entry Point |
|---|---|---|
assets/css/root.css |
All pages | extrachill_enqueue_root_styles() (priority 5) |
style.css |
All pages | extrachill_modify_default_style() (priority 20) replaces the default WordPress style |
assets/css/taxonomy-badges.css |
All pages that render taxonomy badges | extrachill_enqueue_taxonomy_badges() (priority 10) |
assets/css/single-post.css |
Posts, newsletter | extrachill_enqueue_single_post_styles() (priority 20) |
assets/css/archive.css |
Archive, search, and blog archive (/all) |
extrachill_enqueue_archive_styles() (priority 20) |
assets/css/search.css |
Search results | extrachill_enqueue_search_styles() (priority 20) |
assets/css/sidebar.css |
Sidebar-enabled singular/post templates, 404 pages | extrachill_enqueue_sidebar_styles() (priority 20; only when extrachill_sidebar_content filter returns false) |
assets/css/shared-tabs.css |
Shared tab components | Registered via extrachill_register_shared_tabs() (priority 5) |
assets/css/editor-style.css |
Block editor | extrachill_enqueue_admin_styles() (via admin_enqueue_scripts when editing posts) |
JavaScript Architecture
| Script | Context | Entry Point |
|---|---|---|
assets/js/nav-menu.js |
Header search overlay open/close | extrachill_enqueue_navigation_assets() |
assets/js/shared-tabs.js |
Shared tab components with desktop/mobile logic | Registered alongside shared-tabs.css in extrachill_register_shared_tabs() |
| (none) | View tracking | Not present in current theme assets; the theme does not enqueue a view-tracking script. |
Header Search Overlay Assets
extrachill_enqueue_navigation_assets() loads nav-menu.js on every page and relies on filemtime() for versions so deployment changes flush caches without touching functions.php.
Shared Tabs & Sidebar Assets
extrachill_register_shared_tabs() leaves the shared tab styles/scripts registered so templates or plugins can enqueue them when needed; the JavaScript manages desktop and accordion behaviors, hash updates, and emits the sharedTabActivated event for integrations.
Sidebar assets (including sidebar.css) load via extrachill_enqueue_sidebar_styles() only when no extrachill_sidebar_content override replaces the sidebar, ensuring widgets render styled content without extra overhead.
View Tracking
The theme does not enqueue a dedicated view-tracking script. View-count storage (ec_post_views) exists for archive sorting, but event capture is handled outside the theme.
Share Assets
inc/core/assets.php registers assets/css/share.css and assets/js/share.js (via extrachill_register_share_assets()), so templates/plugins can enqueue extrachill-share when needed.
Admin/Editor Styles
extrachill_enqueue_admin_styles() enqueues root.css and editor-style.css for post editing screens (post.php, post-new.php), mirroring the frontend design tokens for a consistent editing experience.
Cache Busting & Priorities
Every style and script uses filemtime() on the source file for the version argument, so browsers refresh when files change. The enqueue priorities (5, 10, 20) guarantee root variables load before dependent styles, and the navigation/styles enqueues avoid redundant loading by checking for contextual flags (e.g., is_archive(), is_search(), post types).
Performance Benefits
- Conditional Loading: CSS/JS only executes when necessary (archive styles on archives, sidebar styles when widgets appear)
- Dependency Safety: Root variables come first, ensuring derived styles inherit the correct custom properties
- Cache Busting: Files emit new version numbers whenever their modification time changes
- Minimal Overhead: Each enqueue guards file existence to avoid 404s
- Shared Components: Shared tabs CSS/JS are registered centrally so downstream templates can opt in while keeping their behaviors consistent
Benefit: Browser cache automatically invalidates when files change.
CSS Loading Functions
extrachill_enqueue_root_styles()
Loads root CSS variables and theme colors.
Priority: 5 (loads first)
Dependencies: None
Hook: wp_enqueue_scripts
extrachill_enqueue_main_styles()
Loads badge color styles.
Priority: 10
Dependencies: extrachill-root
Hook: wp_enqueue_scripts
extrachill_modify_default_style()
Loads main theme stylesheet.
Priority: 20 (loads after root)
Dependencies: extrachill-root
Hook: wp_enqueue_scripts
extrachill_enqueue_single_post_styles()
Loads single post styles.
Condition: is_singular('post')
File: /assets/css/single-post.css
Dependencies: extrachill-root, extrachill-style
extrachill_enqueue_archive_styles()
Loads archive page styles.
Condition: is_archive() || is_search() || get_query_var('extrachill_blog_archive')
File: /assets/css/archive.css
Dependencies: extrachill-root, extrachill-style
extrachill_enqueue_search_styles()
Loads search result styles.
Condition: is_search()
File: /assets/css/search.css
Dependencies: extrachill-root, extrachill-style
extrachill_enqueue_shared_tabs()
Registers shared tab styles and scripts so templates or plugins can enqueue them on demand.
Files: shared-tabs.css, shared-tabs.js
Dependencies: extrachill-root for CSS, wp-polyfill and vanilla JS for scripts (no jQuery)
JavaScript Loading
Navigation Scripts
function extrachill_enqueue_navigation_assets() {
wp_enqueue_style( 'extrachill-nav-styles', ... );
wp_enqueue_script( 'extrachill-nav-menu', ... );
}
Files: nav-menu.js
Context: All pages
Load Position: Footer (true parameter)
Admin/Editor Styles
function extrachill_enqueue_admin_styles($hook) {
if ($hook == 'post.php' || $hook == 'post-new.php') {
wp_enqueue_style( 'extrachill-admin-root', ... );
wp_enqueue_style( 'extrachill-admin-editor', ... );
}
}
Hook: admin_enqueue_scripts
Files: root.css, editor-style.css
Context: Post editor pages only
Loading Priority
- Priority 5: Root CSS variables
- Priority 10: Badge colors
- Priority 20: Main stylesheet, page-specific CSS
- Default: Navigation, utility styles
File Existence Checks
All enqueue functions check file existence before loading:
$css_path = get_stylesheet_directory() . '/assets/css/archive.css';
if ( file_exists( $css_path ) ) {
wp_enqueue_style( ... );
}
Performance Benefits
Conditional Loading: CSS/JS only loads when needed
Dependency Management: Proper load order ensures root variables available
Cache Busting: Automatic version updates on file changes
Minimal Overhead: File existence checks prevent 404 errors
Disabling Sticky Header
The sticky header can be disabled via filter:
// Disable sticky header
add_filter( 'extrachill_enable_sticky_header', '__return_false' );
Asset Directory Structure
assets/
/css/
root.css # CSS variables, theme colors
style.css # Main stylesheet (loaded via get_stylesheet_uri)
taxonomy-badges.css # Taxonomy badge colors
single-post.css # Single post styles
archive.css # Archive page styles
search.css # Search result styles
shared-tabs.css # Tab interface styles
share.css # Social share buttons
sidebar.css # Sidebar component styles
editor-style.css # Block editor styles
embed.css # Embed iframe styles
network-dropdown.css # Network dropdown styles
/js/
nav-menu.js # Header search overlay
shared-tabs.js # Tab interface logic
mini-dropdown.js # Small dropdown helper (dependency for share)
share.js # Share button interactions
/fonts/
extrachill.svg # Icon sprite with QR/download icons