Template System

WordPress template hierarchy and layout structure.

Template Hierarchy

WPDocs uses the standard WordPress template hierarchy for the wpdocs_doc post type:

  • single-wpdocs_doc.php — Individual documentation page
  • archive-wpdocs_doc.php — Archive (auto-redirects to first doc)
  • index.php — Fallback (auto-redirects to first doc)

Three-Column Layout

The main layout uses CSS Flexbox with three regions:

┌──────────────────────────────────────────────────────┐
│ NAVBAR: Search bar │ Version │ Social icons │ Theme  │
├──────────┬──────────────────────────┬────────────────┤
│ SIDEBAR  │ MAIN CONTENT             │ TOC (Premium)  │
│ Logo     │                          │                │
│ Sections │ Section badge            │ On this page   │
│  └ Pages │ H1 Page Title            │  ├ Section 1   │
│          │ Description              │  ├ Section 2   │
│          │                          │  └ Section 3   │
│          │ Rich HTML content...     │                │
│          │                          │                │
│          │ ← Previous    Next →     │                │
├──────────┴──────────────────────────┴────────────────┤
│ FOOTER: © 2026 Site Name  │  Powered by FW           │
└──────────────────────────────────────────────────────┘

Template Parts

docs-sidebar.php

The left sidebar with logo and navigation. Key behaviors:

  • Logo area at top with light/dark mode image switching
  • Sections queried via doc_section taxonomy, sorted by _wpdocs_order
  • Current page highlighted with blue background
  • Free version shows max 3 sections with upgrade prompt
  • Uses sticky positioning — scrolls with page but sticks under navbar

docs-toc.php

The “On this page” right sidebar (Premium). How it works:

  1. Rendered as an empty <ul> container
  2. JavaScript scans all H2 and H3 headings from the content
  3. Generates anchor links with auto-generated IDs
  4. IntersectionObserver highlights the current heading as you scroll
  5. H3 items are indented under their parent H2

Previous / Next Navigation

Built into single-wpdocs_doc.php. The function wpdocs_get_prev_next() flattens all docs in sidebar order (sections → pages within each) and finds the adjacent entries.