SagePress is a free, open-source WordPress starter theme boilerplate for developers. Built on Roots Sage 10, it combines Laravel Blade templating, Tailwind CSS v4, and Vite into a clean, modern, and performance-focused WordPress theme development workflow — with zero bloat.
Perfect for developers building WordPress blogs, business websites, portfolios, and WooCommerce stores who want a professional, maintainable codebase.
- 🔧 Clean, efficient theme templating with Laravel Blade
- ⚡️ Lightning-fast front-end workflow powered by Vite with HMR
- 🎨 Out of the box support for Tailwind CSS v4
- 🚀 Harness the power of Laravel with Acorn 6 integration
- 📦 Block editor (Gutenberg) support built-in
- 🌍 Translation ready with full i18n support
- ♿ Accessible — ARIA roles, skip links, keyboard navigation
- 🔍 SEO ready — semantic HTML5, schema-friendly structure
- 🚫 No jQuery — modern vanilla JS only
- 🔧 PSR-4 autoloading, service providers, view composers
| Requirement | Version |
|---|---|
| WordPress | 6.6 or higher |
| PHP | 8.3 or higher |
| Node.js | 20.19.0 or 22.12.0+ |
| Composer | 2.0 or higher |
| Roots Acorn | 6.0 |
cd wp-content/themes/
git clone https://github.com/nazmunsakib/SagePress.git sagepress
cd sagepresscomposer installnpm installUpdate the APP_URL in vite.config.js to match your local development URL:
if (! process.env.APP_URL) {
process.env.APP_URL = 'http://your-local-site.test'; // 👈 Change this
}# Production
npm run build
# Development with hot reloading
npm run devGo to WordPress Admin → Appearance → Themes and activate SagePress.
themes/sagepress/
├── app/ # → Theme PHP (business logic)
│ ├── Providers/ # → Service providers
│ ├── View/ # → View composers & models
│ │ └── Composers/
│ ├── filters.php # → WordPress filter hooks
│ └── setup.php # → Theme setup (menus, sidebars, supports)
├── public/ # → Built assets (auto-generated, do not edit)
│ └── build/
│ └── manifest.json
├── resources/ # → Source files (edit these)
│ ├── css/
│ │ ├── app.css # → Main stylesheet entry
│ │ └── editor.css # → Block editor styles
│ ├── js/
│ │ ├── app.js # → Main JS entry
│ │ └── editor.js # → Block editor JS
│ ├── fonts/ # → Custom fonts
│ ├── images/ # → Theme images
│ └── views/ # → Blade templates
│ ├── components/ # → Reusable UI components
│ ├── forms/ # → Form templates
│ ├── layouts/ # → Base layout wrappers
│ │ └── app.blade.php
│ └── partials/ # → Header, footer, sidebar, etc.
├── vendor/ # → Composer packages (do not edit)
├── node_modules/ # → Node packages (do not edit)
├── composer.json # → PHP dependencies & autoloading
├── package.json # → Node dependencies & scripts
├── functions.php # → Theme bootloader
├── index.php # → Theme entry point
├── style.css # → Theme metadata
└── vite.config.js # → Vite bundler config
| Template | File | Description |
|---|---|---|
| Base Layout | layouts/app.blade.php |
Main HTML wrapper |
| Header | partials/header.blade.php |
Site header & navigation |
| Footer | partials/footer.blade.php |
Site footer |
| Sidebar | partials/sidebar.blade.php |
Widget sidebar |
| Navigation | partials/navigation.blade.php |
Post pagination |
| Blog Index | index.blade.php |
Posts listing page |
| Single Post | single.blade.php |
Individual blog post |
| Default Page | page.blade.php |
Static page template |
| Archive | archive.blade.php |
Category / tag / date archive |
| Search | search.blade.php |
Search results page |
| 404 | 404.blade.php |
Not found page |
Customize your design tokens in resources/css/app.css:
@import "tailwindcss";
@theme {
--color-primary: #2563eb;
--font-sans: 'Inter', system-ui, sans-serif;
}In app/setup.php:
register_nav_menus([
'primary' => __('Primary Navigation', 'sagepress'),
'footer' => __('Footer Navigation', 'sagepress'),
]);register_sidebar([
'name' => __('Primary Sidebar', 'sagepress'),
'id' => 'sidebar-primary',
]);<?php
namespace App\View\Composers;
use Roots\Acorn\View\Composer;
class MyComposer extends Composer
{
protected static $views = ['partials.my-partial'];
public function with(): array
{
return [
'data' => $this->getData(),
];
}
}| Command | Description |
|---|---|
npm run dev |
Start Vite dev server with HMR |
npm run build |
Build assets for production |
npm run translate |
Generate & update translation files |
npm run translate:pot |
Generate .pot translation template |
npm run translate:compile |
Compile .po files to .mo and .json |
Assets haven't been built yet. Run:
npm run buildMake sure PHP 8.3+ and Composer 2.x are installed:
php -v && composer -VUse Local by Flywheel's Site Shell or manually delete:
storage/framework/cache/
storage/framework/views/
SagePress requires Node.js ^20.19.0 or >=22.12.0:
node -vUse nvm to switch versions if needed.
Contributions, issues, and feature requests are welcome!
- Fork the repository
- Create your feature branch:
git checkout -b feature/my-feature - Commit your changes:
git commit -m 'Add my feature' - Push to the branch:
git push origin feature/my-feature - Open a Pull Request
Keep track of development and community news.
- Follow @nazmunsakib on Twitter
- Visit nazmunsakib.com for articles and updates
- Join us on Roots Discourse for Sage-related discussions
- Report bugs or request features via GitHub Issues
SagePress is built on top of these amazing open source projects:
- Roots Sage — The original WordPress starter theme
- Roots Acorn — Laravel for WordPress
- Tailwind CSS — Utility-first CSS framework
- Vite — Next generation frontend tooling
- Laravel Blade — Elegant PHP templating
Licensed under the MIT License — see the LICENSE file for details. Free to use in personal and commercial projects.
Made with ❤️ by Nazmun Sakib