INSTALLATION · WORDPRESS

Using WordPress

Build Coordiation inside a custom or child theme, scan PHP templates and patterns, then enqueue one generated stylesheet through the WordPress asset API.

✓

Run the compiler from your theme directory. WordPress serves the generated CSS; Node.js is needed only during development or CI.

Install inside the theme

Open the active custom or child theme directory, initialize npm if necessary, and add the compiler.

Terminal

cd wp-content/themes/your-theme
npm init -y
npm install -D @coordiation/css

Create the source stylesheet

Separate the editable input from the generated asset that WordPress will enqueue.

assets/css/coordiation.input.css

@coordiation;

@co-theme {
  --co-color-brand-500: oklch(62.3% 0.214 259.815);
}

Add theme build scripts

The theme root is scanned for PHP templates, template parts, and block patterns. Dependencies, caches, and generated output directories are ignored automatically.

package.json

{
  "scripts": {
    "dev": "coordiation-css -i assets/css/coordiation.input.css -o assets/css/coordiation.css --content . --exclude "vendor/**" --watch",
    "build": "coordiation-css -i assets/css/coordiation.input.css -o assets/css/coordiation.css --content . --exclude "vendor/**" --minify"
  },
  "devDependencies": {
    "@coordiation/css": "0.1.0"
  }
}

Enqueue the generated CSS

Use WordPress's stylesheet queue and the file modification time for cache busting.

functions.php

<?php
function coordiation_theme_assets() {
    $relative_path = "assets/css/coordiation.css";
    $absolute_path = get_theme_file_path($relative_path);

    wp_enqueue_style(
        "coordiation-theme",
        get_theme_file_uri($relative_path),
        array(),
        file_exists($absolute_path) ? filemtime($absolute_path) : null
    );
}

add_action("wp_enqueue_scripts", "coordiation_theme_assets");

Use utilities in templates

Literal classes in theme PHP files are included by the built-in scanner. Run watch mode while editing and build once before packaging the theme.

template-parts/hero.php

<section class="co-grid co-min-h-screen co-place-items-center co-bg-black co-text-white">
  <h1 class="co-text-6xl co-font-bold">
    <?php echo esc_html(get_the_title()); ?>
  </h1>
</section>

Terminal

npm run dev

# before uploading the theme
npm run build

PRODUCTION CHECKLIST

Ship predictable CSS

Keep the scanner boundary and generated stylesheet explicit so people, CI, and AI agents produce the same result.

Open WordPress theme assets documentation →

Commit or package assets/css/coordiation.css with the production theme.
Use a child theme when modifying a third-party theme so vendor updates do not overwrite the integration.
Add external plugin-template directories as extra --content entries when those templates use Coordiation classes.
For editor-canvas parity, enqueue the generated stylesheet for block-editor assets according to the theme's editor strategy.

Previous← Using PHP NextInstall from npm →