WordPress Site Editor: Complete Tutorial

The WordPress Site Editor represents a paradigm shift in website building, providing a unified interface for editing every aspect of your site—from templates and template parts to global styles and navigation. Understanding the Site Editor is essential for leveraging the full power of modern WordPress block themes.

Accessing and Navigating the Site Editor

The Site Editor becomes available when you activate a block theme. Access it from the WordPress admin sidebar under Appearance → Editor. This launches a focused editing environment distinct from the post editor, designed specifically for site-wide template and style management. The interface prioritizes full-screen editing with minimal distractions.

The Site Editor’s left sidebar provides navigation between different editing contexts: Templates, Template Parts, and Pages. Each section displays available items for editing. The top toolbar contains crucial controls: the WordPress logo returns you to the main navigation, the Styles button opens Global Styles, the list view button reveals block hierarchy, and the save button commits your changes.

Template Management and Editing

The Templates section lists all available templates in your theme—index, home, single, page, archive, and more. Templates marked with a dot indicator have customizations stored in the database. Click any template to open it in the visual editor. The editing experience matches the post editor, with blocks, inspector panel, and toolbar controls operating identically.

When editing templates, you work with structural blocks like Header, Query Loop, Post Content, and Template Part blocks. These blocks create the skeleton of your template, defining how content displays for different page types. Add, remove, and rearrange blocks using the same interactions as post editing—click to select, drag to reorder, use the block toolbar for options.

Template customizations override theme defaults without modifying theme files. This approach allows safe experimentation—you can always reset a template to its original state using the “Clear customizations” option from the template actions menu. WordPress stores customized templates in the database as post_type wp_template, surviving theme updates.

Working With Template Parts

The Template Parts section manages reusable components like headers, footers, and sidebars. These parts can be edited independently and referenced across multiple templates. When you edit a template part, changes propagate to all templates using that part, ensuring consistency across your site.

Edit template parts by clicking them in the Template Parts list, or while editing a template, click the “Edit” button on a Template Part block to jump into that part. The editing interface remains consistent—you’re always working with blocks. After editing a template part, navigate back to your template using the breadcrumb navigation in the top toolbar.

Create new template parts using the “Add New Template Part” button. Specify a name and area (header, footer, sidebar, or general). Build your template part using any blocks, save it, then reference it in templates using the Template Part block. This workflow enables modular design where components are developed independently then composed into complete templates.

Global Styles Interface

The Global Styles panel, accessed from the Styles button in the top toolbar, exposes theme.json settings visually. This interface organizes design controls into logical sections: Typography, Colors, Layout, and Blocks. Changes made here affect your entire site, establishing consistent design systems without writing code.

Typography controls set site-wide font families, sizes, line heights, and letter spacing. Select from theme-defined font family presets or add custom fonts. Font size controls use preset scales defined in theme.json, ensuring typographic consistency. Line height and letter spacing adjustments fine-tune text rendering across your site.

Color controls manage background colors, text colors, and link colors globally. The color palette displays theme-defined presets plus default WordPress colors. Set default colors that apply site-wide, creating a baseline appearance. Gradient and duotone controls provide advanced color treatments for backgrounds and images.

Layout controls define content width and spacing. The content width sets the default width for content-aligned blocks, while the wide width controls the maximum width for wide-aligned blocks. Padding controls add breathing room around content. These settings create consistent spatial relationships across your entire site.

Block-Specific Global Styles

Within Global Styles, the Blocks section lets you set default styling for specific block types. Click any block type to access its style controls. For example, setting heading block defaults ensures all headings share typography characteristics while remaining individually customizable when needed.

Button block global styles might define default padding, border radius, and colors. These defaults apply to all button blocks unless overridden at the block level. This cascading system balances consistency with flexibility—establish sensible defaults while allowing specific adjustments where needed.

Block style variations appear within block-specific global styles. If your theme defines button variations like “outline” or “fill”, you can set default styling for each variation. Users select variations from the block style picker, instantly applying pre-designed aesthetic options.

List View and Block Navigation

List view, accessed from the list icon in the toolbar, displays your template’s block structure as a hierarchical tree. This view shows parent-child relationships clearly, making it easy to select specific blocks within complex nested structures. Click any block in list view to select it in the visual editor.

List view becomes essential when working with deeply nested layouts—Group blocks containing Row blocks containing Column blocks containing more blocks. The visual editor can make selecting specific blocks challenging, while list view provides precise control. Drag blocks in list view to reorder them, even across different parent containers.

The list view also shows block visibility and lock status through icons. Locked blocks display a lock icon, making it easy to identify protected elements. This overview helps you understand template structure at a glance and navigate complex layouts efficiently.

Revision History and Version Control

The Site Editor includes revision history for templates and template parts. Click the revision count in the template toolbar to open the revisions panel. This interface shows previous versions chronologically, with timestamps and author information for each revision.

Browse revisions using the slider or arrow controls. The visual diff shows additions in green and deletions in red, making changes explicit. Preview any revision to see how your template looked at that point. Restore a previous version by clicking the “Restore this version” button, reverting all changes made since that revision.

Revisions provide confidence for experimentation. Make bold changes knowing you can revert if needed. This safety net encourages creative exploration in the Site Editor without fear of breaking working configurations. Regular saves create revision checkpoints throughout your editing session.

Creating Custom Templates

Beyond editing existing templates, you can create custom templates for specific use cases. Click “Add New Template” and choose a template type—single post, page, archive, or custom post type. Build your template from scratch using blocks, or start from an existing template and modify it.

Custom templates expand your design possibilities. Create a special template for landing pages, a unique layout for portfolio posts, or a custom archive design for a specific category. Assign custom templates to content through the template selector in the post editor, giving you precise control over individual page layouts.

The Pages Section

The Pages section in the Site Editor provides quick access to edit specific pages. This shortcuts the workflow of finding pages in the admin, opening them in the post editor, and switching to template editing. Click any page to edit it directly in the Site Editor context, seeing the full template structure around your content.

This integrated view helps visualize how page content interacts with template elements. You can edit both page content and template structure in the same session, streamlining the design process. The Pages section bridges the gap between content editing and template management.

Best Practices and Workflow Tips

Adopt a systematic workflow when using the Site Editor: start with Global Styles to establish your design system, then create or customize template parts for reusable components, finally build or modify templates using those parts. This top-down approach ensures consistency from the start.

Save regularly during editing sessions to create revision checkpoints. Use descriptive names when creating custom templates and template parts—future you will appreciate clear naming. Test your templates with real content to ensure they handle various content lengths and configurations gracefully.

Leverage block locking to protect critical template elements from accidental modification. Lock template parts at the template level to prevent removal while allowing content editing. Use preview mode frequently to see templates as visitors will, catching layout issues before they reach production.

The Site Editor represents WordPress’s vision for unified, visual website editing. Mastering this interface unlocks the full potential of block themes, enabling you to build sophisticated, customizable WordPress sites entirely through visual editing. As the Site Editor continues evolving with new features and refinements, it becomes increasingly central to the WordPress development experience.