Twenty Twenty-Three is het gloednieuwe standaard WordPress thema dat gelanceerd wordt met WordPress 6.1.

Het is een minimalistisch thema zonder afbeeldingen of extra functionaliteit. Het is in zijn kracht als starterthema om templates en stijlvariaties te bouwen en ook alle features te testen die met de nieuwste versies van WordPress zijn geïntroduceerd. Het thema kan worden gezien als een rasechte ontwikkel- en testomgeving, hoewel de minimalistische stijl, de responsiviteit en de lichtheid het een goede optie maken voor het maken van blogs en websites voor de meest uiteenlopende doeleinden.

In zijn inleiding op het thema Twenty Twenty-Two schreef Kjell Reigstad over de toekomst van standaardthema’s:

Innovaties als theme.json, bloktemplates en blokpatronen maken de ontwikkeling van thema’s veel eenvoudiger, en bieden nieuwe manieren voor gebruikers om hun sites aan te passen. Er is reden om aan te nemen dat de community dit alles kan benutten om in de komende jaren meer en gevarieerdere thema- en aanpassingsoplossingen te bouwen voor onze gebruikers.

En Channing Ritter deed het volgende voorstel:

Wat als we, in plaats van het thema zelf te benadrukken, een opiniërende reeks stijlvarianten benadrukken die door leden van de community zijn ontworpen? We zouden Twenty Twenty-Two kunnen gebruiken als basis voor een nieuw thema dat sober en minimaal is — een leeg canvas om een breed scala aan stijlvariaties te laten schitteren.

En dat is wat er gebeurt met het nieuwe standaardthema Twenty Twenty-Three. De community is opgeroepen om actief deel te nemen aan het ontwerp van het standaard WordPress thema, en daar houden we van omdat het nieuwe thema zo het resultaat wordt van echte samenwerking.

Twenty Twenty-Three preview
Twenty Twenty-Three preview
Lichtgewicht, flexibel en met een reeks prachtige stijlvariaties uit de community 👩🎨 Maak kennis met Twenty Twenty-Three, het nieuwe standaard WordPress thema dat landt met WordPress 6.1 🛬Klik om te tweeten

Maar voordat we de stijlvarianten onthullen die met het nieuwe WordPress standaardthema zijn gebundeld, laten we eerst de basisfeatures van Twenty Twenty-Three uitzoeken en waar het geschikt voor kan zijn.

Paginalayouts en -stijlen

Zoals gezegd is Twenty Twenty-Three een uitgeklede versie van Twenty Twenty-Two. Wat opvalt aan het nieuwe standaardthema is zijn eenvoud en lichtheid. Twenty Twenty-Three is flexibel en perfect geschikt voor de nieuwste sitebewerkingsfeatures van Gutenberg, zoals templatebewerking, Global Styles variaties, Fluid Typography en blokpatronen.

Het zal dus geen verrassing zijn dat je in de in dit artikel getoonde schermafbeeldingen minimale pagina’s ziet zonder toeters en bellen, maar perfect geschikt om aan te passen en te testen.

Om je daarvan een voorbeeld te geven, toont de onderstaande afbeelding pagina’s met en zonder uitgelichte afbeeldingen.

Preview van een enkele post met en zonder uitgelichte afbeelding in Twenty Twenty-Three
Preview van een enkele post met en zonder uitgelichte afbeelding in Twenty Twenty-Three

De volgende afbeelding vergelijkt de startpagina met een archiefpagina.

Startpagina vergeleken met archiefpagina in Twenty Twenty-Three
Startpagina vergeleken met archiefpagina in Twenty Twenty-Three

Ook al is het nieuwe thema een vereenvoudigde versie van Twenty Twenty-Two, vergeleken met het vorige standaardthema presenteert Twenty Twenty-Three enkele belangrijke verschillen.

Ten eerste is de grootte van de koppen verkleind en is het standaard serif lettertype vervangen door een systeem sans serif lettertype.

Grootte van de koppen Twenty Twenty-Three
Grootte van de koppen in Twenty Twenty-Three

Ook is er een ander kleurenpalet toegepast. Je kunt de nieuwe Twenty Twenty-Three palet definitie zien in de volgende code uit de theme.json:

{
	"settings": {
		"appearanceTools": true,
		"color": {
			"palette": [
				{
					"color": "#ffffff",
					"name": "Base",
					"slug": "base"
				},
				{
					"color": "#000000",
					"name": "Contrast",
					"slug": "contrast"
				},
				{
					"color": "#9DFF20",
					"name": "Primary",
					"slug": "primary"
				},
				{
					"color": "#345C00",
					"name": "Secondary",
					"slug": "secondary"
				},
				{
					"color": "#F6F6F6",
					"name": "Tertiary",
					"slug": "tertiary"
				}
			]
		},
	}
}
Twenty Twenty-Three standaardkleuren
Twenty Twenty-Three standaardkleuren

Maar de belangrijkste feature van het nieuwe standaardthema is de set stijlvariaties. Twenty Twenty-Three komt met tien globale stijlvariaties, die elk een andere combinatie van kleuren, lettertypefamilie en lettergroottes laten zien.

Twenty Twenty-Three Global Styles
Twenty Twenty-Three Global Styles

Je vindt de bijbehorende JSON bestanden in de Twenty Twenty-Three styles map.

Volledige previews van paginatemplates, stijlen en stijlvarianten van Twenty Twenty-Three zijn beschikbaar op Figma.

Twenty Twenty-Three Style Variations preview op Figma
Twenty Twenty-Three Style Variations preview op Figma

Twenty Twenty-Three typografie

In een minimaal thema als Twenty-Three speelt typografie een sleutelrol bij het leesbaar maken van de tekst, het aantrekkelijk maken van de site en uiteindelijk het bieden van een lonende surfervaring aan bezoekers, ongeacht apparaat en schermgrootte.

Om dit doel te bereiken komt Twenty Twenty-Three met een nieuwe set lettertypefamilies en gebruikt het Fluid Typography dat met WordPress 6.1 is geïntroduceerd.

Lettertypes

Twenty Twenty-Three beschikt over een nieuwe set lettertypes die in stijlvarianten worden gebruikt en gekenmerkt worden door eenvoud en afwisseling:

  • System Font – var(--wp--preset--font-family--system-font)
  • IBM Plex Mono – var(--wp--preset--font-family--ibm-plex-mono)
  • Inter – var(--wp--preset--font-family--inter)
  • Source Serif Pro – var(--wp--preset--font-family--source-serif-pro)
  • DM Sans – var(--wp--preset--font-family--dm-sans)

IBM Plex Mono is onderdeel van de IBM Plex lettertypeset, het nieuwe corporate IBM lettertype vrijgegeven onder SIL Open Font License (OFL). Je kunt er een voorbeeld van zien op de websites van Adobe Fonts en IBM.

IBM Plex Mono galerij
IBM Plex Mono galerij op ibm.com

Inter is een vrije en open source lettertypefamilie, gemaakt en ontworpen voor computerschermen door Rasmus Andersson. Je kunt de lettertypefamilie bekijken en downloaden op de website van Rasmus Andersson of Google Fonts.

Inter lettertype
Inter lettertype preview op Rasmus Andersson’s website

Source Serif Pro is een lettertype van Adobe Originals en je kunt het gratis gebruiken met een Adobe Fonts account (lees meer over Adobe font licenties).

Source Serif Pro preview
Source Serif Pro preview op fonts.adobe.com

DM Sans is een ander lettertype met een licentie onder de SIL Open Font License (OFL), dat in opdracht van Google is ontworpen door Colophon Foundry, Jonny Pinhorn en Indian Type Foundry.

DM Sans preview
DM Sans preview op Google Fonts

Fluid typography en spacing

Twenty Twenty-Three gebruikt Fluid Typography en Spacing Presets die met WordPress 6.1 zijn geïntroduceerd.

Het nieuwe standaard WordPress thema biedt een prachtig voorbeeld van de implementatie van fluid typography binnen WordPress thema’s en je kunt het gebruiken als template voor het toevoegen van ondersteuning voor deze feature in je thema’s.

De volgende code toont settings.typography.fluid en settings.typography.fontSizes[] property definities in de theme.json:

"settings": {
	...
	"typography": {
		"fluid": true,
		"fontSizes": [
			{
				"fluid": {
					"min": "0.875rem",
					"max": "1rem"
				},
				"size": "1rem",
				"slug": "small"
			},
			{
				"fluid": {
					"min": "1rem",
					"max": "1.125rem"
				},
				"size": "1.125rem",
				"slug": "medium"
			},
			{
				"size": "1.75rem",
				"slug": "large",
				"fluid": false
			},
			{
				"size": "2.25rem",
				"slug": "x-large",
				"fluid": false
			},
			{
				"size": "10rem",
				"slug": "xx-large",
				"fluid": {
					"min": "4rem",
					"max": "20rem"
				}
			}
		]
	}
}

De instelling typography.fluid voegt ondersteuning voor fluid typography toe, terwijl typography.fontSizes[].fluid de minimale en maximale waarde voor de lettergrootte instelt.

Naast vloeiende typografie ondersteunt Twenty-Three ook fluid spacing.

Vóór WordPress 6.1 was het alleen mogelijk om aangepaste spatiëringswaarden in te stellen in de editor. Dit betekent dat thema-auteurs vóór WordPress 6.1 geen vaste waarden konden opgeven voor opvulling, marge en tussenruimte. Dit resulteerde in verschillende beperkingen. Het was bijvoorbeeld niet mogelijk om eenvoudig spatiëringsinstellingen over te dragen tussen verschillende thema’s of om spatiëringswaarden te behouden bij het kopiëren en plakken van inhoud en blokpatronen tussen verschillende sites.

Thema’s kunnen Fluid Spacing ondersteuning aangeven met behulp van de nieuwe spacing.spacingScale en spacing.spacingSizes instellingen (lees meer in Theme.json: Voorinstellingen voor spatiegrootte toevoegen). In Twenty Twenty-Three gebeurt dit met de volgende instellingen:

"settings": {
	"spacing": {
		"spacingScale": {
			"steps": 0
		},
		"spacingSizes": [
			{
				"size": "clamp(1.5rem, 5vw, 2rem)",
				"slug": "30",
				"name": "30"
			},
			{
				"size": "clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem)",
				"slug": "40",
				"name": "40"
			},
			{
				"size": "clamp(2.5rem, 8vw, 6.5rem)",
				"slug": "50",
				"name": "50"
			},
			{
				"size": "clamp(3.75rem, 10vw, 7rem)",
				"slug": "60",
				"name": "60"
			},
			{
				"size": "clamp(5rem, 5.25rem + ((1vw - 0.48rem) * 9.096), 8rem)",
				"slug": "70",
				"name": "70"
			},
			{
				"size": "clamp(7rem, 14vw, 11rem)",
				"slug": "80",
				"name": "80"
			}
		],
		"units": [
			"%",
			"px",
			"em",
			"rem",
			"vh",
			"vw"
		]
	}
}

De video hieronder toont Fluid Typography in actie in Twenty Twenty-Three.

Je kunt voorinstellingen voor typografie en spatiëring bekijken in Ontwerpspecificatie.

Templates en templatedelen

Met Twenty Twenty-Three zie je in actie alle features en sitebewerkingsverbeteringen die met WordPress 6.1 komen.

Dat geldt vooral voor templatesen templatedelen.

Twenty Twenty-Three Templates
Twenty Twenty-Three Templates

Als je de Site Editor opstart met Twenty Twenty-Three draaiend op je website, zie je een lijst met elf templates en vier templatedelen.

De afbeelding hieronder toont het 404-template in de site editor.

Twenty Twenty-Three 404 paginatemplate
Twenty Twenty-Three 404 paginatemplate

Je vindt de bijbehorende HTML bestanden in de mappen templates en parts van Twenty Twenty-Three.

Twenty Twenty-Three templatedelen
Twenty Twenty-Three templatedelen

De afbeelding hieronder toont het templatedelen Comments in de bewerkingsmodus:

Het templatedeel Comments bewerken
Het templatedeel Comments bewerken

Je vindt aangepaste templates en templatedelen gedefinieerd in de theme.json.

Aangepaste templates

Naast de standaardtemplates biedt Twenty Twenty-Three de volgende aangepaste templates:

  • Blank
  • Blog (Alternative)
  • 404
  • With Featured Image
  • With Cover Block

Deze templates worden als volgt gedefinieerd in de theme.json:

{
	"customTemplates": [
		{
			"name": "blank",
			"postTypes": [
				"page",
				"post"
			],
			"title": "Blank"
		},
		{
			"name": "blog-alternative",
			"postTypes": [
				"page"
			],
			"title": "Blog (Alternative)"
		},
		{
			"name": "404",
			"postTypes": [
				"page"
			],
			"title": "404"
		},
		{
			"name": "with-featured-image",
			"postTypes": [
				"page",
				"post"
			],
			"title": "With Featured Image"
		},
		{
			"name": "with-cover-block",
			"postTypes": [
				"page",
				"post"
			],
			"title": "With Cover Block"
		}
	],
}

Templatedelen

Templatedelen worden als volgt gedefinieerd.

{
	"templateParts": [
		{
			"area": "header",
			"name": "header",
			"title": "Header"
		},
		{
			"area": "footer",
			"name": "footer",
			"title": "Footer"
		},
		{
			"area": "uncategorized",
			"name": "comments",
			"title": "Comments"
		},
		{
			"area": "uncategorized",
			"name": "post-meta",
			"title": "Post Meta"
		}
	]
}

Global Styles en stijlvariaties

Zoals hierboven vermeld, kunnen vanaf WordPress 6.0 thema-auteurs meerdere sets stijlen bundelen met hun thema’s, zodat gebruikers kunnen wisselen tussen stijlvariaties zonder hun thema te veranderen.

Deze geweldige WordPress feature is het belangrijkste kenmerk van het nieuwe standaardthema, want Twenty Twenty-Three biedt tien vooraf gebouwde stijlcombinaties om uit te kiezen.

Twenty Twenty-Three Global Styles
Twenty Twenty-Three Global Styles

Je kunt door deze stijlen bladeren in de Global Style interface van je Site Editor. Hier kun je

  • Van global style wisselen in het paneel Browse styles.
  • Typografie instellingen aanpassen – tekst, links, headers en knoppen
  • Standaardkleuren bewerken of de kleur van specifieke elementen wijzigen
  • De opmaak aanpassen van het hoofdcontentgebied
  • Het uiterlijk van specifieke elementen aanpassen
Tekst, kleuren en layout aanpassen in Twenty Twenty-Three
Tekst, kleuren en layout aanpassen in Twenty Twenty-Three

Het is goed om nogmaals op te merken dat bij het maken van zoveel stijlvarianten de betrokkenheid van de community cruciaal was. Na de aftrap van het Twenty Twenty-Three project werden 38 inzendingen ontvangen van 19 contributors uit 8 verschillende landen (je kunt alle projecten bekijken op GitHub).

Van de 38 zijn 10 stijlvariaties geselecteerd:

Pitch is een donkere variant van Twenty Twenty-Three
Pitch is een donkere variant van Twenty Twenty-Three
  • Canary gebruikt één lettergrootte en een smalle kolombreedte. Het gebruikt ook een interessant border-radius effect.
Canary gebruikt één lettergrootte en een smalle kolombreedte
Canary gebruikt één lettergrootte en een smalle kolombreedte
  • Electric gebruikt een dikgedrukte kleur voor alle typografie op de hele site.
  • Pelgrimage is een gekleurde donkere versie van het basisthema.
  • Marigold is een zachte en aangename variatie op de basisstijl.
  • Block-Out heeft een duotoon effect op afbeeldingen.
  • Whisper toont enkele aangepaste elementen, zoals de rand rond de rand van de pagina, knopstijlen en unieke linkonderstrepingen.
  • Sherbet heeft een unieke heldere en kleurrijke uitstraling
Sherbet heeft een unieke kleurrijke uitstraling
Sherbet heeft een unieke kleurrijke uitstraling
  • Grapes is gekozen vanwege de aangename combinatie van kleurenpalet en lettertype.

Het coolste aan stijlvariaties is dat je niet per se een frontendontwikkelaar hoeft te zijn om je stijlen te maken.

Als je je comfortabel voelt met coderen, kun je een van de .json bestanden kiezen die je in de Twenty Twenty-Three styles map vindt en die als template gebruiken om je stijlvariatie te bouwen.

Maar als coderen niet je ding is, kun je de officiële Create Block Theme plugin gebruiken, die je gratis kunt downloaden uit de WordPress.org plugindirectory.

Installeer en activeer eerst de plugin en navigeer dan naar de stijleditor. Pas hier de kleuren, typografie en layout aan volgens je voorkeuren en sla je wijzigingen op.

Stijlen aanpassen in de Global Styles interface
Stijlen aanpassen in de Global Styles interface

Als je tevreden bent met je wijzigingen, zoek je Create Block Theme onder Appearance in het WordPress adminmenu.

Create Block Theme menu item
Create Block Theme menu item

Vink het laatste item onderaan in de lijst aan: Create a style variation. Je wordt gevraagd een naam toe te kennen aan je stijlvariatie. Voer de naam in en klik op Create Theme. Dit maakt een nieuw .json bestand aan in de syles map van het thema.

Maak een stijlvariatie
Maak een stijlvariatie

Nu kun je je stijl verder aanpassen en zelfs exporteren naar andere WordPress installaties.

De Create Block Theme plugin is een waardevolle tool om optimaal te profiteren van de features voor het maken van thema’s en templates die beschikbaar zijn met de nieuwste versies van WordPress. Nu je toch bezig bent, kun je misschien ook eens kijken naar alle andere opties:

  • Export Twenty Twenty-Three
  • Create child of Twenty Twenty-Three
  • Clone Twenty Twenty-Three
  • Overwrite Twenty Twenty-Three
  • Create blank theme
  • Create a style variation
Een aangepaste stijlvariant verschijnt in de stijlbrowser
Een aangepaste stijlvariant verschijnt in de stijlbrowser

Samenvatting

Hoewel het nieuwe standaard WordPress thema er op het eerste gezicht misschien uitziet als een soort featureloze lege doos, is het bij nader inzien veel meer dan dat, omdat het je in staat stelt de nieuwste features voor het bewerken van WordPress sites optimaal te benutten.

In Twenty Twenty-Three zie je veel templates en templatedelen om aan te passen, een set van 10 stijlvarianten om te gebruiken als basis voor het maken van unieke websites, en ondersteuning voor alle nieuwe features die beschikbaar zijn in WordPress 6.1, te beginnen met Fluid Typography en Improved Template System.

Met Twenty Twenty-Three is het gevoel dat het verschil tussen site-uiterlijk en functionaliteit nu grimmig is. De enige functie van het thema is het regelen van het uiterlijk van de site, het toevoegen van functionaliteit wordt overgelaten aan de plugins. En vanuit dit oogpunt doet Twenty Twenty-Three geweldig werk, door WordPress gebruikers alle nieuwste Gutenberg sitebewerkingsfuncties te bieden. Het uiterlijk van een website aanpassen is nog nooit zo eenvoudig geweest.

Aan jou nu de keuze. Heb je het nieuwe thema al gebruikt in een testomgeving? Heb je al geprobeerd aangepaste stijlvariaties te maken? Deel je gedachten met ons in de comments hieronder.


Zet al je applicaties, databases en WordPress site online en onder één dak. Ons uitgebreide, krachtige cloudplatform boordevol functies omvat:

  • Eenvoudige installatie en beheer in het MyKinsta-dashboard
  • 24/7 deskundige ondersteuning
  • De beste Google Cloud Platform-hardware met bijbehorend premium netwerk, mogelijk gemaakt door Kubernetes voor maximale schaalbaarheid
  • Enterprise-niveau Cloudflare-integratie voor snelheid en veiligheid
  • Globaal bereik met 35 datacenters en 275+ PoPs verspreid over de wereld

Test het zelf met $20 tegoed gedurende de eerste maand Applicatie Hosting of Database Hosting. Bekijk onze pakketten of neem contact op met sales om het best passende pakket te bepalen.