Customising a site with the Site Editor

The Site Editor

With a block theme active, Appearance → Editor opens the Site Editor. Its left panel has these sections:

• Navigation: your menus (see the navigation lesson).
• Styles: colours, typography, spacing and layout for the whole site, plus style variations.
• Pages: edit pages and see them inside the full site design.
• Templates: the layouts for each kind of page (home, single post, page, archive, search, 404).
• Patterns: reusable block groups, including template parts such as the header and footer.

Everything in the site, from the logo in the header to the copyright line in the footer, is a block you can select and change.

Styles

Styles (also called global styles) set the look of the whole site in one place:

• Typography: font families and sizes for text, headings, links and buttons. Block themes can bundle fonts, and the Font Library lets you install more (including Google Fonts, downloaded to your site).
• Colors: the palette, and colours for background, text, links, headings and buttons.
• Layout: content width and spacing.
• Blocks: default styles for a single block type, for example every Quote or Button.

Twenty Twenty-Five comes with several style variations: complete alternative designs you can switch between with one click. You can then fine-tune them.

Styles you choose are saved as a post of the type wp_global_styles, separate from the theme. The theme's own defaults stay in its theme.json file (you will write one in the block themes section). Here is a small change made the way the Site Editor saves it, and the effect on the colours WordPress uses:

<?php
echo "before: ", wp_get_global_styles( [ 'color', 'background' ] ), "\n";

wp_set_current_user( 1 );   // the Site Editor saves as the logged-in administrator
$user  = WP_Theme_JSON_Resolver::get_user_data_from_wp_global_styles( wp_get_theme(), true );
wp_update_post( [
	'ID'           => $user['ID'],
	'post_content' => wp_json_encode( [
		'version'                     => 3,
		'isGlobalStylesUserThemeJSON' => true,
		'styles'                      => [ 'color' => [ 'background' => '#fdf6e3' ] ],
	] ),
] );
WP_Theme_JSON_Resolver::clean_cached_data();
echo "after:  ", wp_get_global_styles( [ 'color', 'background' ] ), "\n";

before: var(--wp--preset--color--base)
after:  #fdf6e3

Before, the background came from the theme's palette (a CSS variable for the "base" colour). After saving a user style, the site uses the new colour. Revisions in the Styles panel let you go back to an earlier set of styles.

Templates

A template is the layout for one kind of page. Twenty Twenty-Five provides these:

<?php
foreach ( wp_list_sort( get_block_templates(), 'slug' ) as $template ) {
	printf( "%-16s %-18s %s\n", $template->slug, $template->source, $template->title );
}

404              theme              Page: 404
archive          theme              All Archives
home             theme              Blog Home
index            theme              Index
page             theme              Pages
page-no-title    theme              Page No Title
search           theme              Search Results
single           theme              Single Posts

source: theme means the template comes from the theme's files. Open one in the Site Editor, change it (for example, add an author box under single posts), and save: WordPress stores your version in the database as a wp_template post and uses it instead of the file. Its source then reads custom.

You can also add templates: for a specific page, a category, or a custom template you can choose for individual pages (such as a "Landing page" with no header).

Template parts

Template parts are areas shared by several templates, mainly the header and footer. Edit the header once and every template that includes it changes. In the Site Editor, find them under Patterns → Template Parts, or select the header in any template and choose Edit.

Resetting

Because customisations are saved separately from the theme files, they are easy to undo. In the Site Editor, open the template (or template part) and choose Reset from its actions menu. WordPress deletes the saved copy and the theme's original is used again. You can reset styles the same way from the Styles panel.

This also means theme updates do not overwrite your customisations, but they also do not update your customised copies. If a theme update improves a template you have customised, you keep your older version until you reset it.

Exporting your work

The Site Editor's Options menu has Export, which downloads a zip of the theme including your customisations written into its files. That is useful to hand a design to a developer, or as the starting point for your own theme.

The Customizer and classic themes

Classic themes use Appearance → Customize instead: a live preview with panels for the site identity, colours, menus, widgets and homepage settings, depending on what the theme supports. If your theme is classic, the Site Editor is not available (apart from some features such as the Style Book in recent versions), and design changes go through the Customizer or a child theme.

Common mistakes

• Editing a template when you meant to edit one page, and changing every page that uses it.
• Forgetting customised templates after a theme update brings improvements.
• Using too many fonts and colours; a palette of a few colours and one or two fonts looks more professional.
• Changing the theme expecting customisations to follow; they are tied to the theme they were made for.

Exercise

In the Site Editor, change the site's background colour and heading font, add a line of text to the footer, then reset the footer. Which changes remain?