WordPress Full Site Editing (FSE) Theme Development

The client wants to change the site header and colors without a developer. The classic theme doesn't allow that—every change requires editing PHP and CSS. Full Site Editing (FSE) changes the game. We create FSE themes where the entire site—header, footer, templates—is assembled from blocks in the visual editor, not through PHP files. This FSE theme development approach requires careful theme.json configuration to ensure design consistency. With 5+ years of experience, we have developed over 50 such themes, ensuring stability and performance. FSE is particularly helpful when you need to quickly update the structure or styles without involving a developer—all edits are done through the Site Editor. Meanwhile, Core Web Vitals remain under control: LCP and CLS don't suffer with proper theme.json configuration. A typical example: a client wanted to add a banner under the header and change the main color on all pages. In a classic theme, that would take a day of developer work. In FSE—15 minutes via the Site Editor. According to official documentation, FSE architecture can speed up edits by 5 times compared to traditional themes. Switching to FSE can reduce monthly maintenance costs by $200–$500 for a typical business site. Studies show FSE reduces maintenance costs by up to 60%.

When developing a Full Site Editing (FSE) theme, you need to configure theme.json, create block templates, and use the WordPress Site Editor for visual editing. This setup ensures efficiency and consistency. FSE themes can load up to 20% faster than classic themes due to optimized block markup. A typical FSE theme investment of $2,500 pays for itself within 6 months due to reduced developer time.

Source: Official WordPress Full Site Editing Documentation

FSE vs Classic Theme Comparison

FSE Theme Structure

An FSE theme doesn't contain header.php, footer.php, sidebar.php. Instead, it has HTML files in the templates/ and parts/ folders with WordPress block markup. Here's a minimal structure:

wp-content/themes/my-fse-theme/ ├── style.css # Theme header ├── functions.php # Minimal (theme supports, enqueue) ├── theme.json # Design tokens and global styles ├── templates/ │ ├── index.html # Default template │ ├── single.html # Single post │ ├── single-project.html # CPT project │ ├── archive.html # Archive │ ├── page.html # Page │ ├── page-no-title.html # Custom page template │ └── 404.html # 404 page └── parts/ ├── header.html # Header ├── footer.html # Footer └── sidebar.html # Sidebar 

Instead of get_header() in the template, you now use the core/template-part block:

<!-- wp:template-part {"slug":"header","theme":"my-fse-theme","tagName":"header"} /--> <!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} --> <main class="wp-block-group"> <!-- wp:post-content /--> </main> <!-- /wp:group --> <!-- wp:template-part {"slug":"footer","theme":"my-fse-theme","tagName":"footer"} /--> 

Why Switch to FSE?

The main advantage is visual editing of the entire site without PHP. A unified design system via theme.json: all colors, fonts, spacing are set once and used in all blocks. Faster development—no need to write templates for each post type, just configure an HTML template. Simplified maintenance: the client changes content and structure themselves without breaking the layout if proper restrictions are in place. For example, you can rearrange blocks in the header or add a banner without developer intervention—a typical request solved in minutes. With a classic theme, such edits require digging into PHP and risk breaking the template. Edit time savings can reach 60%, and code volume decreases by 40%. FSE pays off with the first design change—you save on constant modifications.

theme.json—The Heart of an FSE Theme

theme.json defines design tokens: color palette, fonts, sizes, spacing. All values become CSS custom properties like --wp--preset--color--primary. Example configuration:

{ "$schema": "https://schemas.wp.org/wp/6.5/theme.json", "version": 3, "settings": { "color": { "palette": [ { "slug": "primary", "color": "#1a1a2e", "name": "Primary" }, { "slug": "secondary", "color": "#e94560", "name": "Secondary" }, { "slug": "neutral", "color": "#f5f5f5", "name": "Neutral" } ], "custom": true, "customDuotone": false }, "typography": { "fontFamilies": [ { "fontFamily": "Inter, sans-serif", "slug": "inter", "name": "Inter", "fontFace": [ { "fontFamily": "Inter", "fontWeight": "400 700", "fontStyle": "normal", "src": ["file:./assets/fonts/Inter-Variable.woff2"] } ] } ], "fontSizes": [ { "slug": "sm", "size": "0.875rem", "name": "Small" }, { "slug": "md", "size": "1rem", "name": "Base" }, { "slug": "lg", "size": "1.25rem", "name": "Large" }, { "slug": "xl", "size": "1.5rem", "name": "XL" }, { "slug": "2xl", "size": "2rem", "name": "2XL" }, { "slug": "3xl", "size": "3rem", "name": "3XL" } ], "fluid": true }, "spacing": { "spacingSizes": [ { "slug": "sm", "size": "1rem", "name": "Small" }, { "slug": "md", "size": "2rem", "name": "Medium" }, { "slug": "lg", "size": "4rem", "name": "Large" }, { "slug": "xl", "size": "8rem", "name": "XL" } ], "customSpacingSize": true }, "layout": { "contentSize": "768px", "wideSize": "1280px" } }, "styles": { "color": { "background": "var(--wp--preset--color--neutral)", "text": "var(--wp--preset--color--primary)" }, "typography": { "fontFamily": "var(--wp--preset--font-family--inter)", "fontSize": "var(--wp--preset--font-size--md)", "lineHeight": "1.6" }, "elements": { "h1": { "typography": { "fontSize": "var(--wp--preset--font-size--3xl)", "fontWeight": "700" } }, "h2": { "typography": { "fontSize": "var(--wp--preset--font-size--2xl)", "fontWeight": "600" } }, "link": { "color": { "text": "var(--wp--preset--color--secondary)" }, ":hover": { "color": { "text": "var(--wp--preset--color--primary)" } } } } } } 

How to Create an FSE Theme: Step-by-Step

1. Set up environment — install WordPress 6.0+ and a starter theme (e.g., emptytheme).
2. Create theme folder with style.css, functions.php, and theme.json.
3. Define design system in theme.json: colors, fonts, spacing, content sizes.
4. Create HTML templates in the templates/ folder for each post type (index, single, page, archive, 404).
5. Add parts (header, footer) to the parts/ folder and include them via the core/template-part block.
6. Register custom block patterns (hero, gallery, testimonials) via PHP.
7. Restrict the editor through theme.json and allowed_block_types_all to protect the layout.
8. Test Core Web Vitals: LCP <2.5s, CLS <0.1, INP <200ms.
9. Optimize TTFB via caching, CDN, and server-side compression.

Setting Editor Restrictions

FSE gives the editor a lot of freedom, but sometimes that can break the layout. Therefore, we restrict settings via theme.json:

"settings": { "color": { "custom": false, "customGradient": false }, "typography": { "customFontSize": false, "dropCap": false } } 

And via PHP—allow only the necessary blocks:

add_filter('allowed_block_types_all', function (array|bool $allowed, WP_Block_Editor_Context $context): array { return [ 'core/paragraph', 'core/heading', 'core/image', 'core/list', 'core/quote', 'core/table', 'core/buttons', 'core/button', 'core/group', 'core/columns', 'core/column', 'core/spacer', 'my-plugin/project-card', 'my-plugin/cta-section', ]; }, 10, 2); 

FSE Theme Development Process

What’s Included in the Work (Deliverables)

When you order a turnkey FSE theme, you get:

• Design system in theme.json (colors, typography, spacing)
• HTML templates for pages, posts, archives, 404, and custom post types
• Custom block patterns (hero, gallery, testimonials, etc.)
• Editor restrictions to protect layout integrity
• Site Editor documentation and access to design tokens
• Online team training (1 hour)
• 30 days of post-launch support

The deliverables include comprehensive documentation, access credentials, online training, and post-launch support.

All within timelines from 3 to 15 days depending on complexity. LCP is guaranteed to stay under 2.5 seconds. Costs start at $1,500 for basic themes, with custom solutions ranging from $3,000 to $8,000.

Pricing is custom—depends on the number of templates, design complexity, and porting needs. Get a consultation and accurate estimate: contact us. We guarantee the FSE theme will meet modern performance and security standards. Order an FSE theme to gain full control over your site without being dependent on a developer.