Module 5 · 5.1

English

Nederlands English Deutsch Français

Themes: block themes and classic themes

Module 5: Themes and plugins · Reading time: 9 minutes

Learning objective: after this lesson, you can explain the difference between block themes and classic themes, and choose a theme sensibly.

Key concepts: theme, template hierarchy, block theme, template, template part, theme.json, Site Editor, classic theme, PHP templates, Customiser, widgets, page builder, lock-in, theme folder

What a theme does

A theme determines what your website looks like and how pages are structured: the header with logo and menu, the width of the content, fonts and colours, the footer, how a list of posts or a search result looks. The content itself (your texts, Pages, images) is stored in the database and remains in place when you switch themes.

Each theme sits in its own folder under wp-content/themes/, for example wp-content/themes/twentytwentyfive/. That folder always contains a style.css file with a header at the top describing the theme (name, version, author). You'll see this again in lesson 5.2.

Since WordPress 5.9 (early 2022) there have been two kinds of themes, and they really work differently.

Classic themes

A classic theme consists of PHP files: header.php, footer.php, single.php, page.php, index.php, and so on. Which file is used for which page follows the template hierarchy (lesson 1.2). You make changes:

in the Customiser (Appearance > Customise): logo, colours, options the theme offers;
with widgets (Appearance > Widgets): blocks in the sidebar or footer;
with menus (Appearance > Menus, lesson 4.3);
in the code, with a child theme (lesson 5.2).

Many well-known themes are (still) classic or hybrid. They work fine and will be supported for years to come.

Block themes

A block theme is built from the same blocks as your content. The theme has:

templates as HTML files with blocks, in the templates/ folder: index.html, single.html, page.html, 404.html;
template parts in parts/: header.html, footer.html;
a theme.json file with the style settings: colour palette, fonts, font sizes, content width, spacing between blocks.

A small piece of theme.json:

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primair", "color": "#1e3a5f", "name": "Primair" },
        { "slug": "accent", "color": "#e8a33d", "name": "Accent" }
      ]
    },
    "layout": { "contentSize": "720px", "wideSize": "1200px" }
  }
}

You make changes in the Site Editor (Appearance > Editor): you edit the header, the footer and the templates with blocks, and under Styles you choose colours, fonts and spacing for the whole website.

An important difference you need to know: what you change in the Site Editor is saved in the database, not in the theme files. So a theme update doesn't overwrite your changes. But it also means: a customised template in the database takes priority over the template in the theme. If the author releases an improved template, you won't see it as long as your customised version exists. In the Site Editor you can "reset" a template back to the theme's version.

Page builders

A page builder (such as Elementor, Divi or WPBakery) is a plugin or theme with its own editor in which you drag and design pages. They're popular because they offer a lot of possibilities without code. Be aware of the downsides:

Lock-in: the formatting is stored in its own format (often shortcodes or custom data in wp_postmeta). If you switch the builder off, your pages often end up a mess of codes. Switching usually means rebuilding everything from scratch.
Heavier: many builders load extra scripts and stylesheets on every page. That can slow your website down (module 6).
Yet another component to maintain, with its own updates and its own vulnerabilities.

A page builder isn't a wrong choice, but make it a conscious one. For many websites, what you want can also be done with a block theme and patterns.

Choosing a theme

What to look out for, in this order:

Origin: the theme directory on wordpress.org (checked by volunteers) or a known maker with their own website. Never a "free" copy of a paid theme from a download site: these often contain a backdoor (lesson 5.3).
Maintenance: when was the theme last updated? A theme with no updates in the past year becomes a risk.
Block or classic: does it suit how you want to work? A block theme if you want to make changes in the Site Editor, a classic theme if you want to continue an existing website in the same way.
What it brings along: a theme that "does everything" (slider, portfolio, contact form, SEO) ties those features to the theme. If you switch later, you lose them. Features belong in plugins, design in the theme.
Accessibility and speed: in the theme directory on wordpress.org you can filter by the "Accessibility Ready" feature. Check the theme's demo in PageSpeed Insights (lesson 6.1).
Language: has the theme been translated into your language, or can you edit the texts yourself?

Switching themes

When you switch themes, your content stays in place, but everything around it changes. Never just do it on your live website:

Try the new theme first with Live Preview (under Appearance > Themes), or better still in a staging site (lesson 8.3).
Afterwards, check menus (lesson 4.3), widgets, logo, the homepage and the post types the old theme provided (lesson 4.2).
Shortcodes from the old theme appear as plain text ([slider id="3"]) on your Pages.

Summary

A theme determines the design and structure; the content sits separately in the database.
Classic themes are PHP templates, customised with the Customiser, widgets and menus.
Block themes are built from blocks and theme.json, and are customised in the Site Editor; those changes are stored in the database.
Page builders offer a lot, but tie you in and can make your website heavier.
Choose a theme based on origin, maintenance and simplicity; features belong in plugins, not in the theme.

Quiz

Exercise

Exercise A5.1: Which theme does your website use? Look in your homepage's source code (Ctrl+U) for /wp-content/themes/ and fill in the name of the theme folder that appears most often. If you use a child theme (lesson 5.2), fill in the child theme's folder and the parent theme's folder. Also fill in whether it's a block theme or a classic theme, and how you worked that out. The tool reads your homepage and the style.css of the named theme, and compares them.

Cookies at WebOké

Cookie settings

Necessary

Marketing