SailWP Documentation

Everything you need to know about your WordPress theme.

Getting Started

Requirements

• WordPress 6.4 or higher
• PHP 7.4 or higher
• Any modern web host (shared hosting works fine)

Installation

1. Download the sailwp.zip file
2. In WordPress, go to Appearance → Themes → Add New → Upload Theme
3. Upload the ZIP file and click Install Now
4. Click Activate
5. The Setup Wizard will open automatically

Setup Wizard

The Setup Wizard launches automatically on first activation. It creates your website in three steps.

Step 1: Welcome

Choose your language. SailWP supports 12+ languages including English, Dutch, German, French, Spanish, Italian, Portuguese, Polish, Swedish, Norwegian, Danish, and Finnish. The admin interface will switch to your chosen language immediately.

Step 2: Your business

Tell SailWP about your website:

• Business name — used in headers and page titles
• Business type — helps AI generate relevant content
• Short description — one sentence about what you do
• Upload photos — optional, used in generated pages
• Style preset — choose from 4 visual styles (see Style Presets)

Step 3: Building

SailWP's AI generates a complete set of starter pages (Home, About, Services, Contact) with content tailored to your business. This takes 10-30 seconds. The pages are fully editable afterward.

Page Editor

The Page Editor is a frontend editing tool for pages generated by the Setup Wizard. It lets you edit text, change images, and use AI to rewrite sections — all directly on your live page.

Entering edit mode

When you're logged in as an admin and viewing a page with SailWP sections, you'll see a pencil button in the bottom-right corner. Click it to enter edit mode. A toolbar appears at the top of the page with Undo and Exit controls.

Text editing

Click any heading, paragraph, or list item to edit it directly. Changes are highlighted with a subtle outline. Press Enter to confirm, Esc to cancel. Changes auto-save after 800ms.

Button link editing

Click any button to edit its text. A "Link:" field appears below the button where you can change the URL. Type the URL and press Enter, or click away to save.

Images

Two ways to work with images:

• Replace existing: Hover over any image and click the "Replace" overlay. The WordPress Media Library opens — pick a new image.
• Add new: Click the image icon in the section toolbar (appears when hovering a section). The Media Library opens — selected image is inserted into the section.

AI section rewriting

Each section has a toolbar that appears on hover. Click the AI button to open the AI panel. Type an instruction like "Make this more formal" or "Add a third feature about mobile support" and press Enter. The AI rewrites the section while preserving the design.

Adding new sections

Between sections, you'll see + buttons. Click one to add a new section. Choose a type (Hero, Features, Content, CTA, Testimonials, FAQ) and describe what you want. AI generates the section in your page's style.

Section management

The section toolbar provides these actions:

Keyboard shortcuts

Modules

SailWP bundles features that normally require separate plugins. Each module can be toggled on or off in Modules (in the admin sidebar). All modules are enabled by default.

AI Features

How it works

SailWP uses AI to generate page content during the Setup Wizard and to rewrite sections in the Page Editor. The AI understands your page's CSS framework and generates content that fits the design — it writes the words, the framework handles the look.

AI key options

SailWP supports two approaches:

1. BYOK (Bring Your Own Key) — Add your own AI API key in a .ai-key file in the theme directory. Requests go directly to the AI provider. Full control, no middleman.
2. AI Proxy — SailWP includes a built-in proxy with free credits to get started. No setup needed. After free credits are used, you can add your own key.

What AI can do

• Generate starter pages — Full homepage, about, services, and contact pages from your business description
• Rewrite sections — Change tone, add content, restructure, translate — just describe what you want
• Create new sections — Generate hero sections, feature grids, FAQs, testimonials, CTAs, and content blocks on demand

WooCommerce

SailWP includes basic WooCommerce compatibility. Product pages, cart, and checkout are styled to match your theme's colors, fonts, and design tokens.

Setup

1. Install and activate WooCommerce
2. That's it — SailWP automatically declares theme support and loads matching styles

What's included

• Product grid styling (responsive: 3 columns → 2 → 1)
• Product image gallery with zoom, lightbox, and slider
• Buttons, forms, and inputs styled to match the theme
• Cart and checkout pages with consistent typography
• Sale badges, star ratings, breadcrumbs, and pagination
• WooCommerce notices styled as theme notifications

Design & Styles

Global Styles

SailWP is a block theme, which means all visual customization happens in the WordPress Site Editor. Go to Appearance → Editor → Styles to access Global Styles.

From Global Styles, you can change:

• Colors — 14 theme colors (primary, accent, backgrounds, text, borders, etc.)
• Typography — 4 bundled font families (DM Sans, Inter, Lora, Nunito), with full control over size, weight, line height, letter spacing, and text transform
• Spacing — 6 spacing presets (XS through XXL) used for padding, margins, and block gaps
• Borders — Color, radius, style, and width on any block
• Shadows — Card shadow and subtle shadow presets

Per-heading typography

In Global Styles, navigate to Typography → Headings. You can set font size, weight, line height, and letter spacing for each heading level (H1–H6) independently. Custom font sizes are supported — type any value you want.

Custom font sizes

SailWP defines 5 font size presets (Small 14px, Medium 18px, Large 26px, Extra large 36px, Huge 48px), but you can type any custom size on any block. The presets are starting points, not limits.

Style Presets

SailWP ships with 4 style presets, selectable in the Setup Wizard or via the Site Editor's Styles panel:

Each preset sets colors, fonts, and spacing as a coherent package. You can further customize any individual value after applying a preset.

For Developers

Architecture

SailWP is a WordPress block theme (Full Site Editing). Key structure:

sailwp/
├── style.css              # Theme header
├── theme.json             # Design tokens, block settings
├── functions.php          # Core logic + module loader
├── welcome.php            # First-run welcome screen
├── templates/             # Block templates (page, single, archive, etc.)
├── parts/                 # Template parts (header, footer)
├── patterns/              # Block patterns (hero, features, CTA, etc.)
├── assets/
│   ├── css/               # Editor, admin, page editor, WooCommerce
│   ├── js/                # Page editor, setup wizard, dashboard, command palette
│   ├── fonts/             # DM Sans, Inter, Lora, Nunito (self-hosted)
│   └── lang/              # JSON translation files
└── inc/                   # Feature modules (one file per feature)
    ├── seo.php
    ├── two-factor.php
    ├── multilanguage.php
    ├── cookie-consent.php
    ├── editor-simplification.php
    ├── backup.php
    ├── svg-upload.php
    ├── site-health.php
    ├── modules.php
    ├── header-footer.php
    ├── starter-pages.php
    ├── page-editor.php
    └── update-checker.php

Module system

Modules are toggled via the sailwp_modules option (stored as an associative array). Check if a module is enabled:

if ( sailwp_module_enabled( 'seo' ) ) {
    // SEO module is active
}

Module definitions live in inc/modules.php in the sailwp_module_definitions() function. Each module has a key, label, description, and icon.

CSS conventions

All SailWP CSS classes use the s24- prefix to avoid collisions:

theme.json

SailWP uses theme.json v3 for all design tokens. Key settings:

• settings.appearanceTools: true — enables all typography and spacing controls in the editor
• settings.color.defaultPalette: false — replaces default colors with the theme's own palette
• settings.typography.defaultFontSizes: false — replaces default sizes with theme sizes
• Per-element styles for headings (h1–h4), links, buttons, and captions
• Block-specific styles for post title, navigation, site title, quote, image, and separator

Hooks & Filters

PHP functions

JavaScript globals

SailWP exposes these globals for editor/admin integration (via wp_localize_script):

AJAX endpoints

WordPress options

FAQ

Is SailWP really free?

Yes. The theme is free and GPL v2+. Always will be. AI features include free credits to get started — after that, bring your own API key. No subscriptions, no premium tiers.

Can I use SailWP with an existing WordPress site?

Yes. Install and activate the theme. Your existing content (posts, pages) stays untouched. The Setup Wizard generates new pages — it doesn't modify existing ones.

Does SailWP work with page builders like Elementor?

SailWP is a block theme designed to work with the WordPress block editor (Gutenberg). Page builders like Elementor or Divi Builder are not tested or officially supported, but they generally coexist since they operate on individual pages.

Can I use my own SEO plugin instead of the built-in one?

Yes. Install your preferred SEO plugin (Yoast, Rank Math, etc.) and SailWP's SEO module automatically disables itself. No conflicts, no duplicate meta tags.

How do I add my own AI API key?

Create a file named .ai-key in the theme directory (wp-content/themes/sailwp/) containing only your API key. The theme reads this file on load. The file is automatically excluded from version control.

What happens if I switch away from SailWP?

Your content stays in WordPress. Posts, pages, and media are all standard WordPress data. The AI-generated pages use clean HTML that works with any theme. Module settings (SEO meta, 2FA) are stored as standard WordPress options and post meta.

Does it work with WooCommerce?

Yes. SailWP includes built-in WooCommerce support with matching styles for product grids, cart, checkout, and all standard WooCommerce pages.