PHPackages                             daerisimber/daerisimber - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Framework](/categories/framework)
4. /
5. daerisimber/daerisimber

ActiveProject[Framework](/categories/framework)

daerisimber/daerisimber
=======================

A modern WordPress theme skeleton using Timber, ACF Pro, Tailwind CSS and Alpine JS

1.2.2(4mo ago)017[3 issues](https://github.com/roolian/daerisimber/issues)MITJavaScriptPHP >=8.2

Since Aug 1Pushed 4mo ago1 watchersCompare

[ Source](https://github.com/roolian/daerisimber)[ Packagist](https://packagist.org/packages/daerisimber/daerisimber)[ RSS](/packages/daerisimber-daerisimber/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (6)Versions (13)Used By (0)

Daerisimber
===========

[](#daerisimber)

A theme extending [Timberland](https://github.com/cearls/timberland)

Timberland is an opinionated WordPress theme using

- [Timber](https://www.upstatement.com/timber/)
- [Advanced Custom Fields Pro](https://www.advancedcustomfields.com/)
- [Vite](https://vitejs.dev/)
- [Tailwind](https://tailwindcss.com/)
- [Alpine.js](https://github.com/alpinejs/alpine).

Installation
------------

[](#installation)

1. Download the zip for this theme (or clone it) and move it to `wp-content/themes` in your WordPress installation.
2. Run `composer install` in the theme directory.
3. Run `npm install` in the theme directory.
4. Activate the theme in Appearance > Themes.
5. Make sure you have installed [Advanced Custom Fields Pro](https://www.advancedcustomfields.com/)

Development
-----------

[](#development)

Timberland builds your css and js files using Vite. This allows you to use the latest Javascript and CSS features.

To get started:

1. Run `npm run build` to generate assets that can be used in the admin block editor. This only needs to be run as often as you want to see updated block previews in the admin.
2. Run `npm run dev` to start the Vite dev server.

### CLI Commands (Nestor)

[](#cli-commands-nestor)

The theme includes a CLI tool named Nestor to streamline development. Use `php nestor` or `./nestor` to run the following commands:

#### Main Commands

[](#main-commands)

- **`completion`** - Generates the shell completion script for your shell
- **`help`** - Displays help for a specific command ```
    php nestor help block:create
    ```
- **`list`** - Lists all available commands

#### Block Management

[](#block-management)

- **`block:create`** - Creates a new Gutenberg block with full scaffolding

    ```
    php nestor block:create
    ```

    This interactive command will prompt you for:

    1. **Block name** - Enter a human-readable name (e.g., "Hero Banner")
    2. **Category** - Choose from:
        - **Layout** - For structural blocks (sections, containers)
        - **Component** - For reusable UI components (buttons, cards)
        - **Query** - For dynamic content blocks (post lists, archives)
        - **Module** - For blocks within existing modules
    3. **Module selection** - If you selected "Module" category, choose which module to add the block to

    The command automatically generates:

    - **Block directory** in `src/blocks/{category}/{slug}/` (or `src/modules/{module}/blocks/{slug}/` for modules)
    - **block.json** - Block registration configuration with metadata, category, icon, and ACF settings
    - **{slug}.twig** - Twig template file for rendering the block's HTML output
    - **{BlockName}BlockModel.php** - PHP model class extending `BlockModel` to handle data preparation and business logic
    - **acf.json** - ACF field group definition with a sample "title" field, automatically linked to the block

    Example workflow:

    ```
    php nestor block:create
    # Enter "Feature Card" as block name
    # Select "Component" as category
    # Block created at: src/blocks/component/feature-card/
    ```

#### View Management

[](#view-management)

- **`view:publish`** - Publishes a default Timber view to your theme for customization ```
    php nestor view:publish
    ```

    Allows you to copy default Timber templates into your theme directory so you can modify them without affecting the core files.

### Live Reload

[](#live-reload)

Live reload is enabled by default with vite.

Vite config is located in ./vite.json.

`environment` variable in this file is read by this WP theme to know if it load assets from HMR or not.

`environment` variable is set automatically when running `npm run build` (environment = production) or `npm run dev` (environment = development).

### Wordpress theme config

[](#wordpress-theme-config)

theme.json is generated from files in ./theme folder.

THe command `npm run build` automatically update the file in ./theme.json.

#### Colors

[](#colors)

Define colors in ./theme/theme-colors.js.

This way the same colors are available from :

- WP Gutenberg color palette
- Tailwind css class
- ACf color field (loaded in ./src/assets/main.js)

ACF related features
--------------------

[](#acf-related-features)

### Gutenberg blocks

[](#gutenberg-blocks)

#### General

[](#general)

Each block in src/blocks is located in a dedicated folder (src/blocks/component/button/) and require a block.json file to be auto registered.

Render twig file will be in priority order:

- folder-name.twig (src/blocks/component/button/button.twig)
- index.twig (src/blocks/component/button/index.twig)

ACF field group associated with the block will be stored in the dedicated folder :

- src/blocks/component/button/acf.json

A block can be easily copied to another daerisimber theme without adaptations.

#### Variants

[](#variants)

Sometimes you need to display same field with another layout.

You can create a folder variant/ containing twig template files in your block folder to automaticly add a field "Variant" in block admin panel.

```
    {% set variant_path = block.path ~ '/variant/' %}

    {% include [variant_path ~ fields.variant, variant_path ~ 'default.twig'] ignore missing %}

```

### Modules

[](#modules)

Modules are self-contained features that can include custom post types, ACF fields, and blocks. The theme provides a `BaseModule` class to simplify module development.

#### Creating a Module

[](#creating-a-module)

1. Create a new directory in `src/modules/{ModuleName}/`
2. Create a module class extending `BaseModule`:

```