Bridge is a WordPress starter theme with a modern development workflow.
- Sass for stylesheets
- Modern JavaScript
- [Gulp]
- [Twig] as a templating engine
- Bridge MVC for passing data to handle custom functions
- CSS framework: Bootstrap 4
See a working example at https://demo.wpextra.co/bridge.
Make sure all dependencies have been installed before moving on:
Install Sage using Composer from your WordPress themes directory (replace your-theme-name
below with the name of your theme):
# @ app/themes/ or wp-content/themes/
$ composer create-project wpextra/bridge your-theme-name
To install the latest development version of Sage, add dev-master
to the end of the command:
$ composer create-project wpextra/bridge your-theme-name dev-master
During theme installation you will have options to update style.css
theme headers, select a CSS framework, and configure Browsersync.
themes/your-theme-name/ # → Root of your Sage based theme
├── app/ # → Theme PHP
│ ├── apis/ # → Controller files
│ ├── controllers/ # → Controller files
│ ├── models/ # → Controller files
│ ├── repository/ # → Controller files
│ ├── persistent/ # → Controller files
│ ├── elements/ # → Your element block
│ │ ├── blocks/ # →
│ │ ├── header/ # →
│ │ ├── footer/ # →
│ │ └── popups/ # →
│ ├── config.php # → Theme customizer setup
│ ├── filters.php # → Theme filters
│ ├── helpers.php # → Helper functions
│ ├── kernel.php # → Helper functions
│ └── setup.php # → Theme setup
├── composer.json # → Autoloading for `app/` files
├── composer.lock # → Composer lock file (never edit)
├── dist/ # → Built theme assets (never edit)
├── node_modules/ # → Node.js packages (never edit)
├── package.json # → Node.js dependencies and scripts
├── resources/ # → Theme assets and templates
│ ├── assets/ # → Front-end assets
│ │ ├── config.json # → Settings for compiled assets
│ │ ├── fonts/ # → Theme fonts
│ │ ├── images/ # → Theme images
│ │ ├── scripts/ # → Theme JS
│ │ └── scss/ # → Theme stylesheets
│ ├── functions.php # → Composer autoloader, theme includes
│ ├── index.php # → Never manually edit
│ ├── screenshot.png # → Theme screenshot for WP admin
│ ├── style.css # → Theme meta information
│ └── views/ # → Theme templates
│ ├── layouts/ # → Base templates
│ └── partials/ # → Partial templates
└── index.php # →
└── archive.php # →
└── page.php # →
└── single.php # →
└── 404.php # →
└── functions.php # →
└── style.scss # →
└── vendor/ # → Composer packages (never edit)
Edit app/setup.php
to enable or disable theme features, setup navigation menus, post thumbnail sizes, and sidebars.
- Run
yarn
from the theme directory to install dependencies - Update
resources/assets/config.json
settings:
yarn start
— Compile assets when file changes are made, start Browsersync sessionyarn build
— Compile and optimize the files in your assets directoryyarn build:production
— Compile assets for production
Contributions are welcome from everyone.
Help support our open-source development efforts by :
Keep track of development and community news.