Home » Docs » WP Scratch » PLAN
📌 Pin 🔗 Copy Link 📋 Copy Markdown ⬇️ Download
4 min read

Project Development Plan

This document outlines the development phases for building the Modern WordPress Block Theme, based on the architecture defined in README.md.

Phase 1: Project Setup & Foundation

The goal of this phase is to establish a working local development environment and ensure all the core tooling is functioning correctly.

  • [x] Initialize Git Repository: Create a new repository for the project.
  • [x] Local Environment Setup: Configure a local WordPress installation (e.g., using LocalWP, DDEV).
  • [x] Theme Installation:
    • [x] Clone the starter theme into the wp-content/themes/ directory.
    • [x] Navigate to the theme directory in the terminal.
  • [x] Install Dependencies: Run npm install to download Node.js dependencies (Tailwind CSS, PostCSS, etc.).
  • [x] Verify Build Process:
    • [x] Run npm run dev to start the file watcher.
    • [x] Make a small change to a template file (e.g., add a Tailwind class to index.html) and verify that the style.css file is updated and the change is reflected on the front-end.
  • [x] Initial functions.php Configuration:
    • [x] Ensure add_theme_support('block-templates') and other necessary supports are active as per the README.md.

Phase 2: Core Styling & theme.json Sync

This phase focuses on defining the visual identity of the theme and ensuring a seamless sync between WordPress's global styles and Tailwind's utility classes.

  • [x] Define Design System in theme.json:
    • [x] Colors: Define the color palette (primary, secondary, accent, text, background) under settings.color.palette.
    • [x] Typography: Define font families and font sizes under settings.typography.
    • [x] Spacing & Layout: Define content/wide widths and spacing presets under settings.layout and settings.spacing.
  • [x] Configure tailwind.config.js:
    • [x] Modify the tailwind.config.js file to extend its theme section.
    • [x] Reference the CSS Custom Properties generated by theme.json for colors, font sizes, etc. (e.g., primary: 'var(--wp--preset--color--primary)').
  • [x] Test the Sync:
    • [x] In the WordPress editor, apply a color from the theme.json palette to a block.
    • [x] In a template file, apply the corresponding Tailwind utility class (e.g., bg-primary) to an element.
    • [x] Verify that both the editor and the front-end render the same color, sourced from theme.json.

Phase 3: Build Core Templates & Parts

With the foundation in place, this phase involves building the main structural components and page templates of the theme.

  • [x] Create Template Parts (/parts):
    • [x] Build header.html with site branding, navigation, and other header elements.
    • [x] Build footer.html with footer navigation, copyright info, etc.
  • [x] Create Page Templates (/templates):
    • [x] Develop index.html as the main wrapper, including the header and footer parts.
    • [x] Create page.html for standard pages.
    • [x] Create single.html for single blog posts.
    • [x] Create archive.html for post archives.
    • [x] Create 404.html for handling "not found" errors.
  • [x] Styling: Use Tailwind CSS utility classes for all layout and styling within these HTML files. Leverage core blocks (Group, Stack, Row) for structural layout within the editor.

Phase 4: Develop Custom Blocks

This phase is for creating complex, reusable components that require structured data, going beyond what core blocks offer.

  • [x] Identify Required Blocks: List the custom components needed (e.g., Hero, Testimonial Slider, Call to Action, Icon Grid).
  • [ ] For each block:
    • [x] Hero Banner:
      • [x] Scaffold Block, block.json, index.js, render.php.
    • [ ] CTA Bubble Stats:
      • [x] Scaffold Block, block.json, index.js, render.php.
    • [ ] Card Grid (3-Col):
      • [x] Scaffold Block, block.json, index.js, render.php.
    • [ ] Testimonial Slider:
      • [ ] Scaffold Block, block.json, index.js, render.php.
    • [x] Fluid Container:
      • [x] Scaffold Block, block.json, index.js, render.php.

Phase 5: Content Population & Full Site Editing

This phase involves using the WordPress admin and Full Site Editor (FSE) to build out the site's content and layouts.

  • [x] Populate Content: Create pages, posts, and custom post types as needed.
  • [x] Build with FSE:
    • [x] Use the Site Editor to assemble templates using the created template parts and blocks.
    • [x] Create and assign Template Parts for different sections (e.g., a unique blog post header).
    • [x] Build out key pages using the custom blocks and core layout blocks.
  • [x] Responsive Testing: Thoroughly review the entire site on various screen sizes (desktop, tablet, mobile) and address any styling issues.
  • [x] Cross-Browser Testing: Check for compatibility and consistent appearance in major web browsers (Chrome, Firefox, Safari, Edge).

Phase 6: Finalization & Production Deployment

The final phase involves optimizing the theme for performance and deploying it to a live server.

  • [x] Run Production Build: Execute npm run build to purge unused CSS and minify the final stylesheet.
  • [x] Code Review & Cleanup: Remove any console logs, commented-out code, and unused files.
  • [ ] Deployment:
    • [ ] Deploy the theme files to the production/staging server.
    • [ ] Migrate the database if necessary.
  • [ ] Final QA: Perform a final round of testing on the live server to catch any environment-specific issues.
Created: March 17, 2026 • Last Modified: February 22, 2026