Theme Structure

Introduction #

The default Sage structure is intended to provide a sane starting point for both small and large WordPress sites alike.

Where a file or class is located is ultimately decided by you. As long as Composer can autoload the class or you have modified the necessary paths in your configuration, things should work as expected.

themes/your-theme-name/   # → Root of your Sage based theme
├── app/                  # → Theme PHP
│   ├── Providers/        # → Service providers
│   ├── View/             # → View models
│   ├── filters.php       # → Theme filters
│   └── setup.php         # → Theme setup
├── public/               # → Built theme assets (never edit)
├── resources/            # → Theme assets and templates
│   ├── css/              # → Theme stylesheets
│   ├── fonts/            # → Theme fonts
│   ├── images/           # → Theme images
│   ├── js/               # → Theme JavaScript
│   └── views/            # → Theme templates
│       ├── components/   # → Component templates
│       ├── forms/        # → Form templates
│       ├── layouts/      # → Base templates
│       └── partials/     # → Partial templates
├── vendor/               # → Composer packages (never edit)
├── composer.json         # → Autoloading for `app/` files
├── functions.php         # → Theme bootloader
├── index.php             # → Theme template wrapper
├── node_modules/         # → Node packages (never edit)
├── package.json          # → Node dependencies and scripts
├── screenshot.png        # → Theme screenshot for WP admin
├── style.css             # → Theme meta information
└── vite.config.js        # → Vite configuration

The root directory #

The app/ directory

The majority of your theme functionality lives in the app directory. By default, this directory is namespaced under App and is automatically loaded by Composer using the PSR-4 autoloading standard. See our blog post on Namespacing and Autoloading if you aren't familiar with these methods.

This directory is covered more in Functionality.

The public/ directory

The public directory contains the compiled assets for your theme. This directory will never be manually modified.

The node_modules/ directory

The node_modules directory contains your Node dependencies used to build your assets during development or for production. This folder is automatically generated and should not be modified.

The resources/ directory

The resources directory contains your Blade views as well as the un-compiled assets of your theme such as CSS, JavaScript, images, and fonts.

The vendor/ directory

The vendor directory contains your Composer dependencies and autoloader. This directory is automatically generated and should not be modified.