File Structure

Theme and plugin directory layout.

Theme Directory

The WPDocs theme follows the TailPress convention with Vite and Tailwind CSS v4:

wpdocs/
├── style.css                  # Theme header (required by WordPress)
├── functions.php              # TailPress init, helpers, CSS vars
├── header.php                 # Top navbar: search, social, dark mode
├── footer.php                 # Footer with optional credit
├── index.php                  # Landing redirect to first doc
├── single-wpdocs_doc.php      # Single documentation page template
├── archive-wpdocs_doc.php     # Archive redirect
├── 404.php                    # Not found page
├── theme.json                 # WordPress block settings
├── vite.config.mjs            # Vite build configuration
│
├── resources/
│   ├── css/
│   │   ├── app.css            # Tailwind imports + custom styles
│   │   ├── theme.css          # Theme CSS variables
│   │   └── editor-style.css   # Block editor styles
│   └── js/
│       └── app.js             # Dark mode, sidebar, TOC, search
│
├── dist/                      # Production-compiled assets
│   ├── .vite/manifest.json    # Asset manifest for PHP
│   └── assets/
│       ├── app-XXXXX.css      # Compiled CSS
│       └── app-XXXXX.js       # Compiled JS
│
├── template-parts/
│   ├── docs-sidebar.php       # Left navigation + logo
│   └── docs-toc.php           # "On this page" right sidebar
│
├── src/                       # PHP utility classes
│   └── Pagination.php
│
└── vendor/                    # Composer (TailPress framework)

Plugin Directory

wpdocs-core/
├── wpdocs-core.php            # Bootstrap, constants, hooks
├── includes/
│   ├── class-cpt.php          # Post type + taxonomies + meta boxes
│   ├── class-icons.php        # 50+ Heroicons library
│   ├── class-license.php      # API license client
│   ├── class-settings.php     # Admin settings (7 tabs)
│   └── class-frontend.php     # AJAX search, template helpers
└── assets/
    ├── admin.css              # Settings page styles
    └── admin.js               # Settings page JS

Architecture

Key design decision: theme = display, plugin = data.

  • The theme only handles layout, templates, CSS, and JavaScript
  • The plugin handles all data: custom post type, taxonomies, settings, and licensing
  • This means you could build a custom theme that works with the same plugin
  • The theme gracefully degrades without the plugin (shows “install plugin” message)