The Complete Guide to WordPress Full Site Editing: Build Custom Themes Without Code

WordPress full site editing (FSE) is a groundbreaking set of new features that will completely change how you build and customize WordPress sites. With FSE, you can visually design every element of your site using blocks – no coding required.

While some FSE features are still in beta, block-based themes are already letting you harness the power and flexibility of full site editing today. To help you get started with FSE, we‘ve created this comprehensive guide including insights from FSE expert Darren Ethier.

Here‘s what we‘ll cover:

  • What is full site editing and why does it matter?
  • Core FSE concepts you need to know
  • How to use FSE to build custom headers, page templates, and styles
  • Insights on the benefits and future of FSE from WCEU speaker Darren Ethier
  • Current limitations and what to expect in future releases
  • Tips to start exploring FSE today

Let‘s dive in!

What Is Full Site Editing? The Gutenberg Editor Levels Up

Full site editing is a collection of features that brings the intuitive Gutenberg block editor to all parts of your WordPress site. Where previously you could only use blocks to compose a post or page, FSE lets you use blocks to design every element including headers, footers, templates, and styles.

As Darren Ethier, Product Lead at WooCommerce and WCEU speaker explained, full site editing provides major benefits:

"Full site editing is about providing a common visual language for building with WordPress. The standardization it brings lowers the barrier to entry and will make it much easier for users to pick up new themes while retaining their content and customizations."

With FSE, you can think of your entire site as a collection of blocks. You can arrange, customize, and reuse blocks to build completely custom sites without ever touching code.

Getting Started: What You Need for Full Site Editing

To use full site editing, you need two things:

  1. WordPress 5.9 or later
  2. A block-enabled theme that supports FSE

WordPress 5.9 "Joséphine", released in January 2022, included the first set of FSE features. Subsequent releases will continue expanding FSE, so make sure you‘re always running the latest WordPress version.

The second requirement is a block theme. Most popular themes don‘t yet support FSE, but the WordPress theme directory now lets you filter for themes with full site editing features. We‘ll be using the default Twenty Twenty-Two theme in our examples.

Key Concepts to Understand Full Site Editing

To get the most out of FSE, you should understand a few key terms and concepts:

Site Editor

The Site Editor is where you‘ll access full site editing tools. Open it by going to Appearance > Editor in your WordPress dashboard.

Templates

Templates control the layout and design of a page. Common templates include single post, page, archive, and 404.

Template Parts

Template parts are reusable blocks you can insert into templates, like a header or footer. Editing a template part instantly updates every template using it.

Theme Blocks

Theme blocks are special blocks that dynamically pull in content, like a post‘s title, featured image, author, and more. They‘re essential for building flexible templates.

Styles

The Styles panel in the Site Editor lets you customize global styles like colors, typography, and layout as well as individual block styles.

Now that you know the core concepts, let‘s see full site editing in action!

How to Use Full Site Editing to Customize Your Site

Here are some practical ways you can start using FSE to take full control of your WordPress site.

Build a Custom Header Template

Your header appears on every page, so it‘s the perfect place to start with FSE. Here‘s how to build a custom header template:

  1. Open the Site Editor (Appearance > Editor)
  2. Click on "Template Parts" and choose "Header" to edit the existing header or click "Add New" to create your own
  3. Use blocks to build your header, focusing on key elements like your site title, logo, and navigation
  4. For navigation, use the Navigation block to create menus and submenus
  5. Click "Save" to apply your customized header template across your entire site

Custom header template in WordPress full site editor

Customize a Single Post Template

To design the layout for individual posts:

  1. In the Site Editor, go to "Templates" and select "Single Post"
  2. Add blocks to build your template, using Theme blocks to dynamically insert the post title, content, author, and more
  3. Enhance your design with images, columns, and other standard blocks
  4. Save and all posts will use the new template by default

Custom single post template in WordPress full site editor

Design an Archive or Blog Listing Template

Archive templates list your posts, like the main blog page. The key difference is you‘ll use the Query Loop block:

  1. Add the Query Loop block where you want your post listing to appear
  2. Choose a preset or build your layout with inner blocks
  3. Use the Query Loop settings to control which posts are listed (latest, category, etc.)
  4. Style your design and save

Query loop block for archive template in WordPress full site editor

Customize Styles Globally and For Individual Blocks

To take full control of your site‘s look and feel:

  1. Open the Styles panel in the Site Editor
  2. Customize your global color palette, typography, and layout
  3. Choose the "Blocks" tab to set default styles for individual blocks like buttons, quotes, and more
  4. Save and watch your styles take effect across your entire site

Customize global and block styles in WordPress full site editor

With the fundamentals of editing templates and styles under your belt, the only limit is your creativity!

Expert Insights on the Benefits and Future of Full Site Editing

At WordCamp Europe 2022, WooCommerce product lead Darren Ethier shared his insights on how FSE will transform the future of WordPress, especially for ecommerce.

"Full site editing will drastically simplify building a store with WooCommerce," said Ethier. "Product catalog and checkout templates can be visually designed and edited using FSE."

Ethier emphasized that FSE‘s common language and unified interface will lower barriers for users and developers. "Users want to personalize every aspect of their sites. FSE provides standardized, intuitive tools for customization without code, or the need to learn a new page builder for every theme."

For developers, FSE‘s unified codebase means less wasted effort. "Instead of building bespoke page builders, developers can focus on creating amazing blocks and patterns that empower users while integrating with core WordPress."

Ethier also highlighted the potential for adaptive design. "The same set of blocks can intelligently shift layout and features based on context, like automatically showing a simplified header and footer on the checkout page."

One of the most exciting aspects of FSE is that it‘s still in its infancy. "We‘ve laid the groundwork in 5.9 and 6.0, but the real magic will happen as future releases empower users to build the sites they imagine," said Ethier. "It will be exciting to see the creativity FSE unlocks, especially in WooCommerce and other specialized contexts."

Current Limitations and the Future of Full Site Editing

As of WordPress 6.0, released in May 2022, full site editing is more powerful than ever but still a work in progress. Some key limitations to keep in mind:

  • The Site Editor and other tools are still considered beta
  • Block themes are required to access FSE but are not yet widely available
  • Some template types, like author and category archives, don‘t support full customization yet
  • Many plugins and tools don‘t yet integrate with or extend full site editing features

However, each WordPress release continues rapidly advancing FSE. Version 6.0 brought major enhancements to the Site and Template Editors, Query Loop, theme blocks, and more. Version 6.1, expected in late 2022, will focus on improved UX, more customization options, and making FSE feel feature complete.

Longer term, Ethier predicts FSE will evolve to enable visual editing of truly dynamic data, personalized user experiences, and seamless integration between WordPress, WooCommerce, and the block universe.

Start Exploring Full Site Editing Today

Full site editing is already a powerful way to take complete control of your WordPress site using the familiar block editor. While not yet complete, getting started with FSE today will put you ahead of the curve as it rapidly matures.

To start exploring FSE, install a block theme on a test site and dive into the Site Editor. Familiarize yourself with customizing templates and styles, follow tutorials, and start building! Don‘t forget to share your feedback, ideas, and creations with the WordPress community.

With full site editing, the future of WordPress is visual, intuitive, and limitlessly customizable. What will you create?

Similar Posts