TheDock Documentation

Welcome to the official documentation for TheDock - a powerful React-based WordPress theme builder that lets you create beautiful, responsive themes without writing code.

---

Video Tutorials

Get started quickly with our video tutorial series:

Video	Duration	Topics Covered
Getting Started	5 min	Interface overview, first theme
Design System	6 min	Colors, typography, spacing
Building Templates	7 min	Templates, sections, modules
WordPress Integration	5 min	Menus, content, export
Advanced Customization	6 min	Custom code, ACF, WooCommerce

Videos Coming Soon

Video tutorials are in production. Check back for updates.

---

What is TheDock?

TheDock is a visual theme builder that runs inside your WordPress admin. It provides a complete design system with drag-and-drop editing, real-time preview, and seamless WordPress integration.

Key Features

• Visual Editor - Build pages with drag-and-drop, see changes instantly
• Design System - Unified colors, typography, spacing, and icons
• Template Builder - Create reusable page templates and sections
• Responsive Preview - Test your design on desktop, tablet, and mobile
• WordPress Integration - Deep integration with posts, pages, menus, and custom fields
• Team Collaboration - Version control and multi-user editing support
• WooCommerce Ready - Built-in e-commerce styling support

---

Quick Start

1. Customize Design - Adjust colors, typography, and spacing
2. Build Layouts - Create or modify page templates
3. Configure Structure - Assign templates to WordPress pages
4. Export Theme - Generate your WordPress theme

New to TheDock? Start with Your First Theme tutorial.

---

Documentation Sections

Getting Started

• Installation Guide
• Interface Overview
• Your First Theme

Design System

• Colors - Palette, swatches, gradients
• Typography - Fonts, scale, responsive
• Spacing - Grid, padding, margins
• Icons - Icon libraries, UI indicators
• UI Elements - Buttons, forms, shadows

Layout Builder

• Templates - Page layouts
• Modules - Reusable sections
• Header - Site header
• Footer - Site footer
• The Grid System - 12-column layouts

Build & Export

• Theme Structure - WordPress hierarchy
• Custom CSS - Additional styles
• Custom Code - JS, PHP, partials
• Export Process - Publishing your theme

Advanced Topics

• WordPress Integration - Posts, pages, menus
• Custom Fields (ACF) - Advanced Custom Fields
• WooCommerce - E-commerce styling
• Team Collaboration - Versions, multi-user

Reference

• Keyboard Shortcuts - Quick reference
• Troubleshooting - Common issues
• FAQ - Frequently asked questions

---

Three Main Sections

TheDock is organized into three main areas:

Section	Purpose	What You Do
A. Design	Define your visual system	Set colors, fonts, spacing, icons
B. Layout	Build page structures	Create templates, modules, headers, footers
C. Build	Configure & export	Assign templates, add custom code, export theme

---

Support

Need help? Here are your options:

• Check the Troubleshooting Guide
• Review Frequently Asked Questions
• Contact support at thedock.app/support

---

For Documentation Contributors

If you're contributing to this documentation, see the Media Production Guide for screenshot and video specifications.

---

TheDock - Build WordPress themes visually