Theme Structure

The architectural blueprint that connects your designs to WordPress pages.

The Big Picture: What Problem Does This Solve?

When you build a WordPress site, you face a fundamental question: which design should appear on which page?

When someone visits your homepage, what layout do they see?
When they read a blog post, which template renders it?
When they browse your product archive, what design is used?

Theme Structure is where you answer these questions. It's the bridge between WordPress's content system and TheDock's design templates.

┌─────────────────────────────────────────────────────────────────┐
│                        THEME STRUCTURE                          │
│                                                                 │
│   WordPress Content Types    →    TheDock Templates            │
│   ─────────────────────           ─────────────────             │
│   Homepage                   →    Landing Page Layout           │
│   Blog Posts                 →    Article Template              │
│   Blog Archive               →    Post Grid Layout              │
│   Product Pages              →    Product Detail Template       │
│   Category Archives          →    Category Grid Layout          │
│   404 Error                  →    Error Page Template           │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Understanding the Hierarchy

Before diving into Theme Structure, you need to understand how TheDock organizes content. Think of it as a system of Russian nesting dolls:

The Complete Picture

TEMPLATE (the complete page)
├── SECTION (a full-width horizontal band)
│   └── GRID (content container with columns)
│       └── AREA (a column within the grid)
│           └── BLOCK (actual content: heading, image, button, etc.)

Let's break this down with a real example—a typical blog post page:

Blog Post Template
│
├── SECTION: Header Band
│   └── GRID
│       └── AREA (full width)
│           ├── BLOCK: Logo
│           └── BLOCK: Navigation Menu
│
├── SECTION: Hero Area
│   └── GRID
│       └── AREA (full width)
│           ├── BLOCK: Post Title (dynamic: pulls from WordPress)
│           ├── BLOCK: Featured Image (dynamic)
│           └── BLOCK: Post Meta (author, date)
│
├── SECTION: Content
│   └── GRID
│       ├── AREA (8 columns - main content)
│       │   └── BLOCK: Post Content (dynamic)
│       └── AREA (4 columns - sidebar)
│           ├── BLOCK: Author Bio
│           └── BLOCK: Related Posts
│
└── SECTION: Footer Band
    └── GRID
        └── AREA (full width)
            └── BLOCK: Footer Content

Why This Matters for Theme Structure

When you assign a template to a page type in Theme Structure, you're saying:

"Whenever WordPress needs to display [this type of content], use [this complete template with all its sections, grids, areas, and blocks]."

The Two Worlds: Static vs. Dynamic Content

This is the key concept that makes Theme Structure powerful:

Static Content

Content you design once in TheDock—like a hero headline, a call-to-action button, or a decorative image. This stays the same on every page using that template.

Dynamic Content

Content that comes from WordPress—like post titles, featured images, post content, author names. This changes based on what page is being viewed.

Theme Structure lets you create templates with dynamic placeholders that WordPress fills in at runtime.

┌─────────────────────────────────────────────────────┐
│  TEMPLATE: Blog Single                              │
│  ┌───────────────────────────────────────────────┐  │
│  │ BLOCK: Heading                                │  │
│  │ Source: "the_title" ← Dynamic WordPress data  │  │
│  └───────────────────────────────────────────────┘  │
│  ┌───────────────────────────────────────────────┐  │
│  │ BLOCK: Image                                  │  │
│  │ Source: "featured_image" ← Dynamic            │  │
│  └───────────────────────────────────────────────┘  │
│  ┌───────────────────────────────────────────────┐  │
│  │ BLOCK: Paragraph                              │  │
│  │ Source: "the_content" ← Dynamic               │  │
│  └───────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────┘

When WordPress displays a blog post:

The template structure (sections, grids, areas) stays constant
The dynamic blocks are populated with that specific post's data

The Theme Structure Panel

Accessing It

Click C. Build in the main navigation
Click Theme Structure in the sidebar

What You'll See

The panel displays your entire site architecture as a tree:

Theme Architecture
│
├── 📄 Homepage
│   └── Layout: "Landing Page Hero"
│
├── 📁 Posts (native WordPress)
│   ├── Single: "Article Template"
│   ├── Archive: "Blog Grid"
│   └── Taxonomy: "Category Grid"
│
├── 📁 Pages (native WordPress)
│   └── Single: "Default Page"
│
├── 📁 Products (custom post type)
│   ├── Single: "Product Detail"
│   ├── Archive: "Product Grid"
│   └── Taxonomy: "Product Category"
│
├── 🔍 Search Results
│   └── Layout: "Search Results Grid"
│
├── ❌ 404 Error
│   └── Layout: "Error Page"
│
└── 👤 Author Archives
    └── Layout: "Author Page"

Understanding Page Types

Native WordPress Content

These are built into WordPress:

Type	Description	Templates Needed
Homepage	Your front page	1 layout
Posts	Blog content	Single, Archive, Taxonomy
Pages	Static pages	Single only
Search	Search results	1 layout
404	Error page	1 layout
Author	Author archives	1 layout

Post Types Have Three Template Slots

This is crucial to understand. When you create or configure a post type (like Posts, Products, Events), you can assign templates to three different contexts:

Post Type: "Products"
│
├── SINGLE Template
│   When someone views ONE product
│   URL: yoursite.com/products/blue-widget/
│
├── ARCHIVE Template
│   When someone views ALL products (the listing page)
│   URL: yoursite.com/products/
│
└── TAXONOMY Template
    When someone filters by category/tag
    URL: yoursite.com/product-category/widgets/

Real Example:

You're running a food blog with a "Recipes" post type:

SINGLE (recipe-detail template):
  → Shows one recipe with ingredients, steps, photos
  → Used on: yoursite.com/recipes/chocolate-cake/

ARCHIVE (recipe-grid template):
  → Shows all recipes in a grid layout
  → Used on: yoursite.com/recipes/

TAXONOMY (recipe-category template):
  → Shows recipes filtered by cuisine type
  → Used on: yoursite.com/cuisine/italian/

Working with Theme Structure

Assigning a Template to a Page Type

Find the page type in the tree (e.g., "Posts > Single")
Click on it to select
You'll see the current assignment (or "No layout assigned")
Click Assign Layout or Switch Layout
Browse available templates
Click to assign

Creating a New Template for a Page Type

Find the page type
Click New (or the + icon)
Choose:
- Empty - Start from scratch
- From Blueprint - Use a pre-made starting point
- From Library - Copy an existing template
Build your template
It's automatically assigned to that page type

Understanding "Generic" vs. "Specific" Assignments

This is where it gets interesting:

Generic Assignment (Post Type Level)

Posts > Single: "Article Template"
↓
ALL posts use "Article Template" unless overridden

Specific Assignment (Individual Page Level)

Posts > Single: "Article Template"  ← Generic default
│
├── "My Special Post": Uses "Article Template" (inherits default)
├── "Another Post": Uses "Article Template" (inherits default)
└── "Launch Announcement": Uses "Launch Hero Template" ← Overridden

You can override the default by:

Finding the specific post in Theme Structure
Assigning it a different template
That post now uses its own template while others use the default

Custom Post Types

TheDock lets you create custom content types beyond Posts and Pages.

Creating a Custom Post Type

In Theme Structure, click Add Post Type
Configure:

Setting	Example	Purpose
Title (Singular)	"Recipe"	Used in admin UI
Title (Plural)	"Recipes"	Used in menus, archives
Slug	"recipes"	URL base (/recipes/)
Has Archive	✓ Enabled	Creates a listing page
Public	✓ Enabled	Visible on frontend

Assign templates to Single, Archive, and Taxonomy slots

Example: Creating a "Team Members" Post Type

Step 1: Add Post Type
  - Singular: "Team Member"
  - Plural: "Team Members"
  - Slug: "team"
  - Has Archive: Yes

Step 2: Assign Templates
  - Single: "Team Member Profile" (shows one person)
  - Archive: "Team Grid" (shows everyone)
  - Taxonomy: "Team by Department" (shows filtered by dept)

Result:
  yoursite.com/team/ → Shows all team members in grid
  yoursite.com/team/jane-doe/ → Shows Jane's profile
  yoursite.com/department/engineering/ → Shows engineering team

The Template Fallback System

WordPress uses a fallback hierarchy when templates aren't assigned. TheDock respects this:

Request for a CATEGORY page:
│
├── Is there a Taxonomy template for Posts?
│   ├── YES → Use it
│   └── NO → Fall back...
│
└── Is there an Archive template for Posts?
    ├── YES → Use it
    └── NO → Fall back...
        │
        └── Use the generic Index template

Practical Implication:

You don't need to assign every template slot. Strategic use of fallbacks keeps your theme manageable:

✓ Good approach:
  - Homepage: Custom landing template
  - Posts Single: Article template
  - Posts Archive: Blog grid template (also used for Categories, Tags, Author, Search via fallback)
  - 404: Error template

✗ Over-engineered:
  - Homepage: Landing template
  - Posts Single: Article template
  - Posts Archive: Blog grid
  - Posts Category: Category grid ← Do you really need this to be different?
  - Posts Tag: Tag grid ← And this?
  - Posts Author: Author grid ← And this?
  - Search: Search grid ← Usually same as archive

Connecting Individual Pages

Beyond post types, you can assign templates to specific WordPress pages:

The "Connect Page" Feature

Click Connect Page in Theme Structure
Search for an existing WordPress page
Select it
Assign a specific template

Use Case:

You have a WordPress page called "About Our Company"

By default, it uses the generic "Page" template.

But you want it to have a special layout with:
  - Full-width hero
  - Team member section
  - Timeline of company history

Solution:
  1. Create "About Page Template" with these sections
  2. Connect "About Our Company" page in Theme Structure
  3. Assign "About Page Template" to it

View Options

The Theme Structure panel has several helpful view options:

Option	Purpose
Show Unassigned	Toggle to see pages without templates
Grid/List View	Change how items are displayed
Zoom	Adjust preview size (60-100%)

"Show Unassigned" is Important

When disabled, you only see pages with templates assigned. Enable it to:

Find pages that need templates
See the full scope of your site
Identify gaps in your template coverage

How It All Connects: The Complete Flow

Let's trace what happens when a visitor lands on your site:

1. VISITOR REQUEST
   User visits: yoursite.com/recipes/chocolate-cake/

2. WORDPRESS ROUTING
   WordPress determines:
   - Post Type: "recipes"
   - Template Context: "single" (viewing one item)
   - Post ID: 42 (the chocolate cake recipe)

3. THEME STRUCTURE LOOKUP
   TheDock checks Theme Structure:
   - Recipes > Single = "Recipe Detail Template"

4. TEMPLATE LOADING
   TheDock loads "Recipe Detail Template":
   - Header Section (from global header module)
   - Hero Section with dynamic blocks
   - Content Section with dynamic blocks
   - Footer Section (from global footer module)

5. DYNAMIC CONTENT INJECTION
   WordPress data populates dynamic blocks:
   - the_title → "Chocolate Cake Recipe"
   - featured_image → chocolate-cake.jpg
   - the_content → Recipe instructions
   - custom_field:ingredients → Ingredient list

6. RENDERING
   TheDock generates HTML + CSS
   Page delivered to visitor

Best Practices

1. Start with the Essentials

Assign templates for these first:

Homepage
Page (default for all pages)
Single Post
Archive (covers blog, categories, tags, search)
404

2. Use Fallbacks Strategically

Don't create templates for every slot unless you need them different.

3. Name Templates Clearly

Use descriptive names that indicate purpose:

✓ "Blog Post with Sidebar"
✓ "Product Grid - 4 Columns"
✗ "Template 1"
✗ "New Layout"

4. Test All Page Types

After assigning templates:

Visit an actual blog post
Visit the blog archive
Visit a category
Visit search results
Trigger a 404

5. Document Custom Post Types

If you create custom post types, note:

What content they hold
Which templates they use
Any special fields or taxonomies

Troubleshooting

Wrong template showing

Check the assignment in Theme Structure
Look for specific page overrides
Verify WordPress Settings > Reading configuration
Clear caching plugins

Custom post type not appearing

Ensure "Has Archive" is enabled if you need a listing page
Check the slug doesn't conflict with pages/posts
Verify it's registered correctly in WordPress

Template not updating on live site

Export the theme (C. Build > Export)
Clear any WordPress caching
Hard refresh the browser (Ctrl+Shift+R / Cmd+Shift+R)

Dynamic content not showing

Verify block sources are set correctly (the_title, the_content, etc.)
Check that the post actually has that content
Confirm the Area is set to the correct mode (Single vs. Multiple)

Concepts Glossary

Term	Definition
Template	Complete page layout with sections, grids, areas, and blocks
Section	Full-width horizontal band within a template
Grid	Content container within a section (uses 12-column system)
Area	A column within the grid that holds blocks
Block	Individual content element (heading, image, button, etc.)
Post Type	Category of content (Posts, Pages, Products, etc.)
Single	Template for viewing ONE item of a post type
Archive	Template for viewing ALL items of a post type
Taxonomy	Template for viewing FILTERED items (by category, tag, etc.)
Dynamic Block	Block that pulls content from WordPress at runtime
Static Block	Block with content set directly in TheDock

Templates - Creating and editing templates
Grid System - Understanding the 12-column layout
Modules - Reusable template sections
Export Process - Deploying your theme to WordPress

← Back to Documentation

The Big Picture: What Problem Does This Solve?​

Understanding the Hierarchy​

The Complete Picture​

Why This Matters for Theme Structure​

The Two Worlds: Static vs. Dynamic Content​

Static Content​

Dynamic Content​

The Theme Structure Panel​

Accessing It​

What You'll See​

Understanding Page Types​

Native WordPress Content​

Post Types Have Three Template Slots​

Working with Theme Structure​

Assigning a Template to a Page Type​

Creating a New Template for a Page Type​

Understanding "Generic" vs. "Specific" Assignments​

Custom Post Types​

Creating a Custom Post Type​

Example: Creating a "Team Members" Post Type​

The Template Fallback System​

Connecting Individual Pages​

The "Connect Page" Feature​

View Options​

"Show Unassigned" is Important​

How It All Connects: The Complete Flow​

Best Practices​

1. Start with the Essentials​

2. Use Fallbacks Strategically​

3. Name Templates Clearly​

4. Test All Page Types​

5. Document Custom Post Types​

Troubleshooting​

Wrong template showing​

Custom post type not appearing​

Template not updating on live site​

Dynamic content not showing​

Concepts Glossary​

Related Topics​