itcig/sage-timber

WordPress starter theme with a modern development workflow modified to work with Timber

Maintainers

Details

github.com/itcig/sage-9-timber

Homepage

Source

Issues

Installs: 12

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 3

Forks: 3 060

Open Issues: 8

Type:wordpress-theme

v9.1.0 2020-03-30 06:59 UTC

Requires

Requires (Dev)

MIT b1849d019489ac6a2a446ab698c7d3233cf31e33

wordpress

This package is auto-updated.

Last update: 2024-04-15 17:28:26 UTC

README

Sage-9-Timber is Sage theme version 9 made to work with Timber.

For easy integrations and later compatibility, this repository aimed at making the minimum of changes possible to the original Sage 9 beta 4 in order to make Timber work. This theme has still twig template language support.

Sage 9 is in active development and is currently in beta. This initial fork used version Sage 9 beta 4. If you want a stable version of Sage ported to Timber, have a look at the sage-timber project.

Bedrock specific Install

You must implement the following in the root of the Bedrock project composer.json. Otherwise your controllers will not be loaded by the SageController package since it will be expecting them to load relative to the theme composer autoloader.

"autoload": {
    "psr-4": {
        "App\\": "web/app/themes/<child-theme>/app/"
    }
},

Features

  • Sass for stylesheets
  • ES6 for JavaScript
  • Webpack for compiling assets, optimizing images, and concatenating and minifying files
  • Browsersync for synchronized browser testing
  • Twig as a templating engine
  • Controller for passing data to Blade templates
  • CSS framework options:
  • Font Awesome (optional)

See a working example at roots-example-project.com.

Requirements

Make sure all dependencies have been installed before moving on:

Theme installation

Install Sage-9-timber by copying the project into a new folder within your WordPress themes directory.

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         # → Actions and theme options
│   └── timber.php        # → Timber init
├── 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 Timber templates
│       └── templates/    # → Timber twig templates
└── vendor/               # → Composer packages (never edit)

Theme setup

Edit app/setup.php to enable or disable theme features, setup navigation menus, post thumbnail sizes, and sidebars.

Theme development

  • Run yarn from the theme directory to install dependencies
  • Update resources/assets/config.json settings:
    • devUrl should reflect your local development hostname
    • publicPath should reflect your WordPress folder structure (/wp-content/themes/sage for non-Bedrock installs)

Build commands

  • yarn run start — Compile assets when file changes are made, start Browsersync session
  • yarn run build — Compile and optimize the files in your assets directory
  • yarn run build:production — Compile assets for production

Documentation

Timber documentation is available at https://timber.github.io/docs/.

Twig documentation is available at http://twig.sensiolabs.org/.

Sage 9 documentation is currently in progress and can be viewed at https://github.com/roots/docs/tree/sage-9/sage.

Controller documentation is available at https://github.com/soberwp/controller#usage.

Contributing

Contributions are welcome from everyone. Just issue a pull request to this repository.

Sage Community

Keep track of development and community news.