PHPackages tombroucke/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. tombroucke/sage ActiveWordpress-theme[Utility & Helpers](/categories/utility) tombroucke/sage =============== WordPress starter theme with a modern development workflow 9.0.10(5y ago)1124[3 PRs](https://github.com/tombroucke/sage/pulls)MITPHPPHP >=7.1CI failing Since Jan 27Pushed 1mo agoCompare [ Source](https://github.com/tombroucke/sage)[ Packagist](https://packagist.org/packages/tombroucke/sage)[ Docs](https://roots.io/sage/)[ RSS](/packages/tombroucke-sage/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependencies (6)Versions (51)Used By (0) This is a starter theme, based on the [roots/sage](https://github.com/roots/sage) starter theme Installation ============ [](#installation) Install composer packages in Bedrock or Sage root directory ----------------------------------------------------------- [](#install-composer-packages-in-bedrock-or-sage-root-directory) ``` composer require log1x/navi tombroucke/otomaties-sage-helper ``` Add facades to composer.json ---------------------------- [](#add-facades-to-composerjson) ``` "extra": { "acorn": { "aliases": { "Post": "App\\Facades\\Post", "ThemeJson": "App\\Facades\\ThemeJson" } } }, ``` ### Find & Replace [](#find--replace) - %devurl% (without https://) - %client\_name% - %themename% - %mu-plugin-namespace% Features ======== [](#features) Bootstrap --------- [](#bootstrap) - Bootstrap is loaded by default. You should comment out components & helpers in resources/styles/config/bootstrap to decrease build time / filesize. - Custom pagination (`@include('partials.pagination')`) - Breadcrumb (`@include('partials.breadcrumb')`) - Some components might not be rendered correctly (missing styles), this could be fixed by - uncommenting the component in `resources/styles/config/bootstrap/components.scss` or `resources/styles/config/bootstrap/helpers.scss`. - enqueuing the modal styles by uncommenting `bundle('modal')->enqueue()` in `app/setup.php` PurgeCSS -------- [](#purgecss) Add css classes to `purgecss-safelist.js` to whitelist Add css classes to `purgecss-blocklist.js` to block WPML ---- [](#wpml) Add `@include('partials.language-switcher')` to have a WPML language switcher appear Built-in support for headroom.js -------------------------------- [](#built-in-support-for-headroomjs) All you need to do is add styling for the headroom classes (`banner--not-top`, `banner--unpinned`, ...) [WickyNilliams/headroom.js](https://github.com/WickyNilliams/headroom.js) Custom block styles ------------------- [](#custom-block-styles) In `resources/scripts/editor.js`, we add a 'Lead' style to the `core/paragraph` block. Custom directives ----------------- [](#custom-directives) ### @ray(mixed $variable) [](#raymixed-variable) Outputs a variable to your [Ray](https://spatie.be/products/ray) console ### @background(string $image) [](#backgroundstring-image) You can pass an image url, which will be added as an inline style background-image. ### @shortcode('\[shortcode\]') [](#shortcodeshortcode) ### @year [](#year) Will render the current year ### @preview($block) [](#previewblock) Content of this block will only be rendered in the admin interface ### @echoWhen(bool $condition, string $markup) [](#echowhenbool-condition-string-markup) Customization ============= [](#customization) Blocks ------ [](#blocks) ### Default blocks from Otomaties sage helper [](#default-blocks-from-otomaties-sage-helper) Default blocks (accordion, cards, gallery, hero, ...) can be easily added from [Otomaties sage helper](https://github.com/tombroucke/otomaties-sage-helper) e.g.: ``` wp acorn vendor:publish --tag="Otomaties block Buttons" ``` - .js files in resources/scripts/blocks will be dynamically imported if there is a block matching the name. E.g. `resources/views/blocks/image-content.blade.php` > `resources/scripts/blocks/image-content.js` - .scss files in resources/styles/blocks will be automatically enqueued in case there is a block with the same name (without namespace). If you want to enqueue a block style for `core/paragraph`, you should create `resources/styles/blocks/paragraph.scss`. ### Custom blocks [](#custom-blocks) Custom blocks can be added using [Log1x/acf-composer](https://github.com/Log1x/acf-composer) e.g.: ``` wp acorn acf:block MyCustomBlock ``` See [ACF Builder Cheatsheet](https://github.com/Log1x/acf-builder-cheatsheet) You can add styles for your block in `resources/styles/blocks/my-block.scss`. These will automatically be enqueue by our theme. Restart bud after adding the style. If you need bootstrap variables, mixins etc.: ``` @import 'bootstrap/scss/mixins'; @import 'bootstrap/scss/functions'; @import './../config/variables'; @import 'bootstrap/scss/variables'; ``` Google Fonts ------------ [](#google-fonts) 1. Install [Laravel Webfonts](https://github.com/Log1x/laravel-webfonts) 2. Run `wp acorn webfonts:add`, follow the wizard 3. Add `'fonts': ["@styles/fonts"],` to `bud.config.js` and enqueue this asset in `app/setup.php` Theme.json ---------- [](#themejson) ### Container [](#container) There are 2 widths for containers: contentSize (768px) and wideSize (1320px). These can be changed from the theme.json ### Colors [](#colors) Colors defined in `resources/styles/config/_variables.scss` should be copied over to theme.json (`settings.color.pallette`). There is a ThemeJson facade to extract the colors. **Get a <key, value> list of all theme colors in PHP:** ``` ThemeJson::colors()->pluck('name', 'slug'); ``` Navigation ---------- [](#navigation) - This starter theme uses [Log1x/navi](https://github.com/Log1x/navi). The navigation is built in `app/View/Composers/Navigation.php`. - You can add bootstrap button classes to menu items (e.g. `btn btn-primary`) to style them as buttons - You can add fontawesome classes to add icons (e.g. `fas-envelope`) - `resources/scripts/components/header.js` will listen to click events on a `.menu-item--has-submenu` element, and toggle the `menu-item--open` class on this element. It will also remove the `menu-item--open` class from every other element ### Mobile nav [](#mobile-nav) - `resources/scripts/components/header.js` will listen to click events on a `.navbar-toggler` element, and toggle the `primary-nav-open` class on the body element. Google maps ----------- [](#google-maps) If you're using Google Maps, you can add the GOOGLE\_MAPS\_KEY variable to your .env file Snippets ======== [](#snippets) SVG logo -------- [](#svg-logo) File should be in `resources/svg/logoname.svg` ``` @svg('logoname', ['height' => '2em']) {{-- or --}} ``` Get a list of fontawesome icons in a list ----------------------------------------- [](#get-a-list-of-fontawesome-icons-in-a-list) ``` // app/Providers/ThemeServiceProvider.php $this->app->bind('icons', function() { return Cache::rememberForever('fontawesome-icons', function () { $icons = []; $sets = app()->make('BladeUI\Icons\Factory')->all(); foreach ($sets as $setname => $set) { if (strpos($setname, 'fontawesome') === false) { continue; } $niceSetName = str_replace('fontawesome-', '', $setname); foreach ($set['paths'] as $path) { $files = glob($path . '/*.svg'); foreach ($files as $file) { $iconBasename = basename($file, '.svg'); $iconName = $set['prefix'] . '-'. $iconBasename; $icons[$iconName] = "$iconBasename $niceSetName"; } } } return $icons; }); }); // app/Blocks/BlockWithIcons.php ... ->addSelect('icon', [ 'label' => __('Icon', 'sage'), 'choices' => app()->make('icons'), 'default_value' => 'fas-star', 'ajax' => 1, ]) ... ``` ### Health Score 44 — FairBetter than 91% of packages Maintenance63 Regular maintenance activity Popularity12 Limited adoption so far Community19 Small or concentrated contributor base Maturity71 Established project with proven stability Bus Factor1 Top contributor holds 55.1% 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 Every ~73 days Recently: every ~115 days Total 31 Last Release 1544d ago Major Versions 8.5.3 → 9.0.02018-02-07 8.5.4 → 9.0.12018-04-30 8.6.0 → 9.0.82019-02-12 9.0.10 → 10.0.0-beta.12021-10-21 9.x-dev → 10.0.0-beta.22021-12-21 PHP version history (7 changes)8.4.1PHP >=5.4.0 9.0.0-alpha.1PHP >=5.5.0 9.0.0-beta.1PHP >=5.6.4 9.0.0-beta.4PHP >=7 9.0.1PHP >=7.1 10.0.0-beta.1PHP ^7.3|^8.0 10.0.0-beta.3PHP ^7.4|^8.0 ### Community Maintainers ![](https://www.gravatar.com/avatar/4178291ccf36e3530aa8a8845124c3af1b24c064739ad98ded5b9679a4316033?d=identicon)[tombroucke](/maintainers/tombroucke) --- Top Contributors [![retlehs](https://avatars.githubusercontent.com/u/115911?v=4)](https://github.com/retlehs "retlehs (1346 commits)")[![tombroucke](https://avatars.githubusercontent.com/u/24292260?v=4)](https://github.com/tombroucke "tombroucke (253 commits)")[![swalkinshaw](https://avatars.githubusercontent.com/u/295605?v=4)](https://github.com/swalkinshaw "swalkinshaw (218 commits)")[![QWp6t](https://avatars.githubusercontent.com/u/2104321?v=4)](https://github.com/QWp6t "QWp6t (170 commits)")[![austinpray](https://avatars.githubusercontent.com/u/2192970?v=4)](https://github.com/austinpray "austinpray (94 commits)")[![Foxaii](https://avatars.githubusercontent.com/u/1690407?v=4)](https://github.com/Foxaii "Foxaii (48 commits)")[![Log1x](https://avatars.githubusercontent.com/u/5745907?v=4)](https://github.com/Log1x "Log1x (44 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (28 commits)")[![kalenjohnson](https://avatars.githubusercontent.com/u/2036520?v=4)](https://github.com/kalenjohnson "kalenjohnson (24 commits)")[![renovate[bot]](https://avatars.githubusercontent.com/in/2740?v=4)](https://github.com/renovate[bot] "renovate[bot] (21 commits)")[![weslly](https://avatars.githubusercontent.com/u/107672?v=4)](https://github.com/weslly "weslly (18 commits)")[![knowler](https://avatars.githubusercontent.com/u/6908001?v=4)](https://github.com/knowler "knowler (18 commits)")[![kellymears](https://avatars.githubusercontent.com/u/397606?v=4)](https://github.com/kellymears "kellymears (17 commits)")[![MWDelaney](https://avatars.githubusercontent.com/u/2457670?v=4)](https://github.com/MWDelaney "MWDelaney (15 commits)")[![JulienMelissas](https://avatars.githubusercontent.com/u/2278221?v=4)](https://github.com/JulienMelissas "JulienMelissas (15 commits)")[![coreywagehoft](https://avatars.githubusercontent.com/u/767849?v=4)](https://github.com/coreywagehoft "coreywagehoft (14 commits)")[![leoj3n](https://avatars.githubusercontent.com/u/990216?v=4)](https://github.com/leoj3n "leoj3n (12 commits)")[![cfxd](https://avatars.githubusercontent.com/u/1671933?v=4)](https://github.com/cfxd "cfxd (12 commits)")[![mmirus](https://avatars.githubusercontent.com/u/524994?v=4)](https://github.com/mmirus "mmirus (9 commits)")[![davekiss](https://avatars.githubusercontent.com/u/1256071?v=4)](https://github.com/davekiss "davekiss (8 commits)") --- Tags wordpress ### Code Quality Code StylePHP\_CodeSniffer ### Embed Badge ![Health badge](/badges/tombroucke-sage/health.svg) ``` [![Health](https://phpackages.com/badges/tombroucke-sage/health.svg)](https://phpackages.com/packages/tombroucke-sage) ``` ### Alternatives [roots/bedrock WordPress boilerplate with Composer, easier configuration, and an improved folder structure 6.5k441.8k2](/packages/roots-bedrock)[cedaro/gravity-forms-iframe Embed a Gravity Form on any site using an iframe. 1563.0k](/packages/cedaro-gravity-forms-iframe) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)