I Built a Full Dynamic WordPress Site From a Static Design in 1 Hour (OMIDE × LocalWP)

In this video I build a brand-new Etch website from scratch — using what's become my favorite approach to building with Etch right now. It starts with a design. My favorite way to design a new site is with tools like [clonedesign] / in my case OpenDesign, where I designed a hypothetical construction company website. Then I use the OMIDE LocalWP starter to rebuild that site in WordPress. The source is vanilla HTML, CSS, and JS with BEM — no ACSS — so we build our own mini CSS framework (tokens, utilities, buttons, resets) and see how easy it is to recreate the whole thing. The design also deliberately includes CPTs and custom fields, so we get to see how the starter handles data structures. What's covered: 🏗️ Creating the LocalWP site from a blueprint + "Open Site Shell" (so the dev kit gets CLI access) 🤖 Using Codex this time (last video was Grok) — thoughts on reasoning effort (high vs. medium) and the speed/quality tradeoff 📋 Running the new-project skill with a build brief pointing at the source site + a "no ACSS, build our own mini framework, use ACF for CPTs" directive 🧠 Letting the agent plan the CMS first — it correctly identifies Projects, Team Members, Testimonials CPTs, taxonomies, repeater/gallery/relationship fields, and asks smart questions (single routes? facets?) 🌳 Git on every step so you can branch, experiment, and roll back 🎨 Building the homepage + index template first (header, footer, project card as components; a projects loop) 🔁 One iteration to fix the styles (agent imagined instead of reading source — a fair correction), then a near-perfect replica 🖼️ Annotations in Codex: switch the image prop from URL → media ID for dynamic images 🧭 A single "goal prompt" to finish the rest: project archive (with OMIDE Facets radio), single project template, About & Contact pages ✅ Final result: fully dynamic, BEM-classed, scalable, responsive, with a filtering system — done in ~1 hour with only two iterations total My takeaways in the video: Start from the CMS, then build the homepage first — it gives you the patterns for the rest. Don't force BEM (or any framework) on every project — but here it was the right call. Building your own small UI components (mobile menu, mega menu, slider) is often easier than fighting an abstraction layer. But for things like OMIDE Facets or OMIDE WooCommerce — just use the dedicated components, rebuilding them isn't worth it. Stack: OMIDE LocalWP Starter · LocalWP · WordPress · Etch · ACF · Codex · OpenDesign · BEM · Git Next videos: rebuild challenges — taking an existing Bricks + ACSS site and an old Elementor site, and seeing how this workflow holds up on messier real-world sources. If this was useful, sub and comment what you want next. 👋 0:00 Intro & the source design (OpenDesign construction company) 1:33 Create the LocalWP site from a blueprint 2:07 "Open Site Shell" + cleanup (deactivate ACSS, update Etch) 2:31 Switching to Codex (vs. Grok) & reasoning-effort thoughts 3:47 new-project skill: build brief, point at source, no-ACSS directive 5:01 Project scaffolded & attached to LocalWP 5:52 Plan the CMS first (CPTs, taxonomies, custom fields) 6:52 Init Git repo & commit workflow 9:00 Agent's smart questions (single routes, facets, what to seed) 12:46 CMS implemented — inspect in wp-admin (repeater, gallery, relationship) 13:50 Commit, then start with the homepage 14:39 Plan: header/footer/project-card components, projects loop, mini CSS framework 16:14 On forcing BEM (vs. other conventions) 16:54 Inspecting the code: component-level styles, loop presets 18:30 First pass — structure right, styles off → correction prompt 22:05 Second iteration → near-perfect replica 23:00 Codex annotations: image ID vs URL, text prop for URL 24:10 It built its own mobile menu component (don't over-abstract) 26:12 Commit the solid starting point 26:42 The "goal prompt": build the rest (archive, single, About, Contact) 28:13 25 minutes later — everything's done 28:32 Inspecting the result: OMIDE Facets, dynamic linking, single template 30:48 The mini framework stylesheet + fonts note for production 31:49 Final walk-through & recap (2 iterations, ~1 hour) 32:04 What's next: Bricks/ACSS & Elementor rebuilds OMIDE, LocalWP, WordPress, Etch, ACF, BEM, OpenDesign, Codex, AI agent, vibe coding, web development, WordPress development, CPT, custom fields, OMIDE Facets, Bricks, ACSS, Elementor, Git, tutorial