PHPackages 8bit-echo/sage - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. 8bit-echo/sage ActiveWordpress-theme[Utility & Helpers](/categories/utility) 8bit-echo/sage ============== WordPress starter theme with Vite workflow 9.0.9(4y ago)652794[2 issues](https://github.com/8bit-echo/sage-starter/issues)[5 PRs](https://github.com/8bit-echo/sage-starter/pulls)MITPHPPHP >=7.1 Since May 29Pushed 3y ago2 watchersCompare [ Source](https://github.com/8bit-echo/sage-starter)[ Packagist](https://packagist.org/packages/8bit-echo/sage)[ Docs](https://roots.io/sage/)[ RSS](/packages/8bit-echo-sage/feed)WikiDiscussions master Synced 6d ago READMEChangelog (1)Dependencies (7)Versions (7)Used By (0) Sage + Vite Theme ================= [](#sage--vite-theme) [![screenshot](https://user-images.githubusercontent.com/8560685/120092392-8f4ec700-c0cf-11eb-80a3-929929ec9861.png)](https://user-images.githubusercontent.com/8560685/120092392-8f4ec700-c0cf-11eb-80a3-929929ec9861.png) Sage is a WordPress starter theme with a modern development workflow. Motivations for WordPress + Vite ================================ [](#motivations-for-wordpress--vite) This is a modified version of [Sage](https://roots.io/sage/) combined with github user [andrefilipe's vite configuration](https://github.com/andrefelipe/vite-php-setup) that allows developers to use Vite in a WordPress site. It works by serving assets from localhost:3000 during development for HMR, and from the dist folder when compiled for production. It uses a simple abstraction around wp\_enqueue\_script to make registering and loading assets as easy as possible. Because Vite is incredibly fast and supports HMR, you no longer need to reload the entire page to see your js, css changes. Additionally any changes to php files or blade templates will automatically trigger the browser to refresh the page for you. I believe that this is a much better developer experience than using the built-in sage tools, or even laravel-mix. Additionally, all top-level files are automatically added as entry points, so there is less to manage during development, and you can get right to coding. WordPress has enough going on without needing to worry about your front-end as well. Features -------- [](#features) - [Vite](https://vitejs.dev) tooling with support for TypeScript, React, and Vue, and Hot Module Replacement (HMR) out-of-the-box. - Scss for stylesheets - Image lazy loading. - Basic styles - Modern JavaScript - [Blade](https://laravel.com/docs/5.6/blade) as a templating engine - [Controller](https://github.com/soberwp/controller) for passing data to Blade templates - No IE Support! Don't want it - not adding it. Requirements ------------ [](#requirements) Make sure all dependencies have been installed before moving on: - [WordPress](https://wordpress.org/) >= 4.7 - [PHP](https://secure.php.net/manual/en/install.php) >= 7.1.3 (with [`php-mbstring`](https://secure.php.net/manual/en/book.mbstring.php) enabled) - [Composer](https://getcomposer.org/download/) - [Node.js](http://nodejs.org/) >= 8.0.0 - [Yarn](https://yarnpkg.com/en/docs/install) Theme installation ------------------ [](#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 8bit-echo/sage your-theme-name ``` To install the latest development version of Sage, add `dev-master` to the end of the command: ``` $ composer create-project 8bit-echo/sage your-theme-name dev-master ``` Theme structure --------------- [](#theme-structure) ``` themes/your-theme-name/ # → Root of your Sage based theme ├── app/ # → Theme PHP │ ├── Controllers/ # → Controller files │ ├── Classes/ # → Other PHP 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 │ │ ├── fonts/ # → Theme fonts │ │ ├── images/ # → Theme images │ │ ├── scripts/ # → Theme JS │ │ └── styles/ # → Theme stylesheets │ ├── functions.php # → Composer autoloader, theme includes │ ├── functions-default.php # → Opinionated default functions. │ ├── functions-app.php # → Write all your custom functionality here. │ ├── 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 ----------- [](#theme-setup) Edit `app/setup.php` to enable or disable theme features, setup navigation menus, post thumbnail sizes, and sidebars. Rename `.env.example` to `.env` and choose one of the preset values for `APP_ENV`. **NOTE: THIS VALUE WILL CHANGE AUTOMATICALLY WHEN YOU RUN THE YARN SCRIPTS BELOW.** Theme Development ----------------- [](#theme-development) - Run `yarn` from the theme directory to install dependencies - By default all top-level files in the `scripts` directory will be used as entry points for the build process. - to register a script on a page, go to the Page's Controller and in the `__before` method, write ``` Vite::register('scriptName.ts'); ``` This line is what enables HMR to work during development and the production scripts to be registered directly in production. ### Build commands [](#build-commands) - `yarn dev` — Compile assets when file changes are made with HMR. - `yarn build` — Compile and optimize the files in your assets directory Documentation ------------- [](#documentation) - [Sage documentation](https://roots.io/sage/docs/) - [Controller documentation](https://github.com/soberwp/controller#usage) - [Vite Documentation](https://vitejs.dev/guide/) ### Health Score 29 — LowBetter than 59% of packages Maintenance19 Infrequent updates — may be unmaintained Popularity25 Limited adoption so far Community12 Small or concentrated contributor base Maturity51 Maturing project, gaining track record Bus Factor1 Top contributor holds 80% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 1814d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/b90d67136a5b6007379169e1bcbce3006dcea76fe5e45fe6cb70e3be9cda1095?d=identicon)[8bit-echo](/maintainers/8bit-echo) --- Top Contributors [![8bit-echo](https://avatars.githubusercontent.com/u/8560685?v=4)](https://github.com/8bit-echo "8bit-echo (12 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (3 commits)") --- Tags sagevitevitejswordpress-themewordpressvitesage ### Code Quality Code StylePHP\_CodeSniffer ### Embed Badge ![Health badge](/badges/8bit-echo-sage/health.svg) ``` [![Health](https://phpackages.com/badges/8bit-echo-sage/health.svg)](https://phpackages.com/packages/8bit-echo-sage) ``` ### Alternatives [roots/bedrock WordPress boilerplate with Composer, easier configuration, and an improved folder structure 6.5k441.8k2](/packages/roots-bedrock)[roots/acorn Framework for Roots WordPress projects built with Laravel components. 9682.1M97](/packages/roots-acorn)[log1x/pagi A better WordPress pagination. 59105.4k](/packages/log1x-pagi)[aedart/athenaeum Athenaeum is a mono repository; a collection of various PHP packages 245.2k](/packages/aedart-athenaeum) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)