Twenty Twenty-One is het nieuwe standaard WordPress thema bij WordPress 5.6. Als je een WordPress thema met allerlei vernieuwende features verwachtte, dan ben je waarschijnlijk enigszins teleurgesteld.

Twenty Twenty-One is een minimalistisch thema dat je het beste kan vergelijken is met een leeg blad, zowel qua uiterlijk als qua functies. Net als bij de voorgangers gebruikt het nieuwe standaardthema vooral de Blok Editor om pagina’s samen te stellen.

In dit artikel zullen we de meest interessante functies van Twenty Twenty-One bekijken, en laten zien hoe je de look en feel van een WordPress website eenvoudig kan aanpassen via een Twenty Twenty-One childthema.

Ben je er klaar voor? Laten er dan meteen induiken!

Twenty Twenty-One thema preview
Twenty Twenty-One thema preview (afbeelding: Make WordPress Core)

Eerste impressie van het Twenty Twenty-One WordPress thema

Net als Twenty Twenty is het nieuwe standaardthema van WordPress 5.6 niet helemaal “from scratch” ontwikkeld, maar is het een variatie op een populair thema vanuit de WordPress community.

Twenty Twenty-One is ontwikkeld op basis van een nieuw thema van Automattic, het Seedlet thema, dat een strakke en georganiseerde structuur van nested CSS custom properties biedt. Dankzij het uitgebreide gebruik van CSS properties in het stylesheet van het thema, is het bouwen van childthema’s van Twenty Twenty-One snel en eenvoudig.

Seedlet WordPress thema
Seedlet WordPress thema

Twenty Twenty-One is een erg toegankelijk, minimalistisch WordPress thema met één kolom als layout, een footer zijbalk, en twee menulocaties: primaire navigatie en footer navigatie.

Het nieuwe thema gebruikt een stack van systeemlettertypen. Dit biedt diverse voordelen voor zowel gebruikers als developers:

  • Het belangrijkste hiervan is dat een stack van systeemlettertypen (system fonts) diverse voordelen heeft voor UX en prestaties doordat native lettertypen al ondersteund worden door de meeste besturingssystemen, en dus niet meer geladen hoeven te worden.
  • Daarnaast zien ze er neutraal uit, zodat ze soepel in elk soort ontwerp passen.
  • Als laatste hoeven er geen extra lettertypebestanden gedownload te worden, waardoor het makkelijker wordt voor gebruikers en developers om de layout van een website met het Twenty Twenty-One thema aan te passen.

Het Twenty Twenty-One thema gebruikt een minimalistisch kleurenpalet gebaseerd op pastelgroene achtergrondkleuren en twee tinten grijs van voorgrondkleuren. Het thema biedt daarnaast diverse extra pastelkleuren.

Hierover legt Mel Choyse-Dwan, hoofd design van het standaardthema het volgende uit:

We zullen het thema aanbieden met enkele extra kleurenpaletten, waaronder zowel een wit als een zwart kleurenschema. Waarom pastelgroen? Pastelkleuren en tussenkleuren zijn nu in.

Twenty Twenty-One kleuren
Twenty Twenty-One kleuren (afbeelding: Make WordPress Core)

Zo installeer je Twenty Twenty-One

Op het moment van schrijven wordt Twenty Twenty-One nog actief ontwikkeld en is het nog niet beschikbaar om te downloaden in de WordPress themabibliotheek. Maar je kan al wel vast een conceptversie van het thema vinden op GitHub.

De Github repository zal gedeactiveerd worden zodra het thema met de kern samengevoegd wordt, en vanaf dan kan je het thema gewoon in de themabibliotheek vinden. Aangezien Twenty Twenty-One het WordPress 5.6 release-schema volgt, wil je wellicht de volgende data in je agenda noteren:

  • 20 Oktober 2020: Beta 1
  • 27 Oktober 2020: Beta 2
  • 2 November 2020: Beta 3
  • 12 November 2020: Beta 4
  • 17 November 2020: RC 1
  • 1 December 2020: RC 2
  • 7 December 2020: Dry run voor de release van WordPress 5.6
  • 8 December 2020: Geplande datum voor de release van WordPress 5.6

Om het Twenty Twenty-One thema aan de gang te krijgen volg je deze stappen:

  1. Haal het zip-bestand van GitHub.
  2. Upload je pakket naar je development installatie vanaf het WordPress dashboard of via SFTP.
  3. Ga naar Weergave → Thema’s en klik op de knop Activeren bij de preview van het thema.
  4. Ga naar Weergave → Customizer om Twenty Twenty-One verder in te stellen.

Je kan nu gaan testen met het thema via een testwebsite of in je lokale omgeving.

dark mode issue
Twenty Twenty-One Issue #620 op Github

Ben je er nog niet klaar voor om je tests uit te voeren?

Geen zorgen, wij hebben al flink zitten wroeten in het thema, en zullen je laten zien wat je kan verwachten van Twenty Twenty-One.

De blokken en functies van het Twenty Twenty-One thema

Net als bij Twenty Twenty is het nieuwe standaard WordPress thema geen volledig functioneel thema, maar meer een minimalistisch thema dat de Blok Editor gebruikt voor het bouwen van pagina’s. Het thema richt zich ook op het bieden van maximale toegankelijkheid. In de woorden van Mel Choyce-Dwan:

Verder willen we heel graag dat het thema voldoet aan de relevante richtlijnen van WCAG 2.1 level AAA. We vonden het idee van +make.wordpress.org/accessibility/ geweldig, en we waarderen alle hulp en tips van community experts om dit mogelijk te maken.

Het thema ondersteunt een aanzienlijk aantal thema- en blokfuncties waaronder de volgende:

Themafuncties:

  • Automatisch feed links
  • Title tag
  • Artikel formats
  • Artikel thumbnails
  • HTML5 elementen
  • Custom logo
  • Selectieve refresh voor widgets
  • Custom achtergrond
  • Twee navigatiemenu’s
  • Eén zijbalk

Blokfuncties:

  • Standaard blokstyles
  • Editor styles
  • Dark editor styles (donkere achtergrond)
  • Brede uitlijning
  • Blok lettertype groottes
  • Blok kleurenpaletten
  • Blok presets voor kleurverloop
  • Startcontent
  • Responsieve embeds
  • Custom regelhoogte
  • Experimentele linkkleur
  • Experimentele custom spacing
  • Custom units (verwijderd in WordPress 5.6)

De volgende lijst bevat functies die vooral relevant zijn wanneer je een website wil bouwen op basis van Twenty Twenty-One.

Navigatiemenu’s

Twenty Twenty-One ondersteunt twee locaties voor je menu’s, de Primary Navigation, rechtsboven in de header, en de Footer Navigation.

Twenty Twenty-One menu locaties
Twenty Twenty-One menu locaties

Wanneer je het footermenu gebruikt, worden sociale links automatisch gedetecteerd en omgezet naar SVG iconen voor ondersteunde social media.

Twenty Twenty-One social menu
Twenty Twenty-One social menu

Artikel formats

Twenty Twenty-One ondersteunt negen artikelformats: link, aside, gallery, image, quote, status, video, audio, chat. Je kan je artikelformat kiezen in het paneel Status & Visibility binnen de instellingen van de editor.

Twenty Twenty-One ondersteunt negen artikelformats
Twenty Twenty-One ondersteunt negen artikelformats

Om te zien hoe Twenty Twenty-One omgaat met artikelformats, ga je naar de map template-parts/excerpt en kies je een template. Open bijvoorbeeld het bestand excerpt-image.php in de code-editor van je voorkeur. In dat bestand zie je dan de volgende code:

/**
 * Show the appropriate content for the Image post format.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since 1.0.0
 */

// If there is no featured-image, print the first image block found.
if (
	! twenty_twenty_one_can_show_post_thumbnail() &&
	has_block( 'core/image', get_the_content() )
) {

	twenty_twenty_one_print_first_instance_of_block( 'core/image', get_the_content() );
}

the_excerpt();

De code is helder gedocumenteerd en goed leesbaar, maar laten we er toch even langs lopen:

  • has_block bepaalt of een artikel of een string een specifiek blok type bevat (zoals het afbeeldingsblok in dit voorbeeld).
  • twenty_twenty_one_print_first_instance_of_block is een Twenty Twenty-One templatefunctie dat de eerste instantie van een blok in de content print, en dan afbreekt.

Wanneer een websitebezoeker dus een archief van het artikel van het format ‘image’ wil zien, zal WordPress voor elk artikel in het archief een afbeelding weergeven. Door deze logica te volgen kan je elk artikelformat bekijken door de bijbehorende sjabloondelen te bekijken.

Site identity en custom logo

Twenty Twenty-One ondersteunt een 300×100 px custom logo. Je kan instellingen voor een custom logo vinden in het scherm Site Identity.

Site Identity in Twenty Twenty-One
Site Identity in Twenty Twenty-One

Dit bevat onder meer:

  • Custom logo
  • Site Title
  • Tagline
  • Site Icon

Editor Font Sizes

Twenty Twenty-One ondersteunt de volgende lettertype groottes:

  • Extra small – 16
  • Small – 18
  • Normal/Medium – 20
  • Large – 24
  • Extra large – 40
  • Huge – 96
  • Gigantic – 144

In het stylesheet van het thema wordt de grootte ingesteld in rem units.

Twenty Twenty-One ondersteunt zeven maten voor lettertypes
Twenty Twenty-One ondersteunt zeven maten voor lettertypes

Kleurinstellingen

De Theme Customizer biedt een scherm Colors & Dark Mode waaronder de volgende twee keuzes:

  • Een eenvoudige kleurenkiezer met 10 ingestelde kleurenpaletten.
  • Een selectievakje voor het in- en uitschakelen van de dark mode.

De afbeelding hieronder laat een lichtgele achtergrondkleur zien met een donkergrijze tekst.

Colors & Dark Mode instellingen in Twenty Twenty-One
Colors & Dark Mode instellingen in Twenty Twenty-One

De standaardinstelling voor de achtergrondkleur is pastelgroen ('#d1e4dd'), maar site-admins kunnen eenvoudig naar een alternatieve achtergrondkleur switchen:

  • Black = '#000000';
  • Dark gray = '#28303D';
  • Gray = '#39414D';
  • Green = '#D1E4DD';
  • Blue = '#D1DFE4';
  • Purple = '#D1D1E4';
  • Red = '#E4D1D1';
  • Orange = '#E4DAD1';
  • Yellow = '#EEEADD';
  • White = '#FFFFFF';

Dezelfde kleuren zijn ook beschikbaar als blok kleurenpalet in de blokinstellingen in de editor.

Daarnaast ondersteunt Twenty Twenty-One diverse gradient presets voor blok die deze feature ondersteunen. De afbeelding hieronder laat de standaard kleurschakeringen zien in de instellingen van de Columns blok.

Acht gradient presets in de Color instellingen van een blok
Acht gradient presets in de Color instellingen van een blok

Vanuit het perspectief van toegankelijkheid is de ondersteuning voor Dark Mode (donkere modus) een absolute innovatie voor een standaardthema.

Laten we daar dus eens beter naar kijken!

Ondersteuning voor dark mode in Twenty Twenty-One

Als gevolg van een discussie op het Slack kanaal #core-themes, introduceerde Mel Choyce-Dwan ondersteuning voor Dark Mode voor Twenty Twenty-One.

Inschakelen van de donkere modus in macOS
Inschakelen van de donkere modus in macOS

Eerst was het niet helemaal duidelijk of deze functie geïmplementeerd zou worden in Twenty Twenty-One als thema-functie of als een apart project dat als plugin verkrijgbaar zou zijn.

Er waren vijf mogelijke opties om uit te kiezen:

  • Sitebeheerders toestaan om ondersteuning voor dark mode uit te schakelen, en sitebezoekers om de dark mode aan/uit te schakelen tijdens het bekijken van de site.
  • Toestaan dat sitebeheerders de ondersteuning voor dark mode uitschakelen (dus zonder optie voor bezoekers om de dark mode aan/uit te zetten).
  • Ondersteuning voor dark mode inschakelen en op “always on” zetten, waarbij bezoekers het kunnen in- en uitschakelen.
  • Inschakelen van dark mode als “always on”, waarbij bezoekers dit niet aan/uit kunnen zetten.
  • Dark mode niet ondersteunen.

Na diepgaande discussies werd Dark Mode toegevoegd aan het thema. Dat betekent:

  • Dark Mode ondersteuning is beschikbaar als opt-in functie voor sitebeheerders .
  • De schakelaar is verwijderd van de interface van de editor en is alleen beschikbaar via de Customizer.
  • De schakelknop voor de Dark Mode is rechtsonder te vinden (links op RTL) en verdwijnt wanneer een bezoeker naar beneden scrolt.
  • Wanneer Dark Mode is ingeschakeld kunnen bezoekers het zelf aan/uit zetten op basis van hun voorkeur, onafhankelijk van de instellingen van hun OS of browser.
Dark mode ingeschakeld in de Customizer en uitgeschakeld op de front-end
Dark mode ingeschakeld in de Customizer en uitgeschakeld op de front-end

Alhoewel dark mode wordt gezien als verbetering voor de toegankelijkheid, is het niet vanzelfsprekend dat je pagina’s daarmee in elke context toegankelijker worden.

De grootste uitdagingen treden op bij donkere logo’s en transparante afbeeldingen. Wanneer je van een standaard lichte template naar een donkere achtergrondkleur gaat, kan dat problemen voor de leesbaarheid opleveren waardoor het gebruiksgemak juist vermindert en het uiterlijk van je website verslechtert.

Zo kan een donker logo op een lichte achtergrond bijvoorbeeld helemaal verdwijnen wanneer lezers zelf Dark Mode inschakelen. Vergelijkbare problemen treden op bij de helderheid en contrast van afbeeldingen en doorzichtigheid van grenzen, dividers en separators.

Ben je van plan om dark mode toe te voegen aan je website, dan moet je goed testen hoe je website eruit ziet met een donkere achtergrond.

Dark mode ingeschakeld in de Customizer en ingeschakeld op de front-end
Dark mode ingeschakeld in de Customizer en ingeschakeld op de front-end

Mensen die aan het thema werken zijn zich hier bewust van, en de discussie loopt nog altijd op GitHub. Voor een gedetailleerd overzicht van problemen rond de bruikbaarheid van de dark mode en het bijdragen aan de discussie, vind je hier op GitHub de hele lijst met problemen.

Voorkeuren voor dark mode worden opgeslagen in de LocalStorage en kunnen bekeken worden via de developer tools van de browser.

In Google Chrome kan je daarvoor Chrome WebTools starten en klikken op het tabblad Application. Zoek het deel Storage en klap het menu Local Storage uit.

Gebruikersvoorkeuren voor Dark Mode in de Brave Browser lokale opslag
Gebruikersvoorkeuren voor Dark Mode in de Brave Browser lokale opslag

Om eerlijk te zijn is Dark Mode ook niet meer een veelvoorkomend onderwerp rondom moderne websites. Maar aangezien het nieuwe standaardthema van WordPress dark mode nu ondersteunt kunnen we binnen dit gebied van toegankelijkheid veranderingen verwachten, aangezien WordPress de meest gebruikte CMS software is.

Developers die verder in de technische materie willen duiken moeten vooral eens deze gedetailleerde gids over dark mode op het web lezen.

Styles en CSS custom properties

Dat gezegd hebbende is het nu tijd om de meest interessante functie van Twenty Twenty-One voor themadevelopers te bekijken.

Laten we beginnen met CSS custom properties.

Zoals hierboven gezegd, is Twenty Twenty-One gebaseerd op Seedlet, een thema met dubbele kolommen, een footer zijbalk en drie menulocaties. De styling van Seedlet is volledig gebaseerd op CSS custom properties, wat het makkelijker maakt voor themadevelopers en gevorderde gebruikers om child-thema’s te bouwen op het thema van Automattic.

Hetzelfde geldt voor Twenty Twenty-One. Het nieuwe standaardthema biedt een layout met enkele kolom, een footer zijbalk en twee menu-locaties. Het stylesheet volgt het systeem van nested custom properties dat Seedlet gebruikt, waardoor Twenty Twenty-One een ideaal startpunt is voor het bouwen van child-thema’s en gepersonaliseerde websites.

CSS custom properties (ook wel CSS variables genoemd) zijn speciale entities die specifieke waarden bevatten die je overal in je stylesheet kan gebruiken.

Als je dus bijvoorbeeld een specifiek kleuraccent wil veranderen binnen je document, hoef je geen zoekopdracht te doen of je die specifieke kleur ergens in je stylesheet kan vinden. In plaats daarvan stel je gewoon een andere property value in binnen het :root blok.

CSS custom properties in Twenty Twenty-One
CSS custom properties in Twenty Twenty-One

Ter illustratie van een eenvoudige aanpassing: stel dat je een bepaalde achtergrondkleur wil instellen. Daar heb je geen child-thema voor nodig. Je moet in plaats daarvan simpelweg twee CSS declarations opnemen in je code-editor van het Additional CSS paneel:

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}
Custom CSS in de Twenty Twenty-One Customizer
Custom CSS in de Twenty Twenty-One Customizer

CSS custom properties zijn veilig te gebruiken aangezien ze ondersteund worden door alle grote browsers, zoals te zien is in de afbeelding hieronder van Can I Use:

CSS custom properties worden ondersteund door de meerderheid van de grote moderne webbrowsers.
CSS custom properties worden ondersteund door de meerderheid van de grote moderne webbrowsers.

Wil je dieper ingaan op CSS custom properties, bekijk dan eens de MDN Documentatie.

Twenty Twenty-One blokpatronen

Twenty Twenty-One biedt diverse patronen voor de Blok Editor. In een vorig blogartikel definieerden we Blokpatronen als voorgedefinieerde bloklayouts waarmee gebruikers snel complexe structuren van nested blocks aan hun pagina’s kunnen toevoegen.

WordPress 5.5 introduceerde een handjevol blokpatronen en in WordPress 5.6 verwachten we er nog meer. Daarnaast biedt Twenty Twenty-One een eigen set van blokpatronen.

In Twenty Twenty-One, worden blokpatronen gedefinieerd in het bestand inc/block-patterns.php . Twenty Twenty-One patronen variëren van eenvoudige patronen zoals het Large Text patroon, dat slechts één H2 element bevat, tot meer complexe patronen, zoals Overlapping Images and Text en Media and Text Article Title.

Media and Text Article Title blockpatroon in Twenty Twenty-One
Media and Text Article Title blockpatroon in Twenty Twenty-One

Op dit moment biedt het thema de volgende patronen:

  • Large Text
  • Links Area: Een grote tekst gevolgd door sociale netwerken en links naar een e-mailadres.
  • Media and Text Article Title: Een Media & Text blok met links een grote afbeelding en rechts een heading. De heading wordt gevolgd door een separator en beschrijvende paragraaf.
  • Overlapping Images: Drie afbeeldingen in een blok met overlappende kolommen.
  • Two Images Showcase: Een Media & Text blok met links een grote afbeelding een rechts een kleinere afbeelding met omlijning.
  • Overlapping Images and Text: Een blok met overlappende kolommen, met twee afbeeldingen en een beschrijving.
  • Portfolio List: Een projectlijst met thumbnail afbeeldingen.
  • Contact Information: Een blok met 3 kolommen, met contactinformatie en links naar social media.
Overlapping Images blockpatroon in Twenty Twenty-One
Overlapping Images blokpatroon in Twenty Twenty-One

Keuze uit zoveel blokpatronen is ideaal voor zowel gebruikers als developers. Gebruikers kunnen hiermee makkelijk en snel complexe blokken met code toevoegen aan hun artikelen en pagina’s, terwijl developers die patronen kunnen gebruiken voor handige sjablonen waarop ze eigen variaties kunnen bouwen.

Het Twenty Twenty-One blokexperiment

Twenty Twenty-One Blocks is een aparte experimentele versie van het Twenty Twenty-One thema, helemaal gebaseerd op blokken. Het doel ervan is om iedereen te betrekken bij wat er gebeurt bij het Full Site Editing experiment, waardoor iedereen de nieuwe FSE functies kan bekijken voordat ze onderdeel worden van de WordPress kern.

Het is onwaarschijnlijk dat we deze experimentele versie als onderdeel van de kern zullen zien bij WordPress 5.6. volgens Carolina Nymark:

Het thema heeft Gutenberg en de Full Site Editing experiment nodig om te kunnen draaien. Het zal geen onderdeel van de kern worden, maar wel beschikbaar zijn in de themabibliotheek wanneer het klaar is.

Op het moment van schrijven, vereist Twenty Twenty-One Bloks de Gutenberg plugin. Nadat zowel de plugin als het thema geïnstalleerd en geactiveerd zijn, verschijnt er een Site Editor menu-item in je WordPress admin menu (je hoeft het Full Site Editing experiment niet meer apart te activeren).

Het Site Editor menu item in Twenty Twenty-One Blocks experiment
Het Site Editor menu item in Twenty Twenty-One Blok experiment

Vervolgens klik je op het nieuwe Site Editor menu-item om de Full Site Editing interface te openen en te beginnen met het bewerken van een element op de pagina via de blok editor.

Full Site Editing in Twenty Twenty-One Blocks
Full Site Editing in Twenty Twenty-One Blocks

We zullen de technische details hier even laten voor wat ze zijn. Het is in ieder geval al duidelijk dat klassieke thema’s en op blokken gebaseerde thema’s compleet anders werken.

De afbeelding hieronder laat de content van de map Twenty Twenty-One Blocks zien:

Twenty Twenty-One Blocks map
Twenty Twenty-One Blocks map

Het bestand experimental-theme.json en de mappen block-templates en block-template-parts vallen meteen op.

Het grote verschil tussen traditionele WordPress thema’s en op blokken gebaseerde thema’s is dat deze laatste groep thema’s templates biedt die volledig uit blokken bestaan.

Open bijvoorbeeld maar eens block-template-parts/header.html in je code-editor. Daar zie je de volgende code:

<!-- wp:spacer {"height":70} -->
<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:site-title /-->

<!-- wp:site-tagline /--></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} -->
<!-- wp:navigation-link {"label":"Home","url":"#"} /-->

<!-- wp:navigation-link {"label":"Blog","url":"#"} /-->

<!-- wp:navigation-link {"label":"Work","url":"#"} /-->

<!-- wp:navigation-link {"label":"Contact","url":"#"} /-->
<!-- /wp:navigation --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":70} -->
<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

Zoals je ziet, is het klassieke header.php templatebestand vervangen door een .html bestand met diverse blokken.

Je kan de conceptversie van het Twenty Twenty-One Blocks thema vinden in het theme-experiments project op GitHub.

Als themadeveloper vind je in de officiële documentatie alle informatie die je nodig hebt over deze block-based thema’s.

Wil je graag bijdragen aan het Full Site Editing Experiment, deel je feedback dan hier.

Zo maak je een child-thema van Twenty Twenty-One

Standaard WordPress thema’s zijn een goed startpunt om de basics van themadevelopment onder de knie te krijgen en om te beginnen met het bouwen van custom child-thema’s.

Standaardthema’s volgen de richtlijnen van de officiële WordPress Coding Standards en voldoen aan webstandaarden.

Is er ergens een betere plek om te leren programmeren?

Child-thema’s zijn een handige WordPress feature waarmee je eenvoudig de layout, functies en structuur van je pagina’s kan aanpassen. Met de volgende voorbeelden zullen we elk aspect van thema customization verder uitdiepen.

Opzetten van je child-thema

Het bouwen van een WordPress child-thema doe je in 3 stappen:

1. Maak een map voor je child-thema

Maak een nieuwe map aan in wp-content/themes en geef het een toepasselijke naam. Onthoud dat de naam uniek moet zijn. Het Child Themes handbook raadt je aan om dezelfde naam als het parent-thema te gebruiken, met -child aan het eind toegevoegd.

We zouden de map dan dus twentytwentyone-child kunnen noemen.

2. Maak een style.css bestand

Ga nu naar je nieuwe map en maak daarin een nieuwe style.css bestand met de volgende code:

/*
Theme Name: My Twenty Twenty One Child Theme
Theme URI: https://example.com
Description: A child theme for Twenty Twenty One.
Author: Your Name
Author URI: https://example.com/
Template: twentytwentyone
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

De informatieheader zorgt ervoor dat WordPress je child-thema goed kan lezen.

  • Theme Name: De unieke naam die je aan het thema geeft.
  • Theme URI: Waar gebruikers de code of documentatie voor het thema kunnen vinden.
  • Description: De omschrijving, die helder aangeeft wat het thema doet.
  • Author: Je eigen naam
  • Author URI: De website van de auteur.
  • Template: De map waar het parent-thema opgeslagen is. Gebruik de naam van de map van het thema, en niet de naam van het thema. Zonder deze regel code zal je thema niet als child-thema werken.
  • Version: Het versienummer
  • License: De licentie, die GNU moet zijn.
  • License URI: Link naar informatie over de licentie.

Onder die tekst kan je CSS blokken met declarations toevoegen, zoals we zometeen zullen laten zien.

3. Maak een functions.php bestand

Met Twenty Twenty-One zul je ook een functions.php bestand nodig hebben. Maak daarom een eigen bestand aan binnen de map van het child-thema, open dit in je code-editor en voeg de volgende code toe:

<?php
/* enqueue scripts and style from parent theme */
   
function twentytwentyone_styles() {
	wp_enqueue_style( 'child-style', get_stylesheet_uri(),
	array( 'twenty-twenty-one-style' ), wp_get_theme()->get('Version') );
}
add_action( 'wp_enqueue_scripts', 'twentytwentyone_styles');

Aangezien het Twenty Twenty-One thema get_template_directory() gebruikt om de stylesheet te laden, moet je de stylesheet van het child-thema aan de rij toevoegen via de wp_enqueue_scripts action.

Nadat je dit gedaan hebt, sla je je bestanden op, open je WordPress dashboard en ga naar Weergave -> Thema’s, en activeer je je eigen spiksplinternieuwe child-thema van Twenty Twenty-One.

Nu gaan we onze eigen aanpassingen toevoegen.

Toevoegen van custom styles

Als het gaat om het aanpassen van de layout van je WordPress website, heb je diverse mogelijkheden om je eigen custom CSS code toe te voegen. Het scherm Additional CSS van de Customizer is goed genoeg voor kleine aanpassingen.

Maar een child-thema is een betere keuze als je van plan bent om complexere aanpassingen te maken, of wanneer je je code op meerdere WordPress websites wilt gebruiken.

Laten we het eens uitproberen met een eenvoudige aanpassing: een andere standaard lettertype stack.

Stel dat je een andere stack met lettertypen wilt laden, of gewoon je eigen favoriete lettertype wilt toevoegen aan de standaard Twenty Twenty-One font families.

Hoe doe je dat dan?

Ik zal je hier laten zien hoe je het standaardlettertype voor H1 headings verandert, maar je kan de font family van elk gewenst tekstelement op je website op dezelfde manier veranderen.

Open allereerst het style.css bestand van Twenty Twenty-One en zoek het volgende blok met CSS:

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
	clear: both;
	font-family: var(--heading--font-family);
	font-weight: var(--heading--font-weight);
}

Zoals je kan zien, is de font family voor headings ingesteld via de variabele --heading--font-family.

Ga nu naar het :root{} blok en zoek deze declaration:

--heading--font-family: var(--global--font-primary);

--heading--font-family is afhankelijk van de --global--font-primary variabele, welke gedefinieerd wordt helemaal bovenaan het :root{} blok:

:root{
	/* Font Family */
	--global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
	...
}

Kopieer de --global--font--primary declaration van het stylesheet van de parent en kopieer het in style.css van je child-thema. Verander vervolgens de naam en waarde van de property zoals hieronder te zien is:

:root{
	/* Font Family */
	--global--font-primary-child: var(--font-headings, Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, "Helvetica Neue", sans-serif);

	--global--font-family-child: var(--global--font-primary-child);
}

Nadat je je custom font stack hebt gedefinieerd, kan je het overal in je stylesheet gebruiken. In de H1 headings in ons voorbeeld:

h1,
.h1 {
	font-family: var(--global--font-family-child);
}

Sla het style.css van je child-thema op en laad de pagina opnieuw. Je zou nu Ubuntu als nieuwe standaard font family moeten zien bij de headings van je pagina.

Standaard font family vs. custom font family in Twenty Twenty-One
Standaard font family vs. custom font family in Twenty Twenty-One

Nu je weet hoe je Twenty Twenty-One kan aanpassen via een child-thema, kunnen we ook de geavanceerdere functies gaan verkennen.

Zo voeg je nieuwe blokpatronen toe

In dit voorbeeld bouwen we een custom blokpatroon met een blok voor twee kolommen, met een afgeronde afbeelding aan de linkerkant, een H4 heading en een paragraaf aan de rechterkant.

Je kan je patroon meteen in de Blok Editor opbouwen of de code aanpassen van een bestaand blokpatroon.

Kies je ervoor om je patroon te bouwen in de Blok Editor, dan hoef je alleen maar de benodigde blokken toe te voegen aan een artikel of pagina, en dan naar de Code Editor te switchen om de benodigde code toe te voegen.

Een blok van twee kolommen in de Code Editor
Een blok van twee kolommen in de Code Editor

Nu kunnen we ons patroon registreren in het functions.php bestand van ons child-thema:

add_action( 'init', function(){

	register_block_pattern_category( 
		'custom-patterns', 
		array( 'label' => esc_html__( 'Custom patterns', 'twentytwentyone-child' ) ) );

	register_block_pattern(
	'twentytwentyone-child/custom-bio-pattern',
	array(
		'title'			=> __( 'Author Bio', 'twentytwentyone-child' ),
		'description'	=> _x( 'A block with 2 columns that displays an avatar image, a heading and a paragraph.', 'Block pattern description', 'twentytwentyone-child' ),
		'content'		=> '<!-- wp:columns {"verticalAlignment":null} --> <div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","width":"33.33%"} --> <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:image {"id":29,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --> <figure class="wp-block-image size-large is-style-rounded"><img src="' . esc_url( get_stylesheet_directory_uri() ) . '/assets/images/Kinsta-logo.png" alt="Kinsta" /></figure> <!-- /wp:image --></div> <!-- /wp:column --> <!-- wp:column {"width":"66.66%"} --> <div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:heading {"level":4} --> <h4>About Kinsta</h4> <!-- /wp:heading --> <!-- wp:paragraph --> <p>Kinsta was founded in 2013 with a desire to change the status quo. We set out to create the best hosting platform in the world, and that’s our promise. We don’t settle and are here to stay.</p> <!-- /wp:paragraph --></div> <!-- /wp:column --></div> <!-- /wp:columns -->',
		'categories'	=> array( 'custom-patterns' ),
	)
	);
});

De bovenstaande code registreert de categorie Custom patterns en het patroon Author Bio.

Let op de code die we voor het img element hebben gebruikt:

<img src="' . esc_url( get_stylesheet_directory_uri() ) . '/assets/images/Kinsta-logo.png" alt="Kinsta" />

De get_stylesheet_directory_uri() function geeft de URI met de map van het child-thema (de afbeelding hadden we eerder toegevoegd aan de assets map van het child-thema).

Sla je bestanden op en maak een nieuw artikel of pagina.

Je zou nu het nieuwe patroon moeten zien in de blok-inserter.

Een custom block patroon toegevoegd aan Twenty Twenty-One
Een custom blok patroon toegevoegd aan Twenty Twenty-One

Customizen van een templatebestand

Wanneer je een nieuwe template wil aanmaken voor een specifiek archief of een enkele pagina/artikel, dan moet je een nieuw .php template maken dat de Template Hierarchy van WordPress volgt.

Maar als je alleen een bestaand sjabloon (of deel van een sjabloon) wil bewerken, dan hoef je alleen maar het originele sjabloon van het parent-thema te kopiëren en te plakken op dezelfde plek binnen je child-thema (lees meer over dit onderwerp in onze uitgebreide gids over child-thema’s).

Stel dat je de tekst “Proudly powered by WordPress” wil aanpassen. Je hebt diverse mogelijkheden om deze regel tekst aan te passen of te verwijderen. Laten we ter illustratie het handmatig aanpassen.

Om dit te doen kopieer je het templatebestand footer.php vanuit de map van de parent en plak je dit in de root van je child-thema. Daarna open je dit nieuwe footer.php bestand van je child-thema in je code-editor en voeg je de volgende code toe:

<div class="powered-by">
	<?php
	printf(
		/* translators: %s: WordPress. */
		esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
		'<a href="' . esc_attr__( 'https://wordpress.org/', 'twentytwentyone' ) . '">WordPress</a>'
	);
	?>
</div><!-- .powered-by -->

Nu kan je de boel gaan bewerken. Stel dat je een vriendelijke webhost wil bedanken, dan pas je het a element aan, als volgt:

<div class="powered-by">
	<?php
	printf(
		esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
		'<a href="https://kinsta.com/">Kinsta</a>'
	);
	?>
</div><!-- .powered-by -->

Om die tekst te verwijderen kan je een comment maken van het div.powered-by element, of het helemaal verwijderen:

<!-- <div class="powered-by">
	<?php
	printf(
		/* translators: %s: WordPress. */
		esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
		'<a href="' . esc_attr__( 'https://wordpress.org/', 'twentytwentyone' ) . '">WordPress</a>'
	);
	?>
</div> -->

En dat is het! Nu kan je op basis van deze eenvoudige voorbeelden doorgaan met ingewikkeldere aanpassingen, en je website op basis van het Twenty Twenty-One thema verder ontwikkelen.

Samenvatting

Twenty Twenty-One is de derde poging om mensen zonder geavanceerde technische vaardigheden te helpen om mooie, unieke websites te laten bouwen. Het is een minimalistisch en toegankelijk WordPress thema met goede prestaties, en kan voor allerlei use cases goed gebruikt worden. WordPress sites die worden aangedreven door het Twenty Twenty-One thema zijn er in alle soorten en maten. Als je wilt weten of een thema Twenty Twenty-One gebruikt, bekijk dan onze handige WordPress Theme Detector Tool.

Ontwikkeld met het oog op de Blok Editor, is het nieuwe standaardthema eenvoudig aan te passen voor zowel beginnende gebruikers als gevorderde developers.

Nu is het jouw beurt: Heb jij het Twenty Twenty-One thema al geïnstalleerd? Wat is jouw ervaring tot nu toe? Deel het in de reacties hieronder!

Carlo Daniele Kinsta

Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.