tombroucke / sage
WordPress starter theme with a modern development workflow
Installs: 76
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 0
Forks: 3 062
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-44dffe1b0ffbd309fe27cfadd0ceb08d
- 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-12-16 10:22:35 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 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
orresources/styles/config/bootstrap/helpers.scss
. - enqueuing the modal styles by uncommenting
bundle('modal')->enqueue()
inapp/setup.php
- uncommenting the component in
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 the core/paragraph
block.
Editor styles
By default the editor styles are not loaded when running yarn dev
, to increase build size. The styles will be loaded after building. You can temporarily copy the contents of editor.scss
to editor-basic.scss
when you need to make changes to the file.
Custom directives
@ray(mixed $variable)
Outputs a variable to your Ray console
@background(string $image)
You can pass an image url, which will be added as an inline style background-image.
@shortcode('[shortcode]')
@year
Will render the current year
@preview($block)
Content of this block will only be rendered in the admin interface
@echoWhen(bool $condition, string $markup)
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:
@if ($items->isNotEmpty()) <x-block :block="$block"> <ul> @foreach ($items as $item) <li>{{ $item['item'] }}</li> @endforeach </ul> <div> <InnerBlocks /> </div> </x-block> @else @preview($block) <p>Add an item...</p> @endpreview @endif
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 variables, 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
@svg('logoname', ['height' => '2em']) {{-- or --}} <x-icon-logoname height="2em" />
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', ]) ...