tombroucke / sage
WordPress starter theme with a modern development workflow
Installs: 68
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 0
Forks: 3 058
Type:wordpress-theme
Requires
- php: ^7.4|^8.0
Requires (Dev)
Suggests
- log1x/sage-directives: A collection of useful Blade directives for WordPress and Sage (^1.0).
- log1x/sage-svg: A useful SVG directive for inlining SVG's within Blade views (^1.0).
- dev-main
- 10.0.0-beta.3
- 10.0.0-beta.2
- 10.0.0-beta.1
- 9.x-dev
- 9.0.10
- 9.0.9
- 9.0.8
- 9.0.7
- 9.0.6
- 9.0.5
- 9.0.4
- 9.0.3
- 9.0.2
- 9.0.1
- 9.0.0
- 9.0.0-beta.4
- 9.0.0-beta.3
- 9.0.0-beta.2
- 9.0.0-beta.1
- 9.0.0-alpha.4
- 9.0.0-alpha.3
- 9.0.0-alpha.2
- 9.0.0-alpha.1
- 8.6.0
- 8.5.4
- 8.5.3
- 8.5.2
- 8.5.1
- 8.5.0
- 8.4.2
- 8.4.1
- dev-snyk-upgrade-29daef91cc095aa4f62f88d0a2dc147b
- dev-snyk-upgrade-57394e8aadc07d5e19c985e162b8dbd6
- dev-compile-speed-test
- dev-roots-main
- dev-pr-labeler
- dev-10.0.0-beta.2
- dev-dependabot/npm_and_yarn/main/eslint-8.5.0
- dev-dependabot/npm_and_yarn/main/postcss-preset-env-7.0.2
- dev-type-declarations
- dev-remove-config-directory
- dev-2768-acorn-as-requirement-not-dependency
- dev-asset-pipeline
- dev-import-maps-prototype
- dev-log1x/km
- dev-build-tooling
- dev-10.0.0-dev
- dev-preloading
This package is auto-updated.
Last update: 2024-10-02 08:32:55 UTC
README
This is a starter theme, based on the roots/sage starter theme
Installation
Install composer packages in Bedrock or Sage root directory
composer require log1x/navi tombroucke/otomaties-sage-helper
Publish bootstrap components
wp acorn vendor:publish --tag="Bootstrap components"
Find & Replace
- %devurl% (without https://)
- %client_name%
- %themename%
- %mu-plugin-namespace%
Features
Bootstrap
- Bootstrap is loaded by default. You can comment out components & helpers in resources/styles/config/bootstrap to decrease build time.
- Custom pagination (
@include('partials.pagination')
) - Breadcrums (
@include('partials.breadcrumb')
)
PurgeCSS
- Add css classes to
purge-safelist.cjs
to whitelist
WPML
- Add
@include('partials.language-switcher')
to have a WPML language switcher appear
Built-in support for headroom.js
- All you need to do is add styling for the headroom classes (
banner--not-top
,banner--unpinned
, ...)
Custom block styles
- In
resources/scripts/editor.js
, we add a 'Lead' style to thecore/paragraph
block. Use.is-style-lead
to add styling.
Ray directive
You can use the @ray($somevariable)
directive to output to your Ray console
Customization
Blocks
Default blocks from Otomaties sage helper
Default blocks (accordion, cards, gallery, hero, ...) can be easily added from 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 createresources/styles/blocks/paragraph.scss
.
⚠️ After adding scss-files, bud needs to be restarted
Custom blocks
Custom blocks can be added using Log1x/acf-composer e.g.:
wp acorn acf:block MyCustomBlock
Views for custom blocks should be wrapped in an <x-block>
component. E.g:
<x-block :block="$block"> @if ($items) <ul> @foreach ($items as $item) <li>{{ $item['item'] }}</li> @endforeach </ul> @else <p>{{ $block->preview ? 'Add an item...' : 'No items found!' }}</p> @endif <div> <InnerBlocks /> </div> </x-block>
See also 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 variable, mixins etc.:
@import 'bootstrap/scss/mixins'; @import 'bootstrap/scss/functions'; @import './../config/variables'; @import 'bootstrap/scss/variables';
Google Fonts
- Install Laravel Webfonts
- Run
wp acorn webfonts:add
, follow the wizard - Add
'fonts': ["@styles/fonts"],
tobud.config.js
and enqueue this asset inapp/setup.php
Theme.json
Container
There are 2 widths for containers: contentSize (768px) and wideSize (1320px). These can be changed from the theme.json
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
- This starter theme uses 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 themenu-item--open
class on this element. It will also remove themenu-item--open
class from every other element
Mobile nav
resources/scripts/components/header.js
will listen to click events on a.navbar-toggler
element, and toggle theprimary-nav-open
class on the body element.
Google maps
If you're using Google Maps, you can add the GOOGLE_MAPS_KEY variable to your .env file
Snippets
SVG logo
File should be in resources/icons/logoname.svg
<x-icon-logoname width="200" height="100" />
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', ]) ...