eddev

Page Templates

Selectable templates for pages and post types

Most views are chosen automatically by the WordPress template hierarchy. A page template is different: it is a selectable template shown in the WordPress editor.

Use page templates for pages with a specific layout or purpose, such as a homepage, landing page, program page, or custom index page.

Define A Template

Create a view and export meta: ViewMeta with templateName.

import { ContentBlocks } from "eddev/blocks"
import { defineView } from "eddev/views"

export const meta: ViewMeta = {
  templateName: "Homepage",
}

export default defineView("template-home", (props) => {
  return <ContentBlocks blocks={props.page?.contentBlocks} />
})

Then pair it with a normal view query:

query Homepage($postId: ID!) {
  page(id: $postId, idType: DATABASE_ID) {
    contentBlocks
  }
}

The filename still matters. views/template-home.tsx should call defineView("template-home", ...).

Naming

Prefer template-* for selectable page templates. It keeps them visually separate from WordPress hierarchy views like page, single, and archive-case-study.

front-page.tsx is still useful when WordPress should choose the site front page automatically. Use template-home.tsx when authors need to pick a homepage-style template from the editor.

Post Types

By default, a templateName view is available for pages. Set postType when the template should be selectable on another post type.

import { defineView } from "eddev/views"

export const meta: ViewMeta = {
  templateName: "Editorial",
  postType: "article",
}

export default defineView("template-editorial", (props) => {
  return <main>{props.article?.title}</main>
})

Use an array when the same template applies to several post types:

export const meta: ViewMeta = {
  templateName: "Landing Page",
  postType: ["page", "campaign"],
}

View Metadata

The public ViewMeta fields are intentionally small:

  • templateName - the label shown in the WordPress template dropdown
  • postType - the post type or post types where the template is available
  • cache - whether the view query can be cached

Most templates only need templateName.

Custom Routes

Page templates are selected on WordPress posts. If the URL does not represent a WordPress post, use a custom route that points to a view instead.

On this page