Creating starter kits for SimplyCod Studio

1. Introduction

A starter kit is not an executable WordPress theme. It is a project package imported by SimplyCod Studio, with pages, media, and global settings described in JSON.

This separation makes the kit independent from the active WordPress theme and allows the plugin to keep an internal copy. Deleted pages can therefore be recreated from the stored blueprint without uploading the original ZIP again.

2. Quick start

1. Create a working folder, for example architecture-studio.
2. Add simplycod-kit.json at the root.
3. Create the pages and media folders.
4. Write at least one page JSON file with version: 2.
5. Add local images and reference them through portable tokens.
6. Define design system, header, footer, and menu in the manifest.
7. Zip the folder contents without adding an extra wrapper folder.
8. Upload the ZIP from SimplyCod Studio → Add new and verify all pages.

3. ZIP structure

architecture-studio.zip
├── simplycod-kit.json
├── pages/
│   ├── home.json
│   ├── projects.json
│   └── contact.json
└── media/
    ├── hero.jpg
    ├── project-01.jpg
    └── brand.png

The installable ZIP may contain the manifest, page JSON files, and supported media. Keep documentation, source files, PSD files, scripts, and notes outside the distributable ZIP.

4. The simplycod-kit.json manifest

The manifest is the kit's index. It defines identity, version, pages, media, menu, design settings, header, footer, and optional modules.

{
  "schema": "simplycod.starter-kit",
  "schema_version": 1,
  "id": "architecture-studio",
  "name": "Architecture Studio",
  "version": "1.0.0",
  "description": "Starter kit for professional studios.",
  "pages": [
    { "key": "home", "title": "Home", "file": "pages/home.json", "front_page": true }
  ],
  "media": {
    "hero": "media/hero.jpg"
  }
}

5. Pages and layouts

Each page points to a JSON file. Page keys must remain stable between versions because SimplyCod uses them to restore missing pages and update menu references.

• Use from 1 to 20 pages.
• Keep page keys stable and unique.
• Mark only one page as front_page.
• Avoid absolute URLs from the development site.
• Use tokens for internal page and media references.

6. Sections and columns

Pages are made of sections. Sections contain one or more columns, and columns contain components. Keep this hierarchy clean so the imported page remains easy to edit.

Recommended structure

1. Use a hero section to introduce the page.
2. Add content sections with clear visual rhythm.
3. Use columns only when the content benefits from comparison or grouping.
4. Check mobile stacking before distribution.

Backgrounds

Use background colors, overlays, and images consistently. When a background image is important, define the focal point and test it on mobile.

7. Available components

Starter kits may use the builder's native components: titles, text, images, videos, buttons, dividers, spacers, icons, maps, galleries, accordions, cards, and forms.

8. Images and media

SimplyCod Studio accepts JPG, JPEG, PNG, GIF, WebP, and AVIF. Images are imported into the WordPress Media Library. PNG transparency is preserved; WebP and AVIF depend on the WordPress server support.

• Optimize images before packaging.
• Use descriptive names and stable media keys.
• Provide alternative text where the layout supports it.
• Keep source design files outside the installable ZIP.

9. Portable tokens

Tokens make a kit portable because they avoid hardcoded development URLs and WordPress IDs.

{{page:home}}
{{media:hero}}
{{media_id:hero}}

Use {{page:key}} for internal links, {{media:key}} for imported media URLs, and {{media_id:key}} when a component needs the attachment ID.

10. Native forms

Forms must be described through native component configuration, including fields, labels, validation, privacy text, and destination settings. This keeps the kit independent from third-party form plugins.

• Give every field a clear label.
• Mark required fields explicitly.
• Test validation errors.
• Use a real recipient only after installation.
• Include privacy consent when needed.

11. Menus and links

The kit can create a menu and attach pages to it. Use page tokens instead of absolute URLs so the menu continues to work after import.

12. Design system

A starter kit may define global colors, typography, spacing, button settings, container width, and visual defaults. These settings give the imported site a coherent starting point.

13. Header and footer

The kit can provide an initial configuration for header and footer. Users can later edit both visually in SimplyCod Studio.

• Keep the header compact and mobile-friendly.
• Use the imported menu when possible.
• Keep footer links and legal text generic enough to customize.
• Test desktop and mobile navigation.

14. Creating and validating the package

1. Validate JSON syntax in every file.
2. Check that all files referenced by the manifest exist.
3. Remove hidden files, notes, and source-only assets.
4. Create the ZIP from the folder contents, not from the parent folder.
5. Import the ZIP into a clean WordPress installation.
6. Open every created page and test desktop and mobile rendering.

15. Versions, updates, and restoration

Keep the same id in new versions and increment version. The blueprint copy stored by SimplyCod Studio allows missing pages to be recreated without having the ZIP again.

16. Commented complete example

The attached example demonstrates the full flow with three pages, imported media, design settings, portable tokens, and a native contact form.

• Three pages with internal navigation through tokens.
• JPG photos and a transparent PNG mark.
• Hero with background, overlay, and controlled alignment.
• Gallery and image components with media URL and ID.
• Native contact form with fields, privacy, and validation.
• Global design system reused by pages.

17. Diagnostics

18. Checklist before distribution

• Stable, unique, and documented kit ID.
• Updated version and release notes available.
• From 1 to 20 pages, all present and valid.
• No development WordPress URL or ID.
• Optimized local media, including JPG and PNG tests.
• Alternative image text completed.
• Menu, home page, buttons, and anchors verified.
• Forms tested, including validation errors.
• Header and footer checked on desktop and mobile.
• Restoration of a deleted page verified.
• ZIP within limits and free from disallowed files.
• Material licenses compatible with distribution.