PHPackages                             leungd/tatami - 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. leungd/tatami

ActiveWordpress-theme

leungd/tatami
=============

Base theme for ULM

11[1 PRs](https://github.com/leungd/tatami/pulls)PHPCI passing

Since Mar 11Pushed 1mo agoCompare

[ Source](https://github.com/leungd/tatami)[ Packagist](https://packagist.org/packages/leungd/tatami)[ RSS](/packages/leungd-tatami/feed)WikiDiscussions main Synced today

READMEChangelogDependenciesVersions (4)Used By (0)

Tatami Theme
============

[](#tatami-theme)

A foundational WordPress starter theme built with modern development tools.

Features
--------

[](#features)

- **Timber/Twig** - Template engine for clean, maintainable templates
- **Vite** - Fast development server and optimized production builds
- **Tailwind CSS 4** - Utility-first CSS framework with typography plugin
- **Modern JavaScript** - ES modules support with Vite

Requirements
------------

[](#requirements)

- PHP 8.0+
- WordPress 5.0+
- Composer
- Node.js & pnpm

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

[](#installation)

1. Clone or copy this theme into your WordPress themes directory
2. Install PHP dependencies: `composer install`
3. Install JavaScript dependencies: `pnpm install`

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

[](#development)

Start the Vite development server:

```
pnpm dev
```

Build for production:

```
pnpm build
```

Lint JavaScript:

```
pnpm lint
```

Format code:

```
pnpm format
```

Configuration
-------------

[](#configuration)

### Tailwind

[](#tailwind)

Tailwind 4 uses CSS-based configuration. Customize the theme in `src/css/tailwind.css` using `@theme` directives. Brand colors, spacing, and other design tokens are configured directly in the CSS file.

### Fluid Grid System

[](#fluid-grid-system)

The theme includes a 12-column fluid grid system (`.fluid-grid`) with named grid lines for flexible layout control:

```

    Full content width
    Custom column span
    Full bleed

```

Use Tailwind's arbitrary value syntax for grid column placement.

### Vite Integration

[](#vite-integration)

Vite is integrated via a custom WordPress plugin in `vite.config.js` that:

- Writes a `build/hot` file when the dev server is running
- Cleans up the hot file on server stop
- Triggers full-page reload on `.php` and `.twig` file changes

The `lib/Vite.lib.php` class provides `asset()`, `css()`, `img()`, and `enqueue_module()` methods for resolving Vite-built assets in WordPress.

### Theme Files

[](#theme-files)

#### Core PHP Files

[](#core-php-files)

- `functions.php` - Main theme setup
- `lib/Tatami.lib.php` - Theme functionality, Timber context, and custom functions
- `lib/Theme.lib.php` - Asset enqueueing
- `lib/Vite.lib.php` - Vite integration for WordPress

#### Template Files (Twig)

[](#template-files-twig)

- `views/base.twig` - Base template with HTML structure
- `views/page.twig` - Default page template
- `views/single.twig` - Single post template
- `views/archive.twig` - Archive/blog template
- `views/search.twig` - Search results template
- `views/404.twig` - 404 error template
- `views/header.twig` - Site header
- `views/footer.twig` - Site footer
- `views/partials/menu.twig` - Menu component with dropdowns
- `views/partials/` - Reusable template partials

Customization
-------------

[](#customization)

### Adding Custom Post Types

[](#adding-custom-post-types)

Add your custom post types in the `register_post_types()` method in `lib/Tatami.lib.php`.

### Adding Custom Taxonomies

[](#adding-custom-taxonomies)

Add your custom taxonomies in the `register_taxonomies()` method in `lib/Tatami.lib.php`.

### Timber Context

[](#timber-context)

Modify the global Timber context in the `add_to_context()` method in `lib/Tatami.lib.php`. This is where you can add site-wide variables accessible in all Twig templates.

### Custom Twig Filters

[](#custom-twig-filters)

Add custom Twig filters in the `add_to_twig()` method in `lib/Tatami.lib.php`.

Theme Options
-------------

[](#theme-options)

This theme is designed to work with ACF (Advanced Custom Fields) options pages. Configured options are available in Twig templates via `{{ options }}`. ACF is optional — the theme gracefully handles its absence.

Assets
------

[](#assets)

### Styles

[](#styles)

Main stylesheet: `src/css/tailwind.css`

### Scripts

[](#scripts)

Main JavaScript: `src/js/main.js`

License
-------

[](#license)

This theme is licensed under the terms specified in the LICENSE file.

###  Health Score

28

—

LowBetter than 54% of packages

Maintenance61

Regular maintenance activity

Popularity3

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity35

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/1746141?v=4)[Derek Leung](/maintainers/leungd)[@leungd](https://github.com/leungd)

---

Top Contributors

[![leungd](https://avatars.githubusercontent.com/u/1746141?v=4)](https://github.com/leungd "leungd (7 commits)")

### Embed Badge

![Health badge](/badges/leungd-tatami/health.svg)

```
[![Health](https://phpackages.com/badges/leungd-tatami/health.svg)](https://phpackages.com/packages/leungd-tatami)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)