bonnier / wype-theme
WordPress starter theme with a modern development workflow
Installs: 4
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 6
Forks: 0
Language:HTML
Type:wordpress-theme
Requires
- php: >=7.1
- composer/installers: ~1.0
- guzzlehttp/guzzle: ^6.3
- roots/sage-lib: ~9.0.7
- soberwp/controller: ~2.1.0
- symfony/http-foundation: ^4.2
Requires (Dev)
- johnpbloch/wordpress: ^5.1
- phpunit/phpunit: ^7.5
- roots/sage-installer: ~1.6
- squizlabs/php_codesniffer: ^2.8.0
This package is not auto-updated.
Last update: 2024-10-29 17:04:48 UTC
README
Sage is a WordPress starter theme with a modern development workflow.
Features
- Sass for stylesheets
- Modern JavaScript
- Webpack for compiling assets, optimizing images, and concatenating and minifying files
- Browsersync for synchronized browser testing
- Blade as a templating engine
- Controller for passing data to Blade templates
- CSS framework (optional): Bootstrap 4, Bulma, Foundation, Tachyons, Tailwind
See a working example at roots-example-project.com.
Requirements
Make sure all dependencies have been installed before moving on:
Theme installation
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 roots/sage your-theme-name
To install the latest development version of Sage, add dev-master
to the end of the command:
$ composer create-project roots/sage 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.
Theme structure
themes/your-theme-name/ # → Root of your Sage based theme ├── app/ # → Theme PHP │ ├── Controllers/ # → Controller files │ ├── admin.php # → Theme customizer setup │ ├── filters.php # → Theme filters │ ├── helpers.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 │ │ ├── build/ # → Webpack and ESLint config │ │ ├── fonts/ # → Theme fonts │ │ ├── images/ # → Theme images │ │ ├── scripts/ # → Theme JS │ │ └── styles/ # → 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 └── vendor/ # → Composer packages (never edit)
Theme setup
Edit app/setup.php
to enable or disable theme features, setup navigation menus, post thumbnail sizes, and sidebars.
Theme development
- Run
yarn
from the theme directory to install dependencies - Update
resources/assets/config.json
settings:devUrl
should reflect your local development hostnamepublicPath
should reflect your WordPress folder structure (/wp-content/themes/sage
for non-Bedrock installs)
Build commands
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
Documentation
Contributing
Contributions are welcome from everyone. We have contributing guidelines to help you get started.
Sage sponsors
Help support our open-source development efforts by becoming a patron.
Community
Keep track of development and community news.
- Participate on the Roots Discourse
- Follow @rootswp on Twitter
- Read and subscribe to the Roots Blog
- Subscribe to the Roots Newsletter
- Listen to the Roots Radio podcast