---
title: Custom Page Templates
description: Learn how to register custom starting templates for the Page Editor.
---

WooNooW allows developers to register custom page templates. These templates appear in the "Create New Page" modal, allowing users to start with a pre-configured layout instead of a blank page.

## Registering a Template

To add a new template, use the `woonoow_page_templates` filter. You should append your template definition to the existing array.

```php
add_filter('woonoow_page_templates', function($templates) {
    $templates[] = [
        'id'          => 'my-custom-landing',
        'label'       => 'Product Launch',
        'description' => 'A structured page for new product announcements.',
        'icon'        => 'rocket', // Lucide icon name (lowercase)
        'sections'    => [
            // Section definitions...
        ]
    ];
    return $templates;
});
```

## Template Structure

Each template requires the following properties:

| Property | Type | Description |
| :--- | :--- | :--- |
| `id` | string | Unique identifier for the template. |
| `label` | string | Display name shown in the modal. |
| `description` | string | Short description of the template's purpose. |
| `icon` | string | Name of a Lucide icon (e.g., `layout`, `users`, `rocket`). |
| `sections` | array | Array of section objects defining the initial layout. |

### Defining Sections

Sections are the building blocks of a page. Each section object mimics the structure stored in the database.

```php
[
    'id'   => uniqid('section_'), // Must be unique
    'type' => 'hero',             // Component type (hero, feature-grid, image-text, etc.)
    'props' => [
        'title'    => ['type' => 'static', 'value' => 'Hello World'],
        'subtitle' => ['type' => 'static', 'value' => 'This is a template.'],
    ],
    'styles' => [
        'contentWidth' => 'contained', // 'full' or 'contained'
        'padding'      => 'medium',
    ]
]
```

## Example: Full Configuration

Here is a complete example that registers a "Support Page" template with a Hero and a FAQ section.

```php
add_filter('woonoow_page_templates', function($templates) {
    $templates[] = [
        'id'          => 'support-page',
        'label'       => 'Support Center',
        'description' => 'Help desk layout with search and FAQ grid.',
        'icon'        => 'help-circle',
        'sections'    => [
            // Hero Section
            [
                'id' => uniqid('section_'),
                'type' => 'hero',
                'props' => [
                    'title' => ['type' => 'static', 'value' => 'How can we help?'],
                    'cta_text' => ['type' => 'static', 'value' => 'Contact Support'],
                    'cta_url' => ['type' => 'static', 'value' => '/contact'],
                ],
                'styles' => ['contentWidth' => 'full']
            ],
            // Content Section
            [
                'id' => uniqid('section_'),
                'type' => 'content',
                'props' => [
                    'content' => ['type' => 'static', 'value' => '<h2>Frequently Asked Questions</h2><p>Find answers below.</p>']
                ],
                'styles' => ['contentWidth' => 'contained']
            ]
        ]
    ];
    return $templates;
});
```

## Available Section Types

Common available section types include:
- `hero`: Large banner with title, subtitle, and CTA.
- `content`: Rich text editor content.
- `image-text`: Split layout with image and text.
- `feature-grid`: Grid of icons and text.
- `cta-banner`: Call to action strip.