2.2Customiser & site editor (FSE)
The essentials in 30 seconds
- Classic theme → Customiser (Appearance → Customise): logo, colours, header, widgets, with a live preview.
- Block theme → full site editor (FSE): you edit the header, footer and templates with Gutenberg blocks.
- Global styles set the colours and fonts of the whole site in one place; template parts are edited once and apply everywhere.
Running mini-case — in the workshop's colours
Samir wants to apply the Atelier Bahja visual identity: a deep blue, a warm sand and an understated font. Depending on the theme chosen, the tool differs. He also has to change the header to place the logo and menu there, without touching the code. This section shows him the two worlds of customisation and the reflexes they share.
Sequel to case 2.1 — the theme is chosen, now adapting it to the brand.
1. Customiser or FSE?
The Customiser (Appearance → Customise) equips classic themes: a side panel with a live preview lets you set the logo, colours, header, menus and widgets. Every change appears immediately, then you publish.
Block themes use the full site editor (FSE, Appearance → Editor): there you modify the header, footer and page templates with Gutenberg blocks. No more code needed to change the overall structure. Samir first identifies his case: if Appearance → Editor exists, the theme is FSE.
2. Global styles and template parts
Global styles (FSE → Styles) centralise the colours and fonts of the whole site: changing the palette updates every page without reworking them one by one. This guarantees immediate visual consistency and simple maintenance.
Template parts are the reused elements — header, footer. You edit them once, and the change applies to every page that uses them. Samir places the logo, the main menu and the workshop's contact details there, then checks the rendering on mobile.
🔎 Concrete example — Applying the workshop's identity (Samir's case)
Block theme → Appearance → Editor.
1. Styles → palette: deep blue + warm sand.
2. Typography: understated font for headings and body text.
3. Template parts → header: logo + menu.
4. Footer: contact details + legal notice.
→ Publish and check on mobile.Result: a consistent identity across the whole site.
Lesson: global styles save you from reworking every page.
Section vocabulary
- Customiser
- The classic theme tool: appearance settings with a live preview.
Simple example: set the workshop's logo and colours.
What it is not: looking for it on a block theme, where it has disappeared.
Reflex: classic theme = Customiser.
- Site editor (FSE)
- The block theme tool: edit the whole site with Gutenberg blocks.
Simple example: change the header and footer without code.
What it is not: believing the FSE only applies to posts.
Reflex: block theme = FSE.
- Template
- The structure of a page type (home, post, 404), reused for all content of that type.
Simple example: the post template applies to every tip.
What it is not: recreating the structure for each post.
Reflex: one template per page type.
- Global styles
- The colours and fonts of the whole site, set in one place.
Simple example: changing the palette updates every page.
What it is not: recolouring every block page by page.
Reflex: consistency = global styles.
- Template part
- A reused element (header, footer) edited once and applied everywhere.
Simple example: the header with logo and menu.
What it is not: editing the header separately on each page.
Reflex: header and footer = template parts.
In practice — Customising according to your theme
- Identify your case: Appearance → Editor exists = FSE; otherwise Appearance → Customise.
- FSE: Styles → change the global palette and typography.
- FSE: edit the header (logo, menu) and footer through template parts.
- Classic: set the logo, colours and header in the Customiser, then publish.
Ready-to-say script — explaining customisation (25 s)
"I set your colours and fonts once, and the whole site picks them up automatically. The header and footer are also changed without code: if you change your phone number or logo, a single update is enough."
Emphasise maintenance: what is global prevents oversights.
Copy-paste template — visual identity
THEME TYPE: classic / blocks
PRIMARY COLOUR: _______________
SECONDARY COLOUR: _______________
HEADING FONT: _______________
BODY FONT: _______________
HEADER: logo + menu
FOOTER: contact details + legal noticeClassic theme
Everything goes through the Customiser; widgets remain separate.
Block theme
FSE for the header, footer and templates; global styles for the identity.
Strong identity
Define the palette and typography first, then compose the pages.
Redesign
Back up before changing the global styles of a live site.
✓ Best practices
- Identify the type of theme before looking for the tool.
- Set the identity in the global styles.
- Edit the header and footer through template parts.
✗ Common pitfalls
- Looking for the Customiser on an FSE theme.
- Recolouring every page block by block.
- Forgetting to check the mobile rendering after customisation.
Key takeaways
- Classic → Customiser; blocks → FSE.
- The FSE edits the whole site with blocks.
- Global styles guarantee consistency.
- Template parts are edited once and for all.
48h Challenge — apply tomorrow
On a local site, change the global palette and typography, then modify the header to place a logo and a menu there. Check that every page follows. 25 minutes.
- I know which tool to use depending on the theme.
- I change colours and fonts globally.
- I edit the header and footer without code.
Frequently asked questions
Where has the Customiser gone?
On a block theme (FSE), it is replaced by Appearance → Editor. That is normal: appearance settings go through global styles and template parts.
Can I change colours without touching the content?
Yes: global styles act on the appearance, not on texts or images. A palette change is reflected everywhere without rewriting the pages.
Are the changes visible immediately?
In the Customiser and the FSE, you work with a preview; nothing is public until you publish. On a live site, always check after publishing.
The workshop's theme is a block theme. Where does Samir set the colours and fonts for the whole site?