Sage is a WordPress starter theme with a modern development workflow.
- Sass for stylesheets
- Modern JavaScript
- Laravel Mix for compiling assets and concatenating and minifying files
- Browsersync for synchronized browser testing
- Blade as a templating engine
- Tailwind CSS Utility based CSS framework
- Vue JS framework
Make sure all dependencies have been installed before moving on:
This readme assumes you are familiar with Sage and Bedrock structure for Wordpress. If not, head over to https://roots.io/ to learn more.
# @ app/themes/ or wp-content/themes/ $ git clone git@github.com:alithedeveloper/sage-vue-tailwind.git $ cd sage-vue-tailwind $ composer install $ yarn $ yarn start / build / build:productionthemes/your-theme-name/ # → Root of your Sage based theme ├── composer.json # → Autoloading for `app/` files ├── composer.lock # → Composer lock file (never edit) ├── dist/ # → Built theme assets (never edit) ├── functions.php # → Composer autoloader, Acorn bootloader ├── index.php # → Never manually edit ├── node_modules/ # → Node.js packages (never edit) ├── package.json # → Node.js dependencies and scripts ├── screenshot.png # → Theme screenshot for WP admin ├── style.css # → Theme meta information ├── app/ # → Theme PHP │ ├── Composers/ # → View composers │ ├── Providers/ # → Service providers │ ├── admin.php # → Theme customizer setup │ ├── filters.php # → Theme filters │ ├── helpers.php # → Helper functions │ └── setup.php # → Theme setup ├── config/ # → Config files │ ├── app.php # → Application configuration │ ├── assets.php # → Asset configuration │ ├── filesystems.php # → Filesystems configuration │ ├── logging.php # → Logging configuration │ └── view.php # → View configuration ├── dist/ # → Built theme assets (never edit) ├── resources/ # → Theme assets and templates │ ├── assets/ # → Front-end assets │ │ ├── fonts/ # → Theme fonts │ │ ├── images/ # → Theme images │ │ ├── scripts/ # → Theme JS │ │ └── styles/ # → Theme stylesheets │ └── views/ # → Theme templates │ ├── layouts/ # → Base templates │ └── partials/ # → Partial templates ├── storage/ # → Storage location for cache (never edit) └── vendor/ # → Composer packages (never edit)Edit app/setup.php to enable or disable theme features, setup navigation menus, post thumbnail sizes, and sidebars.
- Run
yarnfrom the theme directory to install dependencies - Update
webpack.mix.jswith your local dev URL
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