Bootstrap 5 Native WordPress Theme

Boilerplate has supported Bootstrap since the Bootstrap 3 era, and one of the long-term goals has always been the same: use Bootstrap as a stable support layer without letting it become a design prison.

That distinction matters. Bootstrap is excellent at providing a shared vocabulary for grids, containers, forms, buttons, navbars, dropdowns, utilities, and common interface patterns. But a WordPress theme still needs to feel like a WordPress theme. It needs to support menus, widgets, archives, plugins, editor content, comments, media, and child-theme customization without fighting the framework underneath it.

Boilerplate’s Bootstrap integration exists to make those two worlds cooperate.

Bootstrap as a foundation

Bootstrap gives Boilerplate a proven front-end foundation, but the theme does not accept Bootstrap’s defaults blindly.

Compile-time Bootstrap defaults are adjusted in assets/sass/parent_theme/bootstrap/variables.scss. This is where framework-level decisions belong: typography, line heights, spacers, colors, link defaults, navbar defaults, pagination colors, dropdown defaults, and other values that need to exist before Bootstrap compiles.

That lets Boilerplate modernize Bootstrap while still making it obey the parent theme’s design system.

Runtime alignment

After Bootstrap compiles, Boilerplate continues shaping the output through assets/sass/parent_theme/bootstrap/overrides.scss.

This layer handles the practical theme work: border-token alignment, rhythm-based spacing, form control colors, button behavior, table colors, dropdown cleanup, pagination polish, right-aligned dropdown fixes, and light/dark-aware runtime variables.

WordPress menus need help

Navigation is where the WordPress/Bootstrap gap becomes obvious.

WordPress menus are managed through the admin. Bootstrap navbars expect a specific markup structure, specific classes, dropdown attributes, and accessible expanded/collapsed states. A practical theme needs both: admin-manageable menus and Bootstrap-compatible output.

Boilerplate handles that through lib/bootstrap_navwalker.php. The navwalker translates WordPress menu data into Bootstrap 5 navbar markup, including dropdown behavior, headers, dividers, disabled items, and accessibility-minded menu output.

This keeps menus editable from WordPress while still producing markup Bootstrap can actually use.

Navbar controls belong in menus too

Boilerplate also treats some navbar controls as admin-placeable menu items.

Instead of hardcoding every utility control into the navbar partial, special Custom Link URLs are converted into theme controls through lib/navbar_special_items.php. That is how color mode toggles and navbar search can live inside the WordPress menu editor while still rendering as proper theme-owned controls.

• #bp-color-mode-toggle
• #bp-color-mode-toggle-with-text
• #bp-navbar-search
• #bp-navbar-search-with-text

That approach keeps the navbar flexible without forcing developers to fork the navbar template every time a project wants search or a light/dark toggle in a different position.

The smart sticky navbar

The navbar is also enhanced with small behavior that makes the theme feel more polished.

In assets/js/theme.js, the navbar hides when the user scrolls down and reappears when the user scrolls up. It avoids hiding while dropdowns are expanded, compensates for WordPress admin bar behavior, and handles hash navigation so anchor targets do not land awkwardly underneath fixed UI.

This is exactly the kind of feature Boilerplate is designed to carry in the parent theme: subtle, reusable, and easy to forget about when it works correctly.