104 lines
3.5 KiB
Plaintext
104 lines
3.5 KiB
Plaintext
---
|
|
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.
|