# Configuration
app/setup.php
is used to enqueue stylesheets and scripts, register support for theme features with add_theme_support
, and register navigation menus and sidebars.
# Stylesheets and scripts
Manage your front-end theme assets from the app/setup.php
file:
add_action('wp_enqueue_scripts', function () {
wp_enqueue_style('sage/main.css', asset_path('styles/main.css'), false, null);
wp_enqueue_script('sage/main.js', asset_path('scripts/main.js'), ['jquery'], null, true);
}, 100);
See theme assets for more on how these assets are built. asset_path
is a helper function that returns versioned asset filenames from the dist/
directory.
# Theme features
# Soil
We recommend using the Soil (opens new window) Plugin with every WordPress install for additional features:
- Load jQuery from the jQuery CDN*
- Cleaner WordPress markup*
- Cleaner HTML output of navigation menus*
- Root relative URLs*
- Nice search*
- Google Analytics snippet from HTML5 Boilerplate
- Move all JS to the footer
- Disable trackbacks and pingbacks
∗If Soil is installed and activated on your WordPress install, Sage will enable these features by default.
# Title tag support
add_theme_support('title-tag')
is a feature added in WordPress 4.1 that allows themes and plugins to manage the document title. This means that there's no <title>
tag found in the head template since it's automatically added by wp_head()
.
# Register navigation menus
Sage registers a navigation menu called Primary Navigation. Additional menus should be added in the register_nav_menus
locations array.
# Post thumbnails
Post thumbnails are enabled with add_theme_support('post-thumbnails')
, but they aren't output on any of the default templates. Add custom post thumbnail sizes with add_image_size()
.
# HTML5 markup
Sage enables HTML5 markup for captions, comment forms, comment lists, galleries, and the search form.
# Editor stylesheet
The TinyMCE editor in WordPress allows loading a custom stylesheet which is registered with add_editor_style()
. The editor stylesheet is automatically generated from your main theme stylesheet when you run the build script.
# Register sidebars
Sage registers two sidebars by default: Primary & Footer. Add additional sidebars with register_sidebar()
.
# Theme structure
themes/your-theme-name/ # → Root of your Sage based theme
├── app/ # → Theme PHP
│ ├── controllers/ # → Controller files
│ ├── admin.php # → Theme customizer setup
│ ├── filters.php # → Theme filters
│ ├── helpers.php # → Helper functions
│ └── setup.php # → Theme setup
├── config/ # → Theme configuration
├── composer.json # → Autoloading for `app/` files
├── composer.lock # → Composer lock file (never edit)
├── dist/ # → Built theme assets (never edit)
├── node_modules/ # → Node.js packages (never edit)
├── package.json # → Node.js dependencies and scripts
├── resources/ # → Theme assets and templates
│ ├── assets/ # → Front-end assets
│ │ ├── config.json # → Settings for compiled assets
│ │ ├── build/ # → Webpack and ESLint config
│ │ ├── fonts/ # → Theme fonts
│ │ ├── images/ # → Theme images
│ │ ├── scripts/ # → Theme JS
│ │ └── styles/ # → Theme stylesheets
│ ├── functions.php # → Composer autoloader, theme includes
│ ├── index.php # → Never manually edit
│ ├── screenshot.png # → Theme screenshot for WP admin
│ ├── style.css # → Theme meta information
│ └── views/ # → Theme templates
│ ├── layouts/ # → Base templates
│ └── partials/ # → Partial templates
└── vendor/ # → Composer packages (never edit)