Templates

Learn how to create and manage page templates in TheDock.

Video Tutorial Coming Soon

Watch: Building Templates (7 min) - Complete guide to creating and editing templates.

Overview

Templates are the core building blocks of your WordPress theme. Each template defines the complete layout for a specific type of page:

Homepage
Blog archive
Single post
Individual pages
Category pages
Search results
404 error page

Understanding Templates

What is a Template?

A template is a complete page layout containing:

Header - Site header (logo, navigation)
Sections - Content blocks stacked vertically
Footer - Site footer (links, copyright)

Template Hierarchy

Templates follow WordPress's template hierarchy:

Template Type	Used For
Frontpage	Homepage (front page)
Page	Static pages
Single	Individual blog posts
Archive	Blog listing, category pages
Author	Author archive pages
Taxonomy	Category/tag archives
Search	Search results page
404	Error page (not found)

Managing Templates

Accessing Templates

Click B. Layout in the navigation
Click Templates in the sidebar

Template Categories

Templates are organized as:

Category	Description
In Use	Templates assigned to your theme
Unused	Created templates not currently assigned
Library	Pre-built templates to choose from

In Use Templates

These templates are actively generating pages on your site. Each shows:

Template name
Which page type it's assigned to
Edit and preview buttons

Unused Templates

Templates you've created but haven't assigned. Useful for:

Work in progress
Alternative versions
Backup layouts

Template Library

Pre-built templates included with TheDock. Browse by:

Page type
Layout structure

Creating Templates

From Scratch

In Templates, click New Template
Choose Empty Template
Name your template
Start building in the editor

From Library

Browse the Library section
Click a template to preview
Click Use Template to copy it to your theme
Customize as needed

From Existing

Find an existing template
Click Duplicate
Rename the copy
Modify without affecting the original

Editing Templates

The Template Editor

When you edit a template, you see:

Area	Purpose
Left Panel	Tree view of template structure
Center	Live preview of your template
Right Panel	Settings for selected element

Template Structure

Templates have a hierarchy:

Template
├── Header (optional, usually a module)
├── Section 1
│   └── Grid
│       ├── Area (column)
│       │   └── Block (content)
│       └── Area (column)
│           └── Block (content)
├── Section 2
│   └── Grid
│       └── Area
│           └── Block
└── Footer (optional, usually a module)

Hierarchy Explained

Level	What It Is
Template	The complete page
Section	Full-width horizontal row
Grid	Container that arranges areas in columns
Area	A column within the grid
Block	Individual content element

Working with Sections

Adding Sections

In the tree view, click + on a section
Choose Add Section Above or Add Section Below
Select a section type:
- Empty - Start from scratch
- Blueprint - Pre-made section layout
- Module - Linked reusable section

Section Settings

Select a section to configure:

Setting	Description
Background	Color or image
Width	Content container width
Padding	Top/bottom internal space
Visibility	Show/hide on specific devices

Reordering Sections

Drag and drop in the tree view
Or use Move Up/Down buttons in the action menu

Deleting Sections

Select the section
Click Delete or press Delete key
Confirm deletion

Working with Grids

Grid Purpose

Grids arrange content in columns using the 12-column system.

Grid Settings

Setting	Description
Columns	Number of column areas
Gap	Space between columns
Alignment	Vertical alignment of areas

Column Distribution

Common column layouts:

Layout	Column Spans
Full width	12
Two equal	6 + 6
Three equal	4 + 4 + 4
Four equal	3 + 3 + 3 + 3
Sidebar left	4 + 8
Sidebar right	8 + 4

Working with Areas

Area Settings

Setting	Description
Column Span	How many grid columns to occupy
Padding	Internal spacing
Background	Area-specific background
Alignment	How blocks align within

Adding Blocks to Areas

Select an area in the tree
Click + to add a block
Choose block type (Text, Image, Button, etc.)

Working with Blocks

Available Block Types

Block	Purpose
Text	Headings, paragraphs, rich text
Image	Single images, photos
Button	Call-to-action buttons
Video	Embedded videos
Gallery	Image galleries
Post Loop	Dynamic post listings
Form	Contact forms
Code	Custom HTML/embed
Spacer	Empty space

Block Settings

Each block type has specific settings. Common ones:

Setting	Description
Typography	Text style (Huge, Large, etc.)
Color	Text and background colors
Spacing	Margins around the block
Link	Make block clickable

Working with Loops

Loops are one of TheDock's most powerful features. A loop displays multiple items (posts, products, repeater fields) using a template that repeats for each item.

What is a Loop?

A loop is an area configured to display dynamic content from WordPress. Instead of showing a single piece of content, it iterates through multiple items and renders each one using the same block template.

┌─────────────────────────────────────────────────────────┐
│  LOOP AREA                                              │
│  ┌─────────────┐ ┌─────────────┐ ┌─────────────┐       │
│  │   Post 1    │ │   Post 2    │ │   Post 3    │       │
│  │  ┌───────┐  │ │  ┌───────┐  │ │  ┌───────┐  │       │
│  │  │ Image │  │ │  │ Image │  │ │  │ Image │  │       │
│  │  └───────┘  │ │  └───────┘  │ │  └───────┘  │       │
│  │  Title      │ │  Title      │ │  Title      │       │
│  │  Excerpt    │ │  Excerpt    │ │  Excerpt    │       │
│  └─────────────┘ └─────────────┘ └─────────────┘       │
│        ↑               ↑               ↑                │
│        └───────────────┼───────────────┘                │
│                Same template                            │
│              applied to each post                       │
└─────────────────────────────────────────────────────────┘

Creating a Loop

Select an Area in your template
In the area settings, change Type to Loop
Configure the Query Type (what content to show)
Add blocks inside the area (these become your item template)
Set Items Per Page to control how many items display

Loop Query Types

The Query Type determines what content populates your loop:

Query Type	Purpose	Use Case
Auto	Uses WordPress main query	Archive pages, category pages
Custom	Specify post type and filters	Show specific content anywhere
Related	Posts related to current post	"Related articles" on single posts
Previous/Next	Adjacent posts	Post navigation
Relationship	ACF relationship field	Manually curated posts
Repeater	ACF repeater field	Loop through field rows

Example: Blog Post Grid

To create a grid of blog posts:

Add a Section to your archive template
Add a Grid with one full-width Area
Set the area Type to Loop
Set Query Type to Auto (uses the archive query)
Set Items Per Page to 6
Add blocks inside the area:
- Image block → Source: Featured Image
- Heading block → Source: Post Title
- Paragraph block → Source: Excerpt

The loop will display 6 posts, each with the same image/title/excerpt layout.

Loop Display Settings

Setting	Description
Items Per Page	How many items to show (e.g., 6, 9, 12)
Columns	How many items per row
Spacing	Gap between loop items
Pagination	Show page navigation for more items
Order By	Sort by date, title, custom field, etc.
Order	Ascending or descending

Loop Layouts

Loops support special layout modes:

Layout	Description
Grid	Items in rows and columns (default)
List	Items stacked vertically
Accordion	Collapsible items (great for FAQs)

Accordion Loop

The accordion layout is perfect for FAQs or expandable content:

Set Loop Layout to Accordion
Add a Breaker block to separate the summary from content
Blocks before the breaker show as the clickable header
Blocks after the breaker show when expanded

┌─────────────────────────────────────────┐
│ ▶ Question 1 (always visible)           │  ← Before breaker
├─────────────────────────────────────────┤
│   Answer content here...                │  ← After breaker
│   (hidden until clicked)                │     (expandable)
└─────────────────────────────────────────┘

Filtering Loops

Add interactive filters to let users narrow down results:

Enable Filters in the loop settings
Choose which taxonomies to filter by (categories, tags, etc.)
Users can click filters to show only matching items

Dynamic Sources in Loops

Inside a loop, blocks can pull data from each item:

Source	Displays
`Post Title`	The item's title
`Featured Image`	The item's featured image
`Excerpt`	The item's excerpt
`Date`	Publication date
`Author`	Author name
`Categories`	Assigned categories
`Custom Field`	ACF or custom meta field

Loop with ACF Repeater

To loop through an ACF repeater field:

Create a repeater field in ACF (e.g., "Team Members")
Set the area Query Type to Repeater
Select the repeater field name
Map sub-fields to blocks:
- Image block → photo sub-field
- Heading block → name sub-field
- Paragraph block → bio sub-field

Each repeater row becomes a loop item.

Assigning Templates

Templates must be assigned to appear on your site.

In TheDock

Go to C. Build > Theme Structure
Find the page type (Homepage, Single Post, etc.)
Click Change Template
Select the template to use

Multiple Assignments

Some templates can be used for multiple page types:

Same "Index" template for archives and taxonomies
Same "Page" template for all static pages

Exporting Templates for WordPress Editor

Templates don't have to be assigned in Theme Structure to be useful. You can mark templates for export so they become available as Page Templates in the WordPress editor.

How It Works

Create a template in TheDock
In the template settings, enable Export for WordPress
Export your theme
In WordPress, when editing a page, the template appears in the Page Attributes > Template dropdown

Use Cases

This is useful when:

Landing pages - Create various landing page layouts that editors can choose from
Special pages - Offer different layouts for specific content (full-width, sidebar, etc.)
Client flexibility - Let content editors choose layouts without accessing TheDock

Example: Multiple Page Layouts

You might create:

Template	Purpose
Page - Default	Standard page with sidebar
Page - Full Width	No sidebar, edge-to-edge content
Page - Landing	Hero section, no header/footer
Page - Contact	Form-focused layout with map

Each can be marked for export, giving WordPress editors a choice when creating pages.

Template Selection in WordPress

After export, editors see your templates in the WordPress page editor:

Edit a page in WordPress
In the right sidebar, find Page Attributes
Open the Template dropdown
Select from your TheDock templates
Update the page

The page now uses that specific template layout.

Best Practices

1. Name Templates Clearly

Use descriptive names: "Homepage Hero", "Blog Archive Grid", "Product Single"

2. Keep It Simple

Start with few sections. Add complexity only when needed.

3. Use Modules for Repetition

Headers, footers, and recurring sections should be modules.

4. Test Responsive

Preview on all devices before finalizing.

5. Save Often

Though auto-save works, manual saves ensure nothing is lost.

6. Duplicate Before Major Changes

Keep a working version while experimenting.

Troubleshooting

Template not appearing on site

Check it's assigned in Theme Structure
Verify the template is in "In Use"
Export the theme after changes

Sections overlapping

Check section padding settings
Verify grid is properly configured

Content not centered

Check grid width settings
Verify area spans equal 12

Changes not showing after export

Clear any caching plugins
Hard refresh the browser (Ctrl+Shift+R)

Modules - Reusable template sections
Grid System - Column layouts explained
Theme Structure - Assigning templates

← Back to Documentation

Overview​

Understanding Templates​

What is a Template?​

Template Hierarchy​

Managing Templates​

Accessing Templates​

Template Categories​

In Use Templates​

Unused Templates​

Template Library​

Creating Templates​

From Scratch​

From Library​

From Existing​

Editing Templates​

The Template Editor​

Template Structure​

Hierarchy Explained​

Working with Sections​

Adding Sections​

Section Settings​

Reordering Sections​

Deleting Sections​

Working with Grids​

Grid Purpose​

Grid Settings​

Column Distribution​

Working with Areas​

Area Settings​

Adding Blocks to Areas​

Working with Blocks​

Available Block Types​

Block Settings​

Working with Loops​

What is a Loop?​

Creating a Loop​

Loop Query Types​

Example: Blog Post Grid​

Loop Display Settings​

Loop Layouts​

Accordion Loop​

Filtering Loops​

Dynamic Sources in Loops​

Loop with ACF Repeater​

Assigning Templates​

In TheDock​

Multiple Assignments​

Exporting Templates for WordPress Editor​

How It Works​

Use Cases​

Example: Multiple Page Layouts​

Template Selection in WordPress​

Best Practices​

1. Name Templates Clearly​

2. Keep It Simple​

3. Use Modules for Repetition​

4. Test Responsive​

5. Save Often​

6. Duplicate Before Major Changes​

Troubleshooting​

Template not appearing on site​

Sections overlapping​

Content not centered​

Changes not showing after export​

Related Topics​