IGrow Design System — WordPress integration

This folder gives WordPress developers everything they need to consume the IGrow design system inside a GeneratePress child theme (or any other WP theme). Three layers ship here:

1. Token enqueueing — load tokens.css + components.css from your theme's functions.php. See enqueue-snippet.php.
2. PHP partials — drop-in template pieces (partials/) that mirror the React components but render as escaped HTML for use in get_template_part() calls.
3. Block patterns — pre-composed Gutenberg patterns (block-patterns/) registered via the Block Patterns API, so editors can insert IGrow-branded sections from the pattern library.

A starter theme.json is also included for native block-editor integration of the colour palette, typography, and spacing scale.

Quick start

In your child theme's functions.php:

<?php
// 1. Enqueue tokens + components on every page.
add_action( 'wp_enqueue_scripts', function () {
    $base = get_stylesheet_directory_uri() . '/igrow-web-design-system';
    wp_enqueue_style( 'igrow-tokens',     $base . '/system/tokens.css',     [], '3.0.0' );
    wp_enqueue_style( 'igrow-components', $base . '/system/components.css', [ 'igrow-tokens' ], '3.0.0' );
} );

// 2. Register block patterns (see block-patterns/index.php).
require_once get_stylesheet_directory() . '/igrow-web-design-system/system/wordpress/block-patterns/index.php';

Copy the igrow-web-design-system/ folder anywhere under your child theme (e.g. wp-content/themes/your-child/igrow-web-design-system/). The relative url('fonts/...') references in colors_and_type.css will resolve once the CSS is enqueued from the same path tree.

Using a partial

<?php
// Render the property card markup, passing a $args array.
get_template_part( 'igrow-web-design-system/system/wordpress/partials/property-card', null, [
    'image_url'   => get_the_post_thumbnail_url( $post, 'large' ),
    'type'        => get_post_meta( $post->ID, 'property_type', true ),
    'title'       => get_the_title(),
    'price'       => get_post_meta( $post->ID, 'rent_price', true ),
    'address'     => get_post_meta( $post->ID, 'address', true ),
    'excerpt'     => get_the_excerpt(),
    'specs'       => [
        [ 'value' => '2', 'label' => 'Beds' ],
        [ 'value' => '1', 'label' => 'Bath' ],
        [ 'value' => '72 m²' ],
    ],
    'pets_allowed' => (bool) get_post_meta( $post->ID, 'pets_allowed', true ),
    'href'        => get_permalink(),
] );

All partials use esc_html, esc_attr, esc_url, and wp_kses_post appropriately — never call them with raw user input without re-escaping.

File index

wordpress/
├── README.md              ← you are here
├── enqueue-snippet.php    ← drop into functions.php
├── theme.json             ← block-editor token mapping
├── partials/
│   ├── button.php
│   ├── property-card.php
│   ├── contact-form.php
│   ├── hero.php
│   └── footer.php
└── block-patterns/
    ├── index.php          ← registers all patterns
    ├── hero-rentals.php
    ├── cta-band.php
    ├── property-grid.php
    └── testimonials-row.php