Nested Theme Structure
Last updated: · Published:
Plate CMS supports a sophisticated nested theme structure that allows for modular development, component reuse, and theme inheritance. This approach enables developers to create maintainable, scalable themes with clear separation of concerns.
Layout Hierarchy
The layout of a post in Plate is built out of the following nested layout components:
Post → Section → Row → Column → Content Element
The dragging/dropping of content elements, and resizing plus changing the order of sections, rows and columns gives the user ultimate freedom to set up the posts layout as they see fit.
Below a more detailed description for each layout component.
Post
Each web page with a URL within a Plate site is a post, consisting of a post type and corresponding content fields. The post is the top level container for Plate's frontend editor, which is loaded in with the tag content_for post, which in turn loads in the rest of the layout scaffold, starting with Sections.
Theme file examples:
theme/posts/pages/show.plate- template for detail pagetheme/posts/pages/index.plate- template for overview page
Sections
Sections are meant to divide the post in (fullwidth) page sections. This way you can have a section with a background image, and a section with extra top and bottom padding, for example. This makes Plate sites compatible with modern web design and enables creating one-page sites.
Theme file example:
theme/sections/sections/section.plate
Rows
Rows are ordered vertically within a section, and can be reordered by the user.
Columns
Columns are ordered horizontally within a row, and are inline draggable by the user. Because of this row/columns structure, the user can create their own layout on a page.
Elements
Elements are pieces of inline content, ordered vertically within a column and also draggable by the user. Elements, just like Posts, have their own content type and corresponding content fields. With elements, the user can fill their layout with needed content.
Theme file example:
theme/elements/paragraphs/paragraph.plate
Required Files
Plate will load a site starting with a theme layout file, layouts/theme.plate by default. This is the file that is the basis for every page, so a header, footer or HTML head tag that appears on every page should be placed here. At the location where {{ content_for_layout }} is called, the page specific content will be loaded.
The page specific content is retrieved by calling the corresponding content for the requested post. This post content is templated separately for each post type) like Pages and Blogposts. For each post type, an index.plate and a show.plate file is required:
index.plate- template used for the overview page of all instances of the post typeshow.plate- template used for the detail page of a single instance of the post type