Advanced WordPress starter theme with Tailwind CSS and Laravel Blade
- Hybrid WordPress theme with block editor support
- theme.json generated from Tailwind config
- Laravel Blade templates
- Maintained for over 14 years
Rapid WordPress theme development with Tailwind CSS
Sage’s Tailwind CSS config automatically generates a theme.json
file which is used to configure the WordPress editor. Your defined fonts, colors, and spacing are available in the editor, and you can use Tailwind classes in your templates to rapidly build out your WordPress theme.
Want to use Bootstrap instead, or no CSS framework at all? Not a problem. Sage is a minimal starting point and ready for you to customize to fit your needs.
Laravel Blade templates with WordPress
Looking for modern PHP templating features in your WordPress theme, like template inheritance and components? Sage has you covered thanks to Blade Templates from Laravel.
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{ wp_head() }}
@vite(['resources/css/app.css', 'resources/js/app.js'])
@if (\App\is_doc())
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
@endif
</head>
<body <?php body_class('bg-white'); ?>>
<div id="app">
<a class="sr-only focus:not-sr-only" href="#main">
{{ __('Skip to content') }}
</a>
<div class="flex flex-col h-screen">
<div>
@include('sections.header')
</div>
<main id="main" class="{{ $mainClasses }}">
@yield('content')
</main>
@include('sections.footer')
{{ wp_footer() }}
</div>
</div>
{{ do_action('get_footer') }}
@if (\App\is_doc())
<script defer src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
@endif
<?php if (WP_ENV === 'production' && !is_user_logged_in()) { ?>
<script src="https://analytics.ahrefs.com/analytics.js" data-key="pdPviLhxPUfyKE+vvTHCZA" async></script>
<script async defer src="https://analytics.umami.is/script.js" data-website-id="58303a78-5f91-40b3-8773-eece39c00aaf"></script>
<?php } ?>
</body>
</html>
Modern development workflow
Asset builds are handled by Vite, a high-performance build system. HMR is enabled by default, and you can use the npm run dev
command to watch for changes and automatically inject your changes.
Sponsors
Help support our open-source development efforts
Built with Sage
Recommendations
If you have to use WordPress, use Bedrock for your web app and Sage to develop your custom theme. Any Laravel developer will feel at home in these tools.
I think 2 years ago I tweeted to y'all to say I love Sage -- now I'm getting started with Bedrock and loving it! thank you for making me feel like WordPress can be sane, secure, and modern.
In my opinion, the roots.io toolkit is the most sane way to do WordPress in 2023
Sage has brought WordPress development into the modern age. It's absolutely excellent and we'd have probably moved away from WordPress by now without it. Can't recommend it highly enough.
Subscribe for updates
Join over 8,000 subscribers on our newsletter to get the latest Roots updates and tips on building better WordPress sites
Looking for WordPress plugin recommendations, the newest modern WordPress projects, and general web development tips and articles?