Thema's

• Het visuele jasje 🧥 rondom je content
• Bepaalt grotendeels:
  • lay-out
  • typografie
  • kleuren
  • template

Wat is een WordPress Thema?

Elke WordPress website heeft altijd een thema.

Wat is een WordPress Thema?

• Scheidt inhoud van vormgeving
• Bepaalt lay-out, typografie, kleuren & templates
• Maakt een website aanpasbaar en onderhoudbaar
• Basis voor een professionele en future-proof website, handing voor re-branding.

Wat doet een WordPress thema?

Een WordPress-thema kan volledig met code ontwikkeld worden:

• Volledige controle over HTML & CSS, templates, functionaliteit

• Meer vrijheid, maar ook meer ontwikkelwerk en onderhoud

🎨 In deze module werken we met bestaande themes die we personaliseren en de Site Editor.

Zelf ontwikkelen vs. personaliseren

Ontwerpen

Je kan jouw front-end visueel aanpassen door te wisselen van thema. Een thema personaliseren kan via:

1. 🎨 Globale thema-instellingen
2. 🧱 Block Editor
3. ⚙️ Template Editor
4. (Custom CSS)

Jouw website visueel aanpassen

Eén centrale plek voor je huisstijl:

• snelle rebranding
• seizoenskleuren
• tijdelijke campagne
• ...

Ontwerp wijzigen
1. Globale thema-instellingen

• Centraal beheer: Pas één keer aan, verandert overal direct mee
• Kleurenpalet: Primaire merkkleur, secundaire accenten, achtergrondtinten
• Typografie: Vaste fonts voor koppen (H1-H6) en tekst (body)
• Lay-out & Spacing: Vaste breedtes voor containers, marges en tussenruimtes

Ontwerp wijzigen
1. Globale thema-instellingen

Unieke lay-outs op bericht- of paginaniveau.

• Kan met de ontwerpblokken bij een pagina of bericht.
• ⚠️ Let op: niet herbruikbaar
  • Steeds pagina opnieuw tekenen is niet efficient
• ✅ Gebruik de editor wél om content toe te voegen, gebruik hiervoor modulaire componenten.

Ontwerp wijzigen
2. Block Editor

Gebruikten we tot nu toe (iets te vaak)

Ontwerp wijzigen
3. Template editor

Template = een herbruikbare structuur

• Kan gebruikt worden door verschillende paginatypes (Custom Post Types).
• Gebruik ingebouwde templates van actief thema
• Maak zelf jouw aangepaste templates

Templating

#Throwback

Templates in WordPress

In Wordpress willen we ook dat o.a. onze Custom Post Types altijd dezelfde opbouw (= template) hebben.

📑 Wat zijn template files?

• Blauwdrukken voor specifieke paginatypes:
  Single Post, Page, Archive, 404

• Opgebouwd uit blokken in plaats van PHP-code

🧩 Bestaan uit template Parts (Patronen):

• Herbruikbare structurele secties
  Header, Footer, Sidebar

Bezoeker opent een pagina → WordPress laadt het juiste template → Vult dynamisch de content in

Templates in WordPress

• Bouw je met de Block Editor
• Kan voor meerdere items hergebruikt worden
• Één keer aanpassen → alle pagina's/posts die deze template gebruiken volgen automatisch
• Geen code nodig

👉 Zo kan je alle recepten automatisch in één keer dezelfde layout geven.

Templates in WordPress

Appearance → Editor → Templates → New

• Selecteer het Post Type waarvoor
  je een template wil maken:
• Bouw de template op a.d.h.v. patterns & blocks
  in de Block Editor

Templates aanmaken

⚠️ Om variabele data te tonen (hoofdtitel, "body content" & ACF-fields), moet je specifieke blocks gebruiken:

🔗 WordPress docs - Templates: how they work

Templates aanmaken/bewerken

Modulariteit

Modulariteit

= opgebouwd uit losse, vervangbare onderdelen of eenheden die samen een geheel vormen. Dit zorgt voor:

• Flexibiliteit
  Verschillende onderdelen
• Duurzaamheid
  Onderdelen kunnen apart
  vervangen worden
• Snelheid
  Onderdelen los van elkaar maken

Herhaling

Component-based design

= Pagina's opbouwen uit losse, herbruikbare bouwstenen

• Bouwstenen of componenten
• Geen unieke losse pagina's "tekenen", maar systemen bouwen

Component

= Een op zichzelf staand UI-element

• CTA-knop, infobox, team card,...
• Bevat vaste structuur, stijl en invulbare datavelden

Herhaling

Voordelen van
component-based design

🎨 Consistentie: Overal dezelfde look & feel

🏎️ Snelheid: Sneller nieuwe landingspagina's lanceren

🛠️ Onderhoud: Eén component updaten = overal geüpdatet

Patronen (patterns)

= ingebouwde bouwblokken in WordPress

• Herbruikbare combinaties van blokken (Blocks)
• Kan je aanpassen én zelf maken

✅ Zo maak je jouw project herbruikbaar, modulair en component-based.

Visuele editors

Websites werden vroeger voornamelijk opgebouwd met code of beperkte editors:

• HTML/CSS: volledige controle, maar technische kennis nodig
• Layout en inhoud waren vaak minder flexibel
• Aanpassingen betekenden vaak handmatig werk

Het "oude" web

Moderne editors zijn ontstaan om meer visuele vrijheid te creëren:

• 👁️ What You See Is What You Get: Direct visuele feedback
• 👷‍♀️ Toegankelijk voor personen zonder codeerkennis (redacteur, webdesigner, ...)
• ⚡️ Snellere prototyping en flexibele lay-outs
• 🤓 Minder afhankelijk van externe webontwikkelaars

Visuele Editors

= Native Block Editor (die we al kennen)

• Inhoud in de back-end, styling via het thema
• Elk element is een semantische blok (p, h1, img,..)
• Editor focust op gestructureerde content
• Thema bepaalt hoe blokken renderen in de front-end

→ Scheiding tussen semantiek en visuele presentatie blijft intact.

"Gutenberg Editor" in WordPress

• Snelheid & Performantie: Geen zware externe plugins nodig
• Toekomstbestendig: Officiële standaard van WordPress Core
• Semantisch zuiver: Produceert schone, toegankelijke HTML-code
• Gratis: Volledig geïntegreerd zonder licentiekosten

Gutenberg Editor
👍 Voordelen

• Leercurve FSE: Full Site Editing kan complex aanvoelen
• Minder vrije pixelprecisie: Strakker gebonden aan themaregels
• Eenvoudigere animaties: Minder ingebouwde visuele effecten

👉 Niet altijd genoeg visuele vrijheid voor complexe ontwerpen...

Gutenberg Editor
👎 Nadelen

...En daarom zijn er:

✨ Page Builder Plugins ✨

= Plugins waarbij de visuele editor bepaalt hoe je site er uitziet, niet het thema. Vaak betalend.

• Elementor: Drag-and-drop marktleider
• Divi Builder: Visuele builder gericht op design-vrijheid
• Bricks / Oxygen: Geavanceerde builders voor developers en prestaties
• ...

Page Builder Plugins (Third-party)

🧪 Volgende week experimenteren we met Elementor 

Elementor

= Een drag-and-drop builder

Heeft een andere, visuele insteek om pagina's te bouwen.

🎨 Design-first benadering

• Volledige pixel-perfecte controle aan de voorkant (front-end canvas)
• Vrij slepen, positioneren, marges slepen en animeren

👀 Sneak peek

Theme Builder (Elementor Pro)

• Vervangt de traditionele themastructuur
• Visueel templates ontwerpen voor headers, footers en dynamische posts
• 🧱 Modulair werken: Werkt met Containers, Widgets en Global Templates
• ⚠️ Aandachtspunt: Zwaardere code-overhead ➔ Vereist actieve optimalisatie voor snelheid

Elementor

👀 Sneak peek