Setup

Theme Setup

Install Dependencies

Getting started you will need to install theme dependencies with nvm, npm, and composer.

1. Navigate to the theme directory in your project folder.
2. Run composer scaffold to pull the Base Build assets from the TS Base Assets repository.
3. Run composer install to install Timber, Twig, and other dependencies in the theme.
4. Run nvm use to ensure you're using the correct version Node (you might have to run nvm install 16 to get this to run).
5. Run npm i to install packages front-end dependencies and compile the initial set of tokens.

Design System Setup

This theme has tailwindcss baked in. Tailwind will let you centralize your styling to the component Twig file with very little supporting css.

To get tailwind up an running you will need to compile its definitions. In the tokens directory you'll find JSON files that contain definitions for spacing, color palette, typography, and other global styles.

1. Navigate to the theme directory in your project folder
2. Modify the relevant design json files in tokens/src.
3. Run npm run format.tokens" to generate token files for Tailwind to use and compile from via webpack, compile styles to css, and begin watching CSS & Twig files for changes.

ACF Pro

Advanced Custom Fields is a very helpful plugin for WordPress that lets you edit metadata on posts.

1. Add the ACF repo to composer.json

"repositories": [
    ...
    {
      "type": "package",
      "package": {
        "name": "junaidbhura/advanced-custom-fields-pro",
        "version": "<version-number>",
        "type": "wordpress-plugin",
        "dist": {
          "type": "zip",
          "url": "https://www.advancedcustomfields.com"
        },
        "require": {
            "junaidbhura/composer-wp-pro-plugins": "*"
        }
      }
    }
    ...
]

2. Add the package to requirements:

"require": {
   ...
   "junaidbhura/advanced-custom-fields-pro": "<version-number>",,
   ...
}

3. Replace <version-number> with the correct version of ACF.
4. Run composer update to install.

ACF Notes

• Building a flexible content system could benefit from this preview plugin: "wpackagist-plugin/acf-flexible-content-preview":"1.0.6"
• Flexible content systems play very well with Twig templates and the theme has a skeletal component to jump start implementation. This component uses the layout_name property from the ACF flexible content field to pull in a twig component with relevant template markup.

Development

To start developing for the the theme you can run the webpack compiler for Twig, Sass, and JS using npm run start. If you're just editing PHP you do not need to run the compiler.