Skip to main content

Your First Theme

Follow this step-by-step guide to build your first WordPress theme with TheDock.

Overview​

In this tutorial, you'll:

  1. Explore the TheDock interface
  2. Customize your color palette
  3. Adjust typography settings
  4. Modify a page template
  5. Configure your header and footer
  6. Export and preview your theme

Estimated time: 15-20 minutes

Step 1: Explore the Dashboard​

When you open TheDock, you'll land on the Design > Dashboard.

The Dashboard shows a preview of your homepage template. This is where you can see the overall effect of your design changes.

Take a moment to:

  • Scroll through the preview
  • Notice the current color scheme
  • Observe the typography styles

Step 3: Customize Colors​

Click on Colors in the left sidebar (under Design).

Understanding the Color Palette​

TheDock uses a 5-color palette system:

ColorPurpose
BaseBackground color (usually light)
ContrastText color (usually dark)
PrimaryMain brand color
SecondarySupporting brand color
AccentHighlight/CTA color

Each color automatically generates tints (lighter) and shades (darker) for flexibility.

Change a Color​

  1. Click on any color swatch (e.g., Primary)
  2. Use the color picker or enter a HEX value
  3. Watch the preview update in real-time

Try a Preset​

Want quick inspiration? Click Presets to try pre-made palettes, or Randomize for a surprise.

Tip: Use Undo (Ctrl/Cmd + Z) to revert any changes you don't like.

Step 4: Adjust Typography​

Click on Typography in the left sidebar.

Base Size​

The Base Size is the foundation of all typography. It affects:

  • Body text size
  • Heading proportions
  • Spacing calculations

Try changing the base size and watch how everything scales proportionally.

Typographic Scale​

TheDock provides 5 text styles:

StyleTypical Use
HugeHero headlines, main titles
LargeSection headings
MediumSubheadings
NormalBody text, paragraphs
SmallLabels, captions, metadata

Customize a Style​

  1. Click on any style (e.g., Huge)
  2. Adjust:
    • Font Family - Choose from available fonts
    • Font Weight - Light to Bold
    • Line Height - Spacing between lines
    • Letter Spacing - Space between characters
    • Size - Relative size multiplier

Step 5: Modify a Template​

Now let's edit an actual page template.

  1. Click B. Layout in the navigation tabs
  2. Click Templates in the left sidebar
  3. Find your frontpage template
  4. Click Edit to open the template builder

The Template Builder​

You'll see:

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

Select an Element​

Click on any element in the preview (or in the tree view) to select it.

The right panel will show its properties.

Try These Edits​

  1. Change a heading: Click on a heading block, then edit the text
  2. Adjust spacing: Select a section, adjust padding in the settings
  3. Change background: Select a section, choose a background color

Add a New Section​

  1. In the tree view, click the + button on a section
  2. Choose "Add Section Below"
  3. Select a blueprint (pre-made section) or start empty
  4. Customize as needed

Step 6: Configure Header & Footer​

Edit the Header​

  1. In B. Layout, click Header
  2. The header editor opens
  3. Customize:
    • Logo placement
    • Navigation style
    • Colors and spacing
  1. Click Footer in the left sidebar
  2. Assign a footer module or create a new one
  3. Customize content and styling

Step 7: Export Your Theme​

You've made changes - now let's see them live!

Export Process​

  1. Click Export Theme in the top header bar
  2. Wait for the export to complete
  3. Click Back to WordPress to return to your site

View Your Theme​

  1. In WordPress, go to Appearance > Themes
  2. Make sure "TheDock" theme is active
  3. Visit your site's frontend to see your changes!

What You've Learned​

Congratulations! You've just:

  • Explored the TheDock interface
  • Customized colors using the palette system
  • Adjusted typography with the scale system
  • Edited a page template in the visual builder
  • Configured header and footer
  • Exported and previewed your theme

Next Steps​

Continue learning with these guides:

Design Deep Dives​

Layout Building​

Going Further​

Tips for Success​

  1. Save often - Though auto-save is enabled, manual saves ensure nothing is lost
  2. Use undo - Experiment freely knowing you can always go back
  3. Preview on devices - Check desktop, tablet, and mobile regularly
  4. Keep it simple - Start with small changes, build complexity gradually
  5. Export to test - Regular exports help catch issues early

← Back to Documentation