You've already forked wp-bootstrap
magdev
cc8dc9d357
Full Design Editor compatibility with custom block categories, page templates, header/footer variations, and navigation styles. Both FSE (admin) and Twig (frontend) sides kept in sync. Co-Authored-By: Claude <noreply@anthropic.com>
143 lines
5.1 KiB
Markdown
143 lines
5.1 KiB
Markdown
# WP Bootstrap
|
|
|
|
A modern WordPress Block Theme built from scratch with Bootstrap 5. Features responsive design, dark mode support, Twig template rendering, and full compatibility with the WordPress Site Editor.
|
|
|
|
## Features
|
|
|
|
- **Bootstrap 5 Frontend** -- Proper Bootstrap 5 HTML (navbar, cards, pagination, grid) rendered via Twig templates
|
|
- **Dark Mode** -- Toggle with localStorage persistence and `prefers-color-scheme` support
|
|
- **Full Site Editing** -- Compatible with the WordPress Site Editor for admin editing
|
|
- **Block Patterns** -- 30+ patterns across 10 categories (hero, features, CTA, testimonials, pricing, contact, text, layout, components, navigation)
|
|
- **Block Styles** -- 17 custom styles mapping Bootstrap components to WordPress blocks
|
|
- **Style Variations** -- 4 color schemes: Ocean, Forest, Sunset, Midnight
|
|
- **Custom Templates** -- Landing (no header/footer), full-width, hero, sidebar page templates
|
|
- **Header/Footer Variations** -- Centered, transparent, minimal, multi-column variants
|
|
- **Navigation Styles** -- Dark navbar, offcanvas mobile navigation
|
|
- **Design Editor** -- Full compatibility with the WordPress Site Editor
|
|
- **Responsive** -- Mobile-first design with Bootstrap's responsive grid
|
|
- **Translation Ready** -- Full i18n support with `en_US` and `de_CH` translations
|
|
|
|
## Requirements
|
|
|
|
- WordPress 6.7 or higher
|
|
- PHP 8.3 or higher
|
|
- Composer
|
|
- Node.js 20+
|
|
|
|
## Installation
|
|
|
|
### From Release Package
|
|
|
|
1. Download the latest `.zip` from [Releases](https://src.bundespruefstelle.ch/magdev/wp-bootstrap/releases)
|
|
2. Go to WordPress Admin > Appearance > Themes > Add New > Upload Theme
|
|
3. Upload the ZIP file and activate
|
|
|
|
### From Source
|
|
|
|
```bash
|
|
git clone ssh://git@src.bundespruefstelle.ch:2022/magdev/wp-bootstrap.git
|
|
cd wp-bootstrap
|
|
composer install
|
|
npm install
|
|
npm run build
|
|
```
|
|
|
|
Activate the theme in **Appearance > Themes** in the WordPress admin.
|
|
|
|
## Development
|
|
|
|
### Prerequisites
|
|
|
|
- Node.js 20+
|
|
- npm
|
|
- Composer
|
|
- PHP 8.3+
|
|
|
|
### Build Commands
|
|
|
|
| Command | Description |
|
|
| --- | --- |
|
|
| `npm run build` | Full production build (copy JS, compile SCSS, minify CSS) |
|
|
| `npm run dev` | Watch SCSS files and recompile on changes |
|
|
| `npm run scss` | Compile SCSS only |
|
|
| `npm run postcss` | Minify CSS with Autoprefixer and cssnano |
|
|
| `composer install` | Install PHP dependencies (Twig) |
|
|
|
|
### Build Pipeline
|
|
|
|
1. `copy:js` -- Copy Bootstrap JS bundle from `node_modules` to `assets/js/`
|
|
2. `copy:theme-js` -- Copy theme JS (dark-mode.js) from `src/js/` to `assets/js/`
|
|
3. `scss` -- Compile SCSS (`src/scss/`) to CSS (`assets/css/`)
|
|
4. `postcss` -- Autoprefixer + cssnano minification to `assets/css/style.min.css`
|
|
|
|
## Architecture
|
|
|
|
### Frontend Rendering
|
|
|
|
The theme uses a dual-rendering approach:
|
|
|
|
- **Site Editor (admin):** FSE block templates in `templates/` and `parts/` for visual editing
|
|
- **Frontend (public):** Twig templates in `views/` render Bootstrap 5 HTML via the `template_redirect` hook
|
|
|
|
The `TemplateController` intercepts frontend requests and renders the appropriate Twig template with data gathered by `ContextBuilder`. FSE templates remain untouched for the WordPress admin editor.
|
|
|
|
### Key PHP Classes
|
|
|
|
| Class | Purpose |
|
|
| --- | --- |
|
|
| `TwigService` | Singleton Twig environment with WordPress functions and globals |
|
|
| `TemplateController` | Hooks `template_redirect`, resolves and renders Twig templates |
|
|
| `ContextBuilder` | Gathers WordPress data (posts, menus, pagination, comments, sidebar) |
|
|
| `NavWalker` | Converts flat menu items to nested tree for Bootstrap dropdowns |
|
|
|
|
### Navigation Menus
|
|
|
|
Register menus in **Appearance > Menus**:
|
|
|
|
- **Primary Navigation** -- Displayed in the Bootstrap navbar with dropdown support
|
|
- **Footer Navigation** -- Displayed in the footer
|
|
|
|
If no menu is assigned, the primary location falls back to listing published pages.
|
|
|
|
### Project Structure
|
|
|
|
```txt
|
|
wp-bootstrap/
|
|
+-- assets/ Compiled CSS, JS, fonts
|
|
+-- inc/
|
|
| +-- Template/ TemplateController, ContextBuilder, NavWalker
|
|
| +-- Twig/ TwigService singleton
|
|
+-- languages/ Translation files (.pot, .po)
|
|
+-- patterns/ Block patterns (PHP)
|
|
+-- parts/ FSE template parts (header, footer, sidebar, variants)
|
|
+-- src/
|
|
| +-- js/ Source JavaScript
|
|
| +-- scss/ Source SCSS
|
|
+-- styles/ Style variations (JSON)
|
|
+-- templates/ FSE templates (HTML)
|
|
+-- views/ Twig templates (Bootstrap 5 HTML)
|
|
| +-- base.html.twig
|
|
| +-- pages/ Page templates (index, single, page, archive, search, 404)
|
|
| +-- partials/ Reusable parts (header, footer, pagination, sidebar, etc.)
|
|
| +-- components/ UI components (post card, post loop)
|
|
+-- functions.php Theme bootstrap
|
|
+-- style.css Theme metadata
|
|
+-- theme.json Design tokens and settings
|
|
```
|
|
|
|
## Technology Stack
|
|
|
|
- **PHP 8.3+** with PSR-4 autoloading
|
|
- **Twig 3.0** via Composer
|
|
- **Bootstrap 5.3+** CSS & JS (served locally)
|
|
- **Dart Sass** for SCSS compilation
|
|
- **PostCSS** with Autoprefixer and cssnano
|
|
|
|
## License
|
|
|
|
GPL-2.0-or-later. See <http://www.gnu.org/licenses/gpl-2.0.html>.
|
|
|
|
## Author
|
|
|
|
Marco Graetsch - <https://src.bundespruefstelle.ch/magdev>
|