Custom Page Templates

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.

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:

PropertyTypeDescription
idstringUnique identifier for the template.
labelstringDisplay name shown in the modal.
descriptionstringShort description of the template's purpose.
iconstringName of a Lucide icon (e.g., layout, users, rocket).
sectionsarrayArray 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.

[
    '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.

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.