Getting started

Theme and layouts

PageTree provides the content of the page: the blocks. Your theme provides everything else. For a page to display, the active theme needs at least one layout.

What a layout does

A layout is the frame shared by your pages: the HTML structure, the stylesheets, the header, the menu and the footer. It contains the {% page %} tag, which marks where the page content goes.

For a PageTree page, that content is its list of blocks. The rest of the screen comes from the layout.

Layouts are .htm files in the layouts folder of your theme, for example themes/my-theme/layouts/default.htm.
In the back-office, you find them in the Editor, CMS section, under Layouts.
A theme that already displays CMS pages already has layouts. PageTree uses them as they are.

Choose the layout of each page

The layout is chosen page by page, in the Layout field of the page header.

The list shows the layouts of the active theme. Each layout is listed by its description, or by its file name when it has none.
The editor preview uses the same layout as the website.
You can have several layouts, for example one for the home page and one for inner pages.

Always pick a layout. Without one (Select a layout), the page renders the block HTML alone, with no header, no menu and none of the theme styles.

A minimal layout

Here is a complete, working layout. Save it as layouts/default.htm, or create it from Editor → CMS → Layouts.

description = "Standard page"

[pageTreeSeo]
==
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% component 'pageTreeSeo' %}
    <link rel="stylesheet" href="{{ 'assets/css/theme.css'|theme }}">
    {% styles %}
</head>
<body>
    <header><!-- logo, menu --></header>
    <main>
        {% page %}
    </main>
    <footer><!-- footer --></footer>
    {% framework extras %}
    {% scripts %}
</body>
</html>

Item	Purpose	Required
`{% page %}`	Where the page blocks are rendered.	Yes
`description`	Name of the layout in the editor Layout list.	No, recommended
`{% styles %}`	Stylesheets of the CMS components placed as blocks.	Yes if you use CMS components
`{% scripts %}`	Scripts of the CMS components placed as blocks.	Yes if you use CMS components
`{% framework extras %}`	The October CMS AJAX framework, used by components that submit forms without reloading the page.	Only for those components
`[pageTreeSeo]` and `{% component 'pageTreeSeo' %}`	The `<title>` tag, description, canonical URL, Open Graph, Twitter/X card, JSON-LD.	No, recommended

The pageTreeSeo component writes the <title> tag itself: do not add a second one to the layout. Its options are described in Theme integration.

Block styles

There is nothing to add for the built-in blocks: their stylesheet is loaded with their HTML, whatever the layout. These styles are deliberately light: your theme rules always win. To match colours and spacing to your brand, see Block styles.

Check your layout

Create a test page with a Hero banner block, pick your layout and save.
The preview should show the theme header and footer around the block.
Click Open page: the website should show the same thing.

If the preview stays empty, check that the layout renders correctly on its own. See Troubleshooting.

Next steps

Create and publish your first page
Theme integration: this.page variables, SEO component, blocks in a CMS page