Home » Layout System

Layout System

Boilerplate layout is organized around shared PHP layout partials, configurable header/footer/sidebar regions, SASS layout files, and JavaScript behavior for responsive asides, sticky navigation, and WordPress admin-bar compensation.

Primary Files

  • partials/layout/top.php – opens the shared page layout
  • partials/layout/bottom.php – closes the shared page layout
  • header.php – WordPress header wrapper
  • footer.php – WordPress footer wrapper
  • sidebar.php – sidebar/widget region output
  • assets/js/theme.js – responsive aside and sticky navbar behavior
  • assets/js/wordpress.js – comment/hash/admin-bar scroll behavior
  • assets/sass/parent_theme/layout/* – layout SASS partials

Top / Bottom Layout Partials

Most templates load the shared layout wrapper through partials/layout/top.php and partials/layout/bottom.php. This keeps repeated page structure out of individual templates.

Use this for: global wrappers, navbar placement, header placement, content columns, sidebar structure, and closing layout markup.

Header

The header system supports configurable full/inner/home header behavior, background cover handling, overlay filters, responsive header sizing, logo output, and description text.

Primary files: header.php, partials/layout/top.php, assets/sass/parent_theme/layout/header.scss

Use this for: site masthead behavior, hero/header presentation, logo sizing, header backgrounds, and responsive header spacing.

Footer

The footer uses runtime theme tokens for background, text, borders, and link states. Footer build/version output may be controlled by theme configuration.

Primary files: footer.php, partials/layout/bottom.php, assets/sass/parent_theme/layout/footer.scss

Use this for: site footer markup, footer links, footer text, build/version output, and footer color behavior.

Content Area

The main content region is wrapped by the shared layout system and styled through the general layout SASS partials. Content width, column behavior, and page wrapping should be handled at the layout layer before template-specific changes are added.

Primary files: partials/layout/top.php, partials/layout/bottom.php, assets/sass/parent_theme/layout/layout.scss

Use this for: page wrappers, column containers, main content sizing, and global layout structure.

Left / Right Asides

Boilerplate supports left and right aside regions. These are used for widget/sidebar content and can become mobile fly-out panels on smaller screens.

Primary files: sidebar.php, partials/layout/top.php, partials/layout/bottom.php, assets/sass/parent_theme/layout/asides.scss

Use this for: sidebar regions, widget columns, responsive side panels, and left/right layout behavior.

Mobile Fly-Out Behavior

Mobile asides are controlled by checkbox toggles and enhanced by JavaScript. When an aside opens, Boilerplate adds a body override state. Clicking the backdrop closes open asides.

Primary file: assets/js/theme.js
Related classes: bp_aside_chk, bp_aside_label, bp_aside_override

Use this for: mobile sidebar toggles, backdrop behavior, and keeping aside UI state synchronized.

Only-One-Aside-Open Behavior

If both left and right asides exist, opening one aside closes the other. This prevents overlapping fly-out states on mobile layouts.

Primary file: assets/js/theme.js

Use this for: stable mobile aside behavior when both sidebar regions are enabled.

Sticky Navbar Behavior

The navbar hides when scrolling down and reappears when scrolling up. It does not hide while Bootstrap dropdowns are expanded.

Primary files: assets/js/theme.js, assets/sass/parent_theme/layout/navbar.scss
Related ID/class: main_nav, offscreen

Use this for: preserving vertical screen space while keeping navigation quickly reachable.

Admin-Bar Compensation

Boilerplate compensates for the WordPress admin bar when handling hash targets and comment jumps. This prevents targets from landing underneath fixed UI.

Primary files: assets/js/theme.js, assets/js/wordpress.js
Related ID: wpadminbar

Use this for: logged-in user navigation, hash links, comment anchors, and moderation message jumps.

Hash and Comment Anchor Handling

Hash navigation is adjusted so sticky navigation and admin-bar offsets do not cover the target. Comment-specific anchors and moderation messages are handled by the WordPress JavaScript layer.

Primary files: assets/js/theme.js, assets/js/wordpress.js

Use this for: anchor links, direct comment links, and post-comment redirect behavior.

Layout SASS Files

  • assets/sass/parent_theme/layout/layout.scss – global wrappers, columns, page/content structure
  • assets/sass/parent_theme/layout/header.scss – header/hero styling
  • assets/sass/parent_theme/layout/footer.scss – footer styling
  • assets/sass/parent_theme/layout/navbar.scss – navbar styling
  • assets/sass/parent_theme/layout/asides.scss – sidebar/aside layout and responsive fly-outs
  • assets/sass/parent_theme/layout/typography.scss – responsive type and baseline rhythm

Related Configuration

Layout behavior is controlled through config.php and layout variables in assets/sass/parent_theme/variables.scss.

Use this for: enabling/disabling layout regions, controlling navbar/header/sidebar behavior, changing layout widths, and tuning responsive breakpoints.

© 2026 Boilerplate