Sage

https://github.com/roots/sage
Admin
Sage is an advanced hybrid WordPress starter theme that combines Laravel Blade templating, Tailwind...
Tokens:21,253
Snippets:182
Trust Score:9.8
License:MIT
Update:5 days ago
Show doc for...
Tokens:
Raw
### Example — registering a view composer in boot()

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/theme-service-provider.md

Shows how to register a view composer inside boot(). Call parent::boot() first to preserve Acorn's Sage bootstrapping, then register listeners, composers, or routes.

```php
class ThemeServiceProvider extends SageServiceProvider
{
    public function boot()
    {
        parent::boot();

        $this->app->make('view')->composer('partials.custom', CustomComposer::class);
    }
}
```

--------------------------------

### Example — binding a service in register()

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/theme-service-provider.md

Shows how to bind a service into the container inside register(). Call parent::register() first to preserve Acorn's Sage bootstrapping, then bind your own services.

```php
class ThemeServiceProvider extends SageServiceProvider
{
    public function register()
    {
        parent::register();

        $this->app->singleton(MyMailer::class, function ($app) {
            return new MyMailer(config('mail'));
        });
    }
}
```

--------------------------------

### Blade example using $siteName

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/view-composers.md

Shows how to use the $siteName variable in any Blade view, as consumed by the header section.

```blade
{{-- Any Blade view in the theme --}}
<a class="brand" href="{{ home_url('/') }}">
    {!! $siteName !!}
</a>
```

--------------------------------

### Initial theme setup with after_setup_theme hook

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/setup-and-filters.md

Registers the primary navigation menu, disables block templates and core block patterns, and enables various theme supports including title-tag, post-thumbnails, responsive-embeds, HTML5 markup, and customize-selective-refresh-widgets. Runs at priority 20.

```php
add_action('after_setup_theme', function () {
    remove_theme_support('block-templates');
    register_nav_menus([
        'primary_navigation' => __('Primary Navigation', 'sage'),
    ]);
    remove_theme_support('core-block-patterns');
    add_theme_support('title-tag');
    add_theme_support('post-thumbnails');
    add_theme_support('responsive-embeds');
    add_theme_support('html5', [
        'caption',
        'comment-form',
        'comment-list',
        'gallery',
        'search-form',
        'script',
        'style',
    ]);
    add_theme_support('customize-selective-refresh-widgets');
}, 20);
```

--------------------------------

### Example: adding a sidebar in your theme

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/setup-and-filters.md

Registers a custom sidebar with ID 'sidebar-shop' and name 'Shop', using the same widget markup configuration as the default sidebars.

```php
add_action('widgets_init', function () {
    register_sidebar([
        'name' => __('Shop', 'sage'),
        'id' => 'sidebar-shop',
        'before_widget' => '<section class="widget %1$s %2$s">',
        'after_widget' => '</section>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ]);
});
```

--------------------------------

### Register Sage theme files with collect and locate_template

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/functions-php.md

Registers the default Sage theme files 'setup' and 'filters' by locating and including 'app/setup.php' and 'app/filters.php' via WordPress's locate_template(). If a file is missing, wp_die() halts execution with an error message. Add or remove file basenames in the array to change what is registered.

```php
collect(['setup', 'filters'])
    ->each(function ($file) {
        if (! locate_template($file = "app/{$file}.php", true, true)) {
            wp_die(
                /* translators: %s is replaced with the relative file path */
                sprintf(__('Error locating <code>%s</code> for inclusion.', 'sage'), $file)
            );
        }
    });
```

--------------------------------

### Register additional Sage theme file with collect and locate_template

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/functions-php.md

Registers an additional theme file 'custom' alongside the default 'setup' and 'filters' files. The array can be extended to register more files, each located and included from the app directory.

```php
collect(['setup', 'filters', 'custom'])
    ->each(function ($file) {
        if (! locate_template($file = "app/{$file}.php", true, true)) {
            wp_die(
                sprintf(__('Error locating <code>%s</code> for inclusion.', 'sage'), $file)
            );
        }
    });
```

--------------------------------

### resources/js/app.js — Frontend JS Entry

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/frontend-assets.md

Frontend JavaScript entry point. Imports the default export from '@wordpress/dom-ready' (an external WordPress package not listed in package.json devDependencies; it must be available to the build environment or npm ci will fail, though CI runs npm install which resolves it via the lockfile-less install of the wp dependency tree). The body is a no-op closure that runs when the DOM is ready, serving as the hook point for theme frontend JavaScript.

```javascript
import domReady from '@wordpress/dom-ready';

domReady(() => {
  //
});

```

--------------------------------

### boot()

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/theme-service-provider.md

Bootstraps any application services. This method is invoked after all providers have been registered, once the application is ready to serve, and is used to register event listeners, view composers, routes, etc.

```APIDOC
## boot()

### Description
Bootstraps any application services. This method is invoked after all providers have been registered, once the application is ready to serve, and is used to register event listeners, view composers, routes, etc.

### Method
boot()

### Signature
public function boot()

### Parameters
None

### Returns
void

### Behavior
Delegates to `SageServiceProvider::boot()` (Acorn). The docblock states "Bootstrap any application services."

### Example — registering a view composer from the provider
```php
class ThemeServiceProvider extends SageServiceProvider
{
    public function boot()
    {
        parent::boot();

        $this->app->make('view')->composer('partials.custom', CustomComposer::class);
    }
}
```
```

--------------------------------

### boot() method signature

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/theme-service-provider.md

Signature of the boot() method. It takes no parameters and returns void per docblock. Invoked after all providers are registered, once the application is ready to serve.

```php
public function boot()
```

--------------------------------

### Vite configuration with Tailwind, Laravel, and WordPress plugins

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/frontend-assets.md

Defines the Vite build for a Sage theme, setting the base URL, plugin chain, and import aliases. Requires APP_URL to be set or defaults to 'http://example.test'. The laravel() plugin inputs CSS and JS files in order, and wordpressThemeJson() merges Tailwind design tokens into theme.json.

```javascript
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite';
import laravel from 'laravel-vite-plugin'
import { wordpressPlugin, wordpressThemeJson } from '@roots/vite-plugin';

// Set APP_URL if it doesn't exist for Laravel Vite plugin
if (! process.env.APP_URL) {
  process.env.APP_URL = 'http://example.test';
}

export default defineConfig({
  base: '/app/themes/sage/public/build/',
  plugins: [
    tailwindcss(),
    laravel({
      input: [
        'resources/css/app.css',
        'resources/js/app.js',
        'resources/css/editor.css',
        'resources/js/editor.js',
      ],
      refresh: true,
      assets: ['resources/images/**', 'resources/fonts/**'],
    }),

    wordpressPlugin(),

    wordpressThemeJson({
      disableTailwindColors: false,
      disableTailwindFonts: false,
      disableTailwindFontSizes: false,
      disableTailwindBorderRadius: false,
    }),
  ],
  resolve: {
    alias: {
      '@scripts': '/resources/js',
      '@styles': '/resources/css',
      '@fonts': '/resources/fonts',
      '@images': '/resources/images',
    },
  },
})
```

--------------------------------

### Register the bootloader

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/functions-php.md

Configures and boots the Acorn application with the theme's service provider.

```php
Application::configure()
    ->withProviders([
        ThemeServiceProvider::class,
    ])
    ->boot();
```

--------------------------------

### Add another provider

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/functions-php.md

Shows how to register an additional service provider by adding it to the withProviders array.

```php
Application::configure()
    ->withProviders([
        ThemeServiceProvider::class,
        App\Providers\MyCustomProvider::class,
    ])
    ->boot();
```

--------------------------------

### style.css WordPress theme header

Source: https://github.com/roots/sage/blob/main/_autodocs/configuration.md

Defines the Sage starter theme header for WordPress. The Version field is rewritten by the release workflow (.github/workflows/release.yml) when a release is dispatched, replacing it with the semver input (e.g., v11.1.1).

```plaintext
Theme Name:         Sage Starter Theme
Theme URI:          https://roots.io/sage/
Description:        Sage is a WordPress starter theme.
Version:            11.x-dev
Author:             Roots
Author URI:         https://roots.io/
Text Domain:        sage
License:            MIT License
License URI:        https://opensource.org/licenses/MIT
Requires PHP:       8.3
Requires at least:  6.6
```

--------------------------------

### ThemeServiceProvider class declaration

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/theme-service-provider.md

Full class declaration for App\Providers\ThemeServiceProvider extending Roots\Acorn\Sage\SageServiceProvider. register() and boot() delegate to parent methods; neither declares parameters or return types in source.

```php
<?php

namespace App\Providers;

use Roots\Acorn\Sage\SageServiceProvider;

class ThemeServiceProvider extends SageServiceProvider
{
    public function register()
    {
        parent::register();
    }

    public function boot()
    {
        parent::boot();
    }
}
```

--------------------------------

### resources/js/editor.js - Block-Editor JS Entry

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/frontend-assets.md

Empty file that serves as the block-editor script entry point. It is consumed by `Vite::withEntryPoints(['resources/js/editor.js'])->toHtml()` in `app/setup.php`'s `admin_head` action.

```javascript
//
```

--------------------------------

### register() method signature

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/theme-service-provider.md

Signature of the register() method. It takes no parameters and returns void per docblock. Invoked during container construction before providers are booted.

```php
public function register()
```

--------------------------------

### add_action('admin_head') — inject editor JS

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/setup-and-filters.md

Registers an action on 'admin_head' to enqueue editor JavaScript. It returns early if not in the block editor, skips dependency pre-enqueueing during Vite dev sessions, and in production enqueues dependencies from editor.deps.json. Echoes the HTML tags for the editor entry point.

```php
add_action('admin_head', function () {
    if (! get_current_screen()?->is_block_editor()) {
        return;
    }

    if (! Vite::isRunningHot()) {
        $dependencies = json_decode(Vite::content('editor.deps.json'));

        foreach ($dependencies as $dependency) {
            if (! wp_script_is($dependency)) {
                wp_enqueue_script($dependency);
            }
        }
    }
    echo Vite::withEntryPoints([
        'resources/js/editor.js',
    ])->toHtml();
});
```

--------------------------------

### next() method

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/view-composers.md

Returns null when there is no next-comments link, otherwise returns the link HTML from get_next_comments_link() with the label 'Newer comments &rarr;' and text domain 'sage'.

```php
public function next(): ?string
{
    if (! get_next_comments_link()) {
        return null;
    }

    return get_next_comments_link(
        __('Newer comments &rarr;', 'sage')
    );
}
```

--------------------------------

### register()

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/theme-service-provider.md

Registers application services with the container. This method is called during the container construction phase, before providers are booted, and is used to bind services into the container.

```APIDOC
## register()

### Description
Registers application services with the container. This method is called during the container construction phase, before providers are booted, and is used to bind services into the container.

### Method
register()

### Signature
public function register()

### Parameters
None

### Returns
void

### Behavior
Delegates to `SageServiceProvider::register()` (Acorn). The docblock states "Register any application services." The comment holds the convention: bind your own services here before calling `parent::register()` or after it.

### Example — binding a service
```php
class ThemeServiceProvider extends SageServiceProvider
{
    public function register()
    {
        parent::register();

        $this->app->singleton(MyMailer::class, function ($app) {
            return new MyMailer(config('mail'));
        });
    }
}
```
```

--------------------------------

### add_filter('block_editor_settings_all') — inject editor CSS

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/setup-and-filters.md

Registers a filter on 'block_editor_settings_all' to append a style entry to the editor settings. It resolves the built URL of resources/css/editor.css via Vite::asset() and adds an @import rule to $settings['styles']. Returns the modified settings array.

```php
add_filter('block_editor_settings_all', function ($settings) {
    $style = Vite::asset('resources/css/editor.css');

    $settings['styles'][] = [
        'css' => "@import url('{$style}')",
    ];

    return $settings;
});
```

--------------------------------

### resources/css/editor.css - Editor Stylesheet Entry

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/frontend-assets.md

Plain Tailwind import; compiled to `editor.css` and injected into the block editor by the `block_editor_settings_all` filter via `Vite::asset('resources/css/editor.css')`.

```css
@import "tailwindcss";
```

--------------------------------

### title() method signature

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/view-composers.md

Returns a localized, pluralized comment title string. Uses _nx() with singular and plural forms, and the text domain 'sage'.

```php
public function title(): string
```

--------------------------------

### Customize excerpt_more read-more markup

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/setup-and-filters.md

Alternative version of the excerpt_more filter that adds a 'read-more' CSS class to the link and changes the link text to 'Read more' (translated via __('Read more', 'sage')).

```php
add_filter('excerpt_more', function () {
    return sprintf(' &hellip; <a class="read-more" href="%s">%s</a>', get_permalink(), __('Read more', 'sage'));
});
```

--------------------------------

### Import namespace classes

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/functions-php.md

Imports the theme service provider and Acorn application classes used throughout the bootstrap file.

```php
use App\Providers\ThemeServiceProvider;
use Roots\Acorn\Application;
```

--------------------------------

### Post Composer pagination() Method

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/view-composers.md

Returns post pagination HTML from wp_link_pages() with echo disabled. The output is wrapped in a paragraph with 'Pages:' label and uses the 'sage' text domain.

```php
public function pagination(): string
{
    return wp_link_pages([
        'echo' => 0,
        'before' => '<p>'.__('Pages:', 'sage'),
        'after' => '</p>',
    ]);
}
```

--------------------------------

### previous() method

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/view-composers.md

Returns null when there is no previous-comments link, otherwise returns the link HTML from get_previous_comments_link() with the label '&larr; Older comments' and text domain 'sage'.

```php
public function previous(): ?string
{
    if (! get_previous_comments_link()) {
        return null;
    }

    return get_previous_comments_link(
        __('&larr; Older comments', 'sage')
    );
}
```

--------------------------------

### Register sidebars with widgets_init hook

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/setup-and-filters.md

Registers two sidebars, 'sidebar-primary' and 'sidebar-footer', with a shared configuration for widget markup. The sidebars are consumed by dynamic_sidebar() in footer and sidebar Blade templates.

```php
add_action('widgets_init', function () {
    $config = [
        'before_widget' => '<section class="widget %1$s %2$s">',
        'after_widget' => '</section>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ];

    register_sidebar([
        'name' => __('Primary', 'sage'),
        'id' => 'sidebar-primary',
    ] + $config);

    register_sidebar([
        'name' => __('Footer', 'sage'),
        'id' => 'sidebar-footer',
    ] + $config);
});
```

--------------------------------

### Import Composer base class

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/view-composers.md

All three composer classes share the namespace App\View\Composers and import the Acorn Composer base class.

```php
use Roots\Acorn\View\Composer;
```

--------------------------------

### add_filter('should_load_separate_core_block_assets', '__return_false')

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/setup-and-filters.md

Registers a filter on 'should_load_separate_core_block_assets' to disable on-demand loading of separate core-block assets. The theme bundles its own compiled CSS, so core blocks rely on the theme stylesheet instead.

```php
add_filter('should_load_separate_core_block_assets', '__return_false');
```

--------------------------------

### add_filter('theme_file_path') — use generated theme.json

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/setup-and-filters.md

Registers a filter on 'theme_file_path' with priority 10 and 2 arguments. When the requested file is 'theme.json', it returns the path to the generated artifact at public_path('build/assets/theme.json'); otherwise returns the original path.

```php
add_filter('theme_file_path', function ($path, $file) {
    return $file === 'theme.json'
        ? public_path('build/assets/theme.json')
        : $path;
}, 10, 2);
```

--------------------------------

### index.php — Template Render Bridge

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/frontend-assets.md

The only real PHP template in the theme. Reads the view name from the container binding 'sage.view' and data from 'sage.data' (both bound by Acorn's SageServiceProvider), then echoes the rendered Blade output. Acts as the fallback template for every request WordPress resolves to the theme index.

```php
<?php

echo view(app('sage.view'), app('sage.data'))->render();

```

--------------------------------

### Register the auto loader

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/functions-php.md

Checks for the Composer autoloader and halts with an error if missing, otherwise requires it.

```php
if (! file_exists($composer = __DIR__.'/vendor/autoload.php')) {
    wp_die(__('Error locating autoloader. Please run <code>composer install</code>.', 'sage'));
}

require $composer;
```

--------------------------------

### siteName method signature

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/view-composers.md

Declares the public method siteName that returns a string. It is used to produce the $siteName view variable.

```php
public function siteName(): string
```

--------------------------------

### Add excerpt_more filter with default read-more link

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/setup-and-filters.md

Registers a filter on the 'excerpt_more' hook to replace WordPress's default '[...]' excerpt suffix with an ellipsis and a link to the current post. The link text is 'Continued' (translated via __('Continued', 'sage')).

```php
add_filter('excerpt_more', function () {
    return sprintf(' &hellip; <a href="%s">%s</a>', get_permalink(), __('Continued', 'sage'));
});
```

--------------------------------

### Post Composer Class Definition

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/view-composers.md

Defines the Post composer class that serves specific views including a wildcard pattern. The class extends Composer and lists the views it provides data for.

```php
class Post extends Composer
{
    protected static $views = [
        'partials.page-header',
        'partials.content',
        'partials.content-*',
    ];
    // ... 2 public methods below
}
```

--------------------------------

### resources/css/app.css - Frontend Stylesheet Entry

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/frontend-assets.md

Tailwind CSS v4 entry using `@import "tailwindcss"` with the `theme(static)` modifier. `@source` directives scan all PHP under `app/`, all Blade templates under `resources/views/` (relative to `resources/css/`, `../**/*.blade.php`), and all JS under `resources/`.

```css
@import "tailwindcss" theme(static);
@source "../../app/**/*.php";
@source "../**/*.blade.php";
@source "../**/*.js";
```

--------------------------------

### Post Composer title() Method

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/view-composers.md

Returns the title for the current view based on the view name and WordPress query state. Handles home, archive, search, and 404 cases with appropriate fallbacks.

```php
public function title(): string
{
    if ($this->view->name() !== 'partials.page-header') {
        return get_the_title();
    }

    if (is_home()) {
        if ($home = get_option('page_for_posts', true)) {
            return get_the_title($home);
        }

        return __('Latest Posts', 'sage');
    }

    if (is_archive()) {
        return get_the_archive_title();
    }

    if (is_search()) {
        return sprintf(
            /* translators: %s is replaced with the search query */
            __('Search Results for %s', 'sage'),
            get_search_query()
        );
    }

    if (is_404()) {
        return __('Not Found', 'sage');
    }

    return get_the_title();
}
```

--------------------------------

### App composer class

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/view-composers.md

Defines the App composer that serves all views ('*') and exposes the siteName method, which returns the WordPress site name and produces the $siteName view variable.

```php
class App extends Composer
{
    protected static $views = [
        '*',
    ];

    public function siteName(): string
    {
        return get_bloginfo('name', 'display');
    }
}
```

--------------------------------

### index.blade.php blog/home listing

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/blade-templates.md

Extends the layout, includes the page header, shows a warning alert and search form when no posts, loops posts with content partials, and adds post navigation. Also defines the sidebar section.

```blade
@extends('layouts.app')

@section('content')
  @include('partials.page-header')

  @if (! have_posts())
    <x-alert type="warning">
      {!! __('Sorry, no results were found.', 'sage') !!}
    </x-alert>

    {!! get_search_form(false) !!}
  @endif

  @while(have_posts()) @php(the_post())
    @includeFirst(['partials.content-' . get_post_type(), 'partials.content'])
  @endwhile

  {!! get_the_posts_navigation() !!}
@endsection

@section('sidebar')
  @include('sections.sidebar')
@endsection
```

--------------------------------

### Render sage.view with sage.data in index.php

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/blade-templates.md

The lone real PHP template renders the container-binding 'sage.view' view with the 'sage.data' array.

```php
echo view(app('sage.view'), app('sage.data'))->render();
```

--------------------------------

### responses() method

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/view-composers.md

Returns null when there are no comments, otherwise returns the HTML comment list from wp_list_comments() with style 'ol', short_ping true, and echo false. The Blade view invokes this method twice: once as a condition and once as output.

```php
public function responses(): ?string
{
    if (! have_comments()) {
        return null;
    }

    return wp_list_comments([
        'style' => 'ol',
        'short_ping' => true,
        'echo' => false,
    ]);
}
```

--------------------------------

### paginated() method

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/view-composers.md

Returns true only when there is more than one comment page and the 'page_comments' option is enabled.

```php
public function paginated(): bool
{
    return get_comment_pages_count() > 1 && get_option('page_comments');
}
```

--------------------------------

### Usage with slot (404.blade.php)

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/blade-templates.md

Renders the alert with a warning type and slot content. The slot content is output unescaped via {!! !!}.

```blade
<x-alert type="warning">
  {!! __('Sorry, but the page you are trying to view does not exist.', 'sage') !!}
</x-alert>
```

--------------------------------

### sections/header.blade.php - Site header with navigation

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/blade-templates.md

Outputs the site banner with a brand link and primary navigation menu. The menu is registered as 'primary_navigation' in app/setup.php and is only rendered if that menu exists.

```blade
<header class="banner">
  <a class="brand" href="{{ home_url('/') }}">{!! $siteName !!}</a>
  @if (has_nav_menu('primary_navigation'))
    <nav class="nav-primary" aria-label="{{ wp_get_nav_menu_name('primary_navigation') }}">
      {!! wp_nav_menu(['theme_location' => 'primary_navigation', 'menu_class' => 'nav', 'echo' => false]) !!}
    </nav>
  @endif
</header>
```

--------------------------------

### page.blade.php full-width page

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/blade-templates.md

Loops posts with page header and content partials; omits the sidebar section for a full-width layout.

```blade
@while(have_posts()) @php(the_post())
  @include('partials.page-header')
  @includeFirst(['partials.content-page', 'partials.content'])
@endwhile
```

--------------------------------

### single.blade.php single post

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/blade-templates.md

Loops posts and includes the appropriate content-single partial based on post type.

```blade
@while(have_posts()) @php(the_post())
  @includeFirst(['partials.content-single-' . get_post_type(), 'partials.content-single'])
@endwhile
```

--------------------------------

### Custom AuthorBox Composer and Blade Template

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/view-composers.md

Shows how to create an additional composer for a custom partial. The PHP class defines the view and provides data, while the Blade template consumes the data with a conditional check.

```php
<?php

namespace App\View\Composers;

use Roots\Acorn\View\Composer;

class AuthorBox extends Composer
{
    protected static $views = [
        'partials.content-single',
    ];

    public function authorBio(): string
    {
        return get_the_author_meta('description');
    }
}
```

```blade
{{-- resources/views/partials/content-single.blade.php (extended) --}}
@if ($authorBio)
  <div class="author-box">{{ $authorBio }}</div>
@endif
```

--------------------------------

### Comments composer class skeleton

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/view-composers.md

Defines the Comments view composer that serves the 'partials.comments' view. The class contains six public methods documented below.

```php
class Comments extends Composer
{
    protected static $views = [
        'partials.comments',
    ];
    // ... 6 public methods below
}
```

--------------------------------

### closed() method

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/view-composers.md

Returns true when comments are closed for the current post, there is at least one existing comment, and the post type supports comments.

```php
public function closed(): bool
{
    return ! comments_open() && get_comments_number() != '0' && post_type_supports(get_post_type(), 'comments');
}
```

--------------------------------

### Vite directive in layouts/app.blade.php

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/blade-templates.md

Loads the main CSS and JS assets via Vite in the layout's head.

```blade
@vite(['resources/css/app.css', 'resources/js/app.js'])
```

--------------------------------

### Alert component definition (alert.blade.php)

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/blade-templates.md

Defines the <x-alert> Blade component. Accepts optional 'type' and 'message' props; maps type to Tailwind classes via match(), defaults to indigo styling. Merges attributes and renders unescaped message or slot content.

```blade
@props([
  'type' => null,
  'message' => null,
])

@php($class = match ($type) {
  'success' => 'text-green-50 bg-green-400',
  'caution' => 'text-yellow-50 bg-yellow-400',
  'warning' => 'text-red-50 bg-red-400',
  default => 'text-indigo-50 bg-indigo-400',
})

<div {{ $attributes->merge(['class' => "px-2 py-1 {$class}"]) }}>
  {!! $message ?? $slot !!}
</div>
```

--------------------------------

### partials/page-header.blade.php - Page header with title

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/blade-templates.md

Displays the page header with the title variable. The $title is provided by Post::title() and resolves home, archive, search, and 404 titles.

```blade
<div class="page-header"><h1>{!! $title !!}</h1></div>
```

--------------------------------

### Blade template consuming the composer

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/view-composers.md

Blade view that uses the composer's methods to display the comment title, list, pagination, and a closed-comments alert. The @if ($responses()) condition and the {!! $responses !!} output both invoke the responses() method.

```blade
@if ($responses())
  <h2>{!! $title !!}</h2>
  <ol class="comment-list">{!! $responses !!}</ol>

  @if ($paginated())
    <nav aria-label="Comment">
      @if ($previous()) <li class="previous">{!! $previous !!}</li> @endif
      @if ($next()) <li class="next">{!! $next !!}</li> @endif
    </nav>
  @endif
@endif

@if ($closed())
  <x-alert type="warning">{!! __('Comments are closed.', 'sage') !!}</x-alert>
@endif
```

--------------------------------

### partials/content-page.blade.php - Conditional pagination

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/blade-templates.md

Renders a page navigation element only when pagination is available. The $pagination variable comes from Post::pagination().

```blade
@if ($pagination())
  <nav class="page-nav" aria-label="Page">{!! $pagination !!}</nav>
@endif
```

--------------------------------

### Usage with message attribute

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/blade-templates.md

Renders the alert with a success type and a message attribute. The message is output unescaped; extra class 'rounded' is merged into the class attribute.

```blade
<x-alert type="success" message="Changes saved." class="rounded" />
```

--------------------------------

### Conditional sidebar section in layouts/app.blade.php

Source: https://github.com/roots/sage/blob/main/_autodocs/api-reference/blade-templates.md

Renders the sidebar only if a 'sidebar' section is defined.

```blade
@hasSection('sidebar')
  <aside class="sidebar"> @yield('sidebar') </aside>
@endif
```
Tokens:
Raw