Terug naar hoofdinhoud
Templates in Joomla
Op deze pagina
# Topics
basis
Focus op Joomla

Templates in Joomla

05 juni 2026

Het template is het onderdeel van Joomla dat de meeste mensen zien als "het ontwerp". In werkelijkheid is het meer dan dat. Het template vormt het raamwerk van de pagina: het bepaalt waar het component terechtkomt, waar de modules worden geplaatst, hoe de HTML wordt opgebouwd en welke uitstraling de website krijgt.

Hoe Joomla componentuitvoer en modules omzet in een volledige HTML-pagina.

In dit artikel lees je hoe Joomla-templates echt werken. We beginnen bij de basis voor website-eigenaren en redacteuren, gaan daarna verder met de praktische configuratie voor beheerders en eindigen met de technische details voor ontwikkelaars. Je leert wat een template is, hoe het verschilt van een stijl, hoe een pagina wordt opgebouwd, hoe je uitvoer veilig kunt overriden en hoe je de meest voorkomende fouten voorkomt.

De belangrijkste gedachte om mee te nemen is deze: een template is geen ontwerp, maar een PHP-layout die een ontwerp rendert. Het beantwoordt bij elk verzoek één vraag: gegeven deze componentuitvoer en deze modules, welke HTML sturen we naar de browser? Begrijp je hoe één template is opgebouwd, dan kun je elke Joomla-site vormgeven, overriden en ontwikkelen.

1. De basis

1.1 De plaats van templates binnen de extensiefamilie

Een template is één van Joomla's vijf extensietypen. Elk type heeft zijn eigen taak en naamgevingsprefix:

TypeRolPer paginaPrefix
Component Hoofdinhoud of applicatie van de pagina precies 1 com_
Module Kleine blokken rondom de inhoud meerdere mod_
Plugin Eventgestuurd gedrag op de achtergrond meerdere plg_
Template Uiterlijk, stijl en pagina-indeling (definieert de posities) 1 actieve stijl tpl_
Taal Vertalingen 1 actief -

Het component en de modules bepalen niet waar ze op de pagina verschijnen. Dat doet het template, door posities te definiëren waarin modules kunnen worden geplaatst.

1.2 Wat een template eigenlijk is

Het helpt om een pagina voor te stellen als een raamwerk met vaste plaatsen:

┌─────────────────────────────────────────────┐
│  TEMPLATE  (index.php - het paginaraamwerk) │
│  ┌────────────────────────────────────────┐ │
│  │ positie: menu       [MODULE]           │ │
│  ├─────────┬───────────────┬──────────────┤ │
│  │ sidebar │ COMPONENT          │ sidebar │ │
│  │ -left   │ (hoofdpagina)      │ -right  │ │
│  ├─────────┴────────────────────┴─────────┤ │
│  │ positie: footer     [MODULE]           │ │
│  └────────────────────────────────────────┘ │
└─────────────────────────────────────────────┘

Als een pagina een ingelijst schilderij zou zijn, dan is het component het schilderij, zijn de modules de notities die eromheen hangen en vormt het template de lijst, de muur en de verlichting.

1.3 Er zijn altijd twee templates actief

Elke Joomla-site gebruikt tegelijkertijd twee onafhankelijke templates, één voor elke kant van de website:

ClientStandaardtemplateLocatie
Site (front-end voor bezoekers) Cassiopeia templates/cassiopeia/
Administrator (backend) Atum administrator/templates/atum/ 
public_html/
├── templates/                  (SITE-templates)
│   ├── cassiopeia/
│   └── system/                 (fallback voor foutpagina's en offline modus)
└── administrator/
    └── templates/              (ADMIN-templates)
        ├── atum/
        └── system/

Deze scheiding is handig: je kunt het uiterlijk van de voorkant aanpassen zonder de backend te beïnvloeden, en andersom.

1.4 Template versus stijl, het belangrijke verschil

Dit punt zorgt vaak voor verwarring. Een template en een stijl zijn twee verschillende dingen:

 TemplateStijl
Wat het is De geïnstalleerde bestanden (PHP, CSS, XML) Een opgeslagen verzameling parameterwaarden voor een template
Hoeveel Eén per installatie Meerdere per template
Opgeslagen in #__extensions + bestandssysteem #__template_styles
Voorbeeld "Cassiopeia" "Cassiopeia - Blauw", "Cassiopeia - Rode homepage" 
Cassiopeia (template)
 ├── Stijl: "Default"         blauwe huisstijl, sticky header
 ├── Stijl: "Campagne 2026"   rode huisstijl, geen header
 └── Stijl: "Landingspagina's" minimale layout, geen navigatie

In de backend toont System → Templates → Site Templates de bestanden, terwijl System → Templates → Site Template Styles de stijlen toont. Je wijst altijd stijlen toe aan menu-items, nooit templates.

Naar boven

2. Templates gebruiken zonder code

2.1 De Template Manager

Open System → Templates. Voor elke client (site en administrator) krijg je twee overzichten:

  • Stijlen: stijlen aanmaken of dupliceren, een standaardstijl instellen, stijlen toewijzen aan menu-items en parameters aanpassen.
  • Templates: de geïnstalleerde templatebestanden bekijken, deze bewerken in de ingebouwde code-editor en child templates en overrides beheren.

2.2 De standaardstijl en toewijzing per menu-item

Er is altijd precies één stijl ingesteld als Standaard. Joomla gebruikt deze voor elke pagina waarvoor geen specifiekere toewijzing bestaat. Andere stijlen kunnen worden toegewezen aan specifieke menu-items, waardoor ze de standaardstijl alleen op die pagina's overschrijven.

Menu-item "Home"          → Stijl: "Campagne 2026" (rood)
Menu-item "Blog"          → (geen toewijzing) → Standaardstijl (blauw)
Menu-item "Contact"       → Stijl: "Landingspagina's" (minimalistisch)

Zo kun je binnen één website verschillende layouts op verschillende pagina's gebruiken zonder een tweede template te installeren.

2.3 Templateparameters (opties)

Elke stijl biedt parameters die door de templateontwikkelaar zijn gedefinieerd. Cassiopeia bevat bijvoorbeeld opties zoals:

  • Merkweergave aan of uit, logo, titel en slogan.
  • Kleurenschema of thema (licht, donker of aangepast).
  • Vaste of flexibele containerbreedte.
  • Een sticky header en een knop om terug naar boven te scrollen.
  • Welk lettertypeschema moet worden geladen.

Dit zijn simpelweg formuliervelden die zijn gedefinieerd in templateDetails.xml en als JSON worden opgeslagen in de kolom params van #__template_styles. Twee stijlen van hetzelfde template verschillen alleen in deze opgeslagen waarden.

Naar boven

3. Binnenin een template (de anatomie)

3.1 De mapstructuur

Een modern Joomla-template (versie 4, 5 en 6) heeft een duidelijke structuur:

templates/cassiopeia/
 ├── templateDetails.xml   manifest: naam, posities, parameters, bestanden
 ├── index.php             HET PAGINARAAAMWERK (hoofdlayout)
 ├── error.php             layout voor 403-, 404- en 500-pagina's
 ├── offline.php           layout wanneer de website offline staat
 ├── component.php         minimale layout voor tmpl=component (printen/pop-ups)
 ├── joomla.asset.json     definieert de CSS- en JS-assets van het template
 └── html/                 OVERRIDES van component- en module-uitvoer
     ├── layouts/
     │   └── chromes/      module-"chrome" (card.php, noCard.php)
     ├── mod_menu/
     └── com_content/

Een belangrijke wijziging sinds Joomla 4 is dat CSS, JavaScript, SCSS en afbeeldingen niet langer in de templatemap staan. De templatemap bevat nu voornamelijk PHP-logica.

3.2 Waar de media nu staan

De daadwerkelijke stylesheets en scripts bevinden zich niet meer in templates/, maar onder /media/:

media/templates/
 ├── site/
 │   └── cassiopeia/
 │       ├── css/     template.min.css, template-rtl.min.css
 │       ├── js/
 │       ├── scss/    bron-SCSS, gecompileerd naar css/
 │       └── images/
 └── administrator/
     └── atum/

De verdeling is dus:

  • templates/cassiopeia/ bevat de logica (PHP-layouts en het manifest).
  • media/templates/site/cassiopeia/ bevat de assets (gecompileerde CSS, JavaScript en afbeeldingen).

De regel <media destination="templates/site/cassiopeia" folder="media"> in het manifest zorgt ervoor dat bestanden tijdens de installatie naar /media/... worden gekopieerd.

3.3 De vier PHP-layoutbestanden

Een template kan maximaal vier layoutbestanden bevatten. Joomla kiest automatisch het juiste bestand afhankelijk van de situatie:

BestandWordt gebruikt wanneer
index.php Elke normale pagina, het volledige paginaraamwerk.
component.php ?tmpl=component, alleen inhoud zonder raamwerk (printweergaven, modals en pop-ups).
error.php Er een HTTP-fout optreedt (404, 403 of 500).
offline.php De website in Global Configuration op offline staat.

Elk bestand is een normaal PHP-bestand met een volledige <html>...</html>-structuur, aangevuld met jdoc-tags die Joomla tijdens het renderen vervangt door echte inhoud.

Naar boven

4. Hoe een template een pagina rendert

4.1 jdoc:include, de magische placeholders

Een template bestaat grotendeels uit statische HTML met speciale <jdoc:include>-tags. Tijdens het renderen vervangt Joomla elke tag door gegenereerde inhoud:

<head>
    <jdoc:include type="metas" />     <!-- meta-tags, base href -->
    <jdoc:include type="styles" />    <!-- alle benodigde CSS -->
    <jdoc:include type="scripts" />   <!-- alle benodigde JavaScript -->
</head>
<body>
    <jdoc:include type="modules" name="menu" style="none" />
    <jdoc:include type="message" />     <!-- systeemmeldingen zoals "Opgeslagen!" of fouten -->
    <jdoc:include type="component" />   <!-- DE UITVOER VAN HET COMPONENT (één keer) -->
    <jdoc:include type="modules" name="sidebar-right" style="card" />
</body>
type=Wordt vervangen door
metas / styles / scripts De inhoud van de <head> (sinds Joomla 4 opgesplitst in drie delen).
component De HTML van het huidige component, precies één keer.
modules Alle modules die zijn gepubliceerd op een opgegeven positie.
module Eén specifieke module op naam.
message Wachtrij met systeemmeldingen (succes, waarschuwingen en fouten).

4.2 Moduleposities

Een positie is simpelweg een benoemde plek. Het template definieert zijn posities in templateDetails.xml:

<positions>
    <position>menu</position>
    <position>sidebar-left</position>
    <position>sidebar-right</position>
    <position>footer</position>
</positions>

Vervolgens vult het template deze posities in index.php met <jdoc:include type="modules" name="...">. Cassiopeia bevat standaard ongeveer 18 posities, waaronder topbar, menu, banner, top-a/b, sidebar-left/right, main-top/bottom, bottom-a/b, footer en meer.

Een module die is toegewezen aan een positie die het template nergens rendert, wordt simpelweg niet weergegeven. De positie moet zowel bestaan als worden uitgevoerd via een jdoc-tag.

4.3 Module-"chrome" (de wrapper rond elke module)

Het attribuut style="..." op een modules-tag bepaalt welke chrome wordt gebruikt: de HTML-wrapper rond elke module, inclusief titel, container en CSS-klassen. Cassiopeia definieert zijn eigen chrome-layouts in html/layouts/chromes/:

html/layouts/chromes/
 ├── card.php     verpakt de module in een opgemaakte "card"
 └── noCard.php
style=Effect
none Geen wrapper, alleen de ruwe module-uitvoer.
card Een Bootstrap-kaart met titel en opmaak.
(aangepast) Elke chrome-layout die je zelf toevoegt.

Chrome is sinds Joomla 4 verplaatst van de oude modChrome_*()-functies naar aparte layoutbestanden. Daardoor kun je de opmaak veel eenvoudiger overriden of uitbreiden.

4.4 De volledige renderflow

Samengevat gebeurt bij elk verzoek het volgende:

Component + modules genereren hun HTML
        │
        v
Template index.php wordt geladen (het raamwerk)
        │
        v
De documentrenderer verwerkt alle <jdoc:include>-tags
   - type="component"  → voegt de componentuitvoer in
   - type="modules"    → rendert alle modules op die positie (met chrome)
   - type="styles"     → voegt CSS toe die is verzameld door de WebAssetManager
        │
        v
Volledig HTML-document → wordt naar de browser gestuurd
Naar boven

5. Het manifest en de database

5.1 templateDetails.xml, het manifest

Het manifest beschrijft het template voor Joomla: de bestanden, posities, parameters, talen en eventueel het parent template.

<extension type="template" client="site">
    <name>cassiopeia</name>
    <version>1.0</version>
    <inheritable>1</inheritable>          <!-- kan als parent template dienen -->

    <files>
        <filename>index.php</filename>
        <filename>component.php</filename>
        <folder>html</folder>
    </files>

    <media destination="templates/site/cassiopeia" folder="media">
        <folder>css</folder><folder>scss</folder><folder>images</folder>
    </media>

    <positions> ... </positions>          <!-- de beschikbare templateposities -->

    <config>
        <fields name="params">            <!-- de stijlparameters (Opties) -->
            <fieldset name="advanced"> ... </fieldset>
        </fields>
    </config>
</extension>

5.2 Waar templates worden opgeslagen

Drie databasetabellen beschrijven de templatewereld:

TabelBevat
#__extensions Eén record per geïnstalleerd template (type='template', element='cassiopeia', client_id 0=site / 1=administrator, enabled en een JSON-snapshot van het manifest in manifest_cache).
#__template_styles Eén record per stijl: template, client_id, home (standaardstijl), title en params (JSON met de opgeslagen opties).
#__menu De kolom template_style_id verwijst naar de stijl die aan een menu-item is gekoppeld (0 = gebruik de standaardstijl). 
SELECT id, template, title, home
  FROM #__template_styles
 WHERE client_id = 0;

-- home='1'  → de standaardstijl voor de standaardtaal
-- home='0'  → een niet-standaardstijl (kan nog steeds aan menu-items zijn gekoppeld)

-- welke stijl gebruikt elk menu-item?
SELECT title, template_style_id
  FROM #__menu
 WHERE template_style_id <> 0;

De standaardstijl wordt dus bepaald door #__template_styles.home, terwijl een stijltoewijzing per pagina simpelweg wordt opgeslagen in de kolom template_style_id van het menu-item. De stijlparameters zelf worden altijd opgeslagen in #__template_styles.params.

Naar boven

6. Template overrides (de superkracht)

6.1 Waarom overrides bestaan

Pas nooit corebestanden van een component of module aan. Joomla overschrijft deze bij de volgende update en al je wijzigingen gaan verloren. In plaats daarvan kan een template elke layout overschaduwen door een kopie in de map html/ te plaatsen.

Kopieer: components/com_content/tmpl/article/default.php
Naar:    templates/cassiopeia/html/com_content/article/default.php

Joomla controleert eerst de map html/ van het actieve template. Als daar een overeenkomstig bestand aanwezig is, wordt dat bestand gebruikt.

6.2 Wat je kunt overriden

DoelOverridepad onder html/
Een componentweergave of layout html/com_content/article/default.php
Een module html/mod_menu/default.php
Een gedeelde JLayout html/layouts/joomla/form/field/...
Module-chrome html/layouts/chromes/card.php
Paginering, formuliervelden en systeemlayouts html/layouts/...

De backend bevat zelfs een ingebouwde tool. Open System → Templates → (jouw template) → Create Overrides en Joomla kopieert automatisch het juiste bestand naar html/.

6.3 Wat je binnen een overridebestand krijgt

Een override is een layout en wordt daarom uitgevoerd binnen de context van de View. De gegevens die de View heeft voorbereid zijn al beschikbaar via $this:

<?php defined('_JEXEC') or die; ?>
<h1><?php echo $this->escape($this->item->title); ?></h1>

<?php foreach ($this->items as $item) : ?>
    <article><?php echo $item->introtext; ?></article>
<?php endforeach; ?>

<?php echo $this->pagination->getListFooter(); ?>
VariabeleBevat meestal
$this->item Het individuele record (artikel, contactpersoon) in een detailweergave.
$this->items De lijst met records in een lijst- of categorieweergave.
$this->pagination Het pagineringsobject voor lijstweergaven.
$this->params Samengevoegde parameters van menu-item en component.
$this->escape() Handige methode voor veilige uitvoer (zie deel 11).

Je past alleen de HTML aan, nooit de queries. Het Model heeft alle gegevens al opgehaald, dus voeg geen databaseaanroepen toe binnen een layoutbestand.

6.4 Alternatieve layouts (niet overriden, maar toevoegen)

Een nettere oplossing dan de standaardlayout overriden is het toevoegen van een extra layout die je per menu-item of module kunt kiezen:

html/com_content/category/
 ├── blog.php
 └── blog_grid.php        jouw nieuwe "Grid"-layout

De nieuwe layout verschijnt vervolgens in de keuzelijst Choose a Layout van het menu-item. De originele layout blijft intact en volledig updatebestendig.

Naar boven

7. De Web Asset Manager

7.1 joomla.asset.json, declareren in plaats van hardcoderen

Sinds Joomla 4 declareren templates en extensies hun CSS- en JavaScriptbestanden declaratief, inclusief naam, versie en afhankelijkheden, in plaats van handmatig <link>- en <script>-tags te schrijven:

{
  "name": "cassiopeia",
  "assets": [
    {
      "name": "template.cassiopeia.ltr",
      "type": "style",
      "uri": "template.min.css",
      "dependencies": [ "fontawesome" ]
    }
  ]
}

7.2 Assets gebruiken vanuit PHP

$wa = $this->getWebAssetManager();
$wa->useStyle('template.cassiopeia.ltr')   // lost afhankelijkheden automatisch op
   ->useScript('template.cassiopeia');

// Een los bestand registreren en direct gebruiken (zoals een child template doet):
$wa->registerAndUseStyle('colors_custom', 'global/colors.css');

Waarom dit beter is dan handmatige tags:

  • Afhankelijkheden worden automatisch opgelost: vraag de template-CSS aan en Font Awesome wordt automatisch mee geladen.
  • Geen dubbele bestanden: dezelfde bibliotheek wordt nooit twee keer geladen.
  • Versiebeheer en volgorde worden centraal geregeld en daarna weergegeven via <jdoc:include type="styles" />.

Kort gezegd is de WebAssetManager verantwoordelijk voor het vullen van de styles- en scripts-placeholders van jdoc.

Naar boven

8. Child templates (overerving)

8.1 Het idee

Sinds Joomla 4.1 hoef je Cassiopeia niet meer te forken en daarmee toekomstige updates mis te lopen. Je kunt een child template maken dat alles van een parent template erft en alleen jouw eigen aanpassingen bevat.

templates/
 ├── cassiopeia/            parent, <inheritable>1</inheritable>
 └── cassiopeia_extended/   child, <parent>cassiopeia</parent>
     ├── index.php          laadt de parent en voegt enkele aanpassingen toe
     └── html/              alleen de overrides die je zelf wijzigt

8.2 Hoe een child template eruitziet

De index.php van een child template kan eenvoudig de parent aanroepen en daarbovenop extra wijzigingen toepassen:

// templates/cassiopeia_extended/index.php
require JPATH_THEMES . '/cassiopeia/index.php';   // hergebruik het volledige raamwerk

$wa = $this->getWebAssetManager();
$wa->registerAndUseStyle('colors_custom', 'global/colors.css'); // alleen kleuren overschrijven

In het manifest wordt de relatie vastgelegd:

<extension type="template" client="site">
    <name>cassiopeia_extended</name>
    <inheritable>0</inheritable>
    <parent>cassiopeia</parent>
</extension>

Het grote voordeel is duidelijk: wanneer het parent template een beveiligingsupdate krijgt, profiteert het child template daar automatisch van. Je hoeft alleen je eigen verschillen te onderhouden.

Naar boven

9. Templateframeworks (de praktijk)

9.1 De meeste websites gebruiken geen kale Cassiopeia

In de praktijk draait een groot deel van de Joomla-websites op een templateframework: een onderliggend systeem dat bovenop Joomla's templatelayer een visuele bouwer en herbruikbare onderdelen toevoegt.

FrameworkAanpakOpvallende kenmerken
Helix Ultimate Gratis, vaak meegeleverd met commerciële templates Drag-and-drop layoutbuilder, mega menu's, presets
Gantry 5 Configuratiegestuurd YAML-configuratie, Twig-templating, particles
YOOtheme Pro Commercieel Visuele pagebuilder, dynamische content uit Joomla-data

De afweging is duidelijk: frameworks versnellen ontwerpwerk en geven niet-programmeurs veel mogelijkheden, maar voegen ook een extra abstractielaag toe bovenop het standaard templatesysteem, en soms extra prestatie-overhead.

Alles uit dit artikel blijft daaronder gewoon gelden. Frameworks renderen uiteindelijk nog steeds via index.php, jdoc-tags, posities en overrides. Het framework genereert die laag alleen voor je.

Naar boven

10. Toegankelijkheid en prestaties

10.1 Toegankelijkheid is een kerndoel van Joomla

Cassiopeia en Atum zijn opnieuw ontworpen met toegankelijkheid als uitgangspunt. Een goed template zou het volgende moeten bieden:

  • WCAG 2.1-compliance direct uit de doos.
  • Volledige toetsenbordnavigatie en duidelijk zichtbare focusstijlen.
  • Ondersteuning voor schermlezers dankzij correcte semantiek en ARIA-attributen.
  • Voldoende kleurcontrast en schaalbare tekst.

Cassiopeia biedt een sterke basis op het gebied van toegankelijkheid. Onzorgvuldig overrides maken in de HTML is één van de snelste manieren om die toegankelijkheid te breken. Behoud daarom altijd rollen en ARIA-attributen wanneer je layouts aanpast.

10.2 Templates bepalen de Core Web Vitals

Het template beheert de <head>, het laden van assets en de HTML van afbeeldingen. Daardoor heeft het grote invloed op de Core Web Vitals:

MetricWaar het template invloed op heeft
LCP (Largest Contentful Paint) Hero-afbeeldingen, CSS-levering en render-blocking resources.
CLS (Cumulative Layout Shift) Afbeeldingsafmetingen en strategie voor het laden van lettertypen.
INP (Interaction to Next Paint) Hoeveel JavaScript wordt geladen en wanneer.

Optimalisatietechnieken die in het template thuishoren:

  • CSS en JavaScript minimaliseren (Cassiopeia levert standaard *.min.css) en de WebAssetManager dubbele bestanden laten voorkomen.
  • Niet-kritische JavaScript uitstellen met defer.
  • Afbeeldingen onder de vouw lazy-loaden met loading="lazy".
  • WebP of AVIF gebruiken en altijd expliciete breedte- en hoogte-attributen instellen.
  • Geen zware frameworkfunctionaliteit laden die je toch niet gebruikt.
Naar boven

11. Beveiliging en template-events

11.1 Escape alles wat je uitvoert

Overridebestanden tonen ruwe gegevens en vormen daardoor een klassiek injectiepunt. Escape tekst altijd voordat je deze weergeeft:

echo $this->escape($title);                           // View-helper (aanbevolen)
echo htmlspecialchars($title, ENT_QUOTES, 'UTF-8');  // gelijkwaardig in standaard PHP

Veilige gewoonten voor templates:

  • Escape alle uitvoer, vooral gegevens die door gebruikers zijn ingevoerd.
  • Gebruik geen inline JavaScript. Registreer scripts via de WebAssetManager (dit helpt ook bij een Content Security Policy).
  • Gebruik Joomla-API's in plaats van zelf HTML of SQL te bouwen.
  • Houd logica buiten layouts (geen databasequeries, zie deel 6.3).

11.2 Events die invloed hebben op het template

Plugins kunnen de gerenderde pagina rondom het template aanpassen via document- en applicatie-events, zonder dat er één templatebestand hoeft te worden gewijzigd:

EventWordt uitgevoerdTypisch gebruik
onBeforeCompileHead Vlak voordat de <head> wordt opgebouwd CSS en JavaScript toevoegen of verwijderen, meta-tags toevoegen.
onAfterRender Nadat de volledige HTML is opgebouwd De uiteindelijke HTML-uitvoer nabewerken. 
// Een system-plugin die een stylesheet toevoegt aan elke pagina:
public function onBeforeCompileHead(): void
{
    $this->getApplication()->getDocument()
         ->getWebAssetManager()
         ->registerAndUseStyle('my.extra', 'media/mything/extra.css');
}

Ook hier zie je weer losse koppeling terugkomen: het template bouwt het raamwerk, terwijl plugins via events assets en uitvoer kunnen aanpassen. Geen van beide hoeft de code van de ander te wijzigen.

Naar boven

12. Je eigen template bouwen

12.1 Het minimaal werkende template

Een werkend sitetemplate heeft verrassend weinig bestanden nodig:

tpl_hello/
 ├── templateDetails.xml   naam, bestanden, posities, parameters
 ├── index.php             <html> + jdoc-tags
 ├── error.php
 └── component.php

Een minimaal werkende index.php ziet er ongeveer zo uit:

<?php defined('_JEXEC') or die; ?>
<!DOCTYPE html>
<html>
<head>
    <jdoc:include type="metas" />
    <jdoc:include type="styles" />
    <jdoc:include type="scripts" />
</head>
<body>
    <jdoc:include type="modules" name="menu" style="none" />
    <jdoc:include type="message" />
    <jdoc:include type="component" />   <!-- verplicht: de pagina-inhoud -->
</body>
</html>

Vervolgens:

  1. Maak er een zipbestand van en installeer het via Extensions → Install.
  2. Ga naar System → Templates en stel de stijl in als standaard.
  3. Ververs de website en je eigen raamwerk wordt weergegeven.

In de praktijk is het meestal verstandiger om te beginnen met een child template van Cassiopeia in plaats van helemaal vanaf nul. Zo krijg je posities, assets en toegankelijkheid gratis mee.

Naar boven

13. Veelgemaakte fouten en valkuilen

  • Corebestanden aanpassen in plaats van overrides in html/ te gebruiken. Je wijzigingen verdwijnen bij de volgende update.
  • Vergeten om <jdoc:include type="component" /> op te nemen. Het resultaat is een pagina zonder inhoud.
  • Template en stijl door elkaar halen. Het template bestaat uit bestanden, de stijl bestaat uit opgeslagen parameters.
  • Een module toewijzen aan een positie die het template nooit rendert. De module verdwijnt stilletjes.
  • <link>- en <script>-tags hardcoderen in plaats van de WebAssetManager te gebruiken. Dit leidt tot dubbele of verkeerd geladen assets.
  • Cassiopeia forken terwijl een child template je updatebestendig had gehouden.
  • Toegankelijkheid breken door ARIA-attributen of semantische HTML-elementen te verwijderen tijdens het aanpassen van layouts.
  • Databasequeries toevoegen binnen een layout. Het Model heeft de gegevens al voorbereid in $this.
Naar boven

14. Best practices

Als je maar een paar dingen uit dit artikel onthoudt, laat het dan deze zijn:

  • Zie een template als een layout, niet als een ontwerp. Het ontwerp zit vooral in de CSS onder /media/.
  • Gebruik stijlen en menu-toewijzingen voor verschillende layouts in plaats van extra templates te installeren.
  • Pas uitvoer aan via html/-overrides en geef waar mogelijk de voorkeur aan alternatieve layouts boven het vervangen van de standaardlayout.
  • Definieer assets in joomla.asset.json en laat de WebAssetManager de volgorde en afhankelijkheden beheren.
  • Bouw verder op een child template zodat je updates van het parent template blijft erven.
  • Behoud semantiek en ARIA-attributen en houd de Core Web Vitals in de gaten.
Naar boven

15. In het kort

RAAMWERK    templates/{tpl}/index.php  (de jdoc-layout)
ASSETS      media/templates/site/{tpl}/  (css, js, scss, afbeeldingen)
STIJL       System → Templates → Site Template Styles
STANDAARD   Stel een standaardstijl in (home=1)
PER PAGINA  Wijs een stijl toe aan een menu-item (template_style_id)
PLACEHOLDER <jdoc:include type="component|modules|styles|message" />
POSITIE     Definieer in XML, render met jdoc, toon live via ?tp=1
GEEN FRAME  Voeg ?tmpl=component toe aan een URL
OVERRIDE    templates/{tpl}/html/com_xxx/view/layout.php
CHILD       <parent>cassiopeia</parent> in het manifest
ESCAPEN     echo $this->escape($value);
EVENTS      onBeforeCompileHead, onAfterRender (plugins)
Naar boven

16. Samenvatting

In Joomla is een template veel meer dan alleen "het ontwerp". Het is de motor die componentuitvoer en modules omzet in een volledige HTML-pagina. Het raakt vrijwel elke laag van de website:

  • Layout: bepaalt waar componenten en modules terechtkomen.
  • Huisstijl: via stijlen en parameters, zonder code te wijzigen.
  • Uitvoer: via updatebestendige overrides in html/.
  • Prestaties: via de WebAssetManager en de Core Web Vitals.
  • Toegankelijkheid: via correcte semantiek en ARIA-attributen.
  • Onderhoudbaarheid: via child templates die updates blijven erven.

Zodra je de anatomie van één template begrijpt, het manifest, index.php, posities, jdoc-tags en overrides, kun je elke Joomla-website vormgeven, overriden en ontwikkelen. Frameworks zoals Helix, Gantry en YOOtheme genereren uiteindelijk alleen dezezelfde laag; de onderliggende basis blijft altijd hetzelfde.

Of je nu een nieuwe Joomla-site bouwt, migreert vanaf een oudere versie of worstelt met een template dat zich anders gedraagt dan verwacht, het loont om deze architectuur vroeg te begrijpen. Templates zijn eenvoudig in gebruik, maar juist de details onder de motorkap zorgen voor snelle, toegankelijke en goed onderhoudbare Joomla-websites.

Naar boven
Templates in Joomla
Peter Martin

Joomla en Linux specialist voor snelle, veilige en schaalbare websites.