Home › Kennisbank › WordPress
Hoe maak ik een aangepaste header en footer in WordPress?
Direct antwoord
De header is het bovenste deel van elke pagina en de footer het onderste deel. Bij een blokthema pas je beide aan in het WordPress-dashboard via Weergave > Editor, onder Patronen bij Template onderdelen. Gebruikt je website een paginabouwer of een klassiek thema, dan pas je de header en footer daar aan.
Wat heb je nodig?
- Een inlog voor het WordPress-dashboard met de rol Beheerder
- Je logo en de teksten voor de header en footer, zoals je contactgegevens
- Een recente back-up van je website als je iets in de code aanpast
Stappenplan6 stappen
Welke manier past bij mijn website?
De header bevat meestal je logo en het menu. De footer bevat vaak contactgegevens en links. Hoe je ze aanpast, hangt af van je thema en van je ervaring.
| Manier | Niveau | Kenmerken |
|---|---|---|
| Site-editor, bij een blokthema | Beginner | De moderne standaard in WordPress. Volledige controle zonder code en klaar voor de toekomst. |
| Paginabouwer, zoals Elementor, Beaver Builder of Divi | Gemiddeld | Veel vrijheid in het ontwerp en geen technische kennis nodig. Kan de laadsnelheid beïnvloeden. |
| Code in een child theme | Gevorderd | Alleen geschikt als je ervaring hebt met code. Fouten kunnen je website beïnvloeden. |
Staat onder Weergave de link Editor, dan heb je een blokthema en volg je het stappenplan. Staan daar Customizer, Widgets en Menu’s, dan heb je een klassiek thema.
Stappenplan 6 stappen
Stap 1: Log in op WordPress
Ga naar jouwdomein.nl/wp-admin en log in. Vervang jouwdomein.nl door je eigen domeinnaam.
Stap 2: Open de Site-editor
Klik in het menu links op Weergave en daarna op Editor.
Stap 3: Open de template onderdelen
Klik op Patronen. Onder het kopje Template onderdelen staan Header en Footer. Een template onderdeel is een vast stuk van je website dat op meerdere pagina’s terugkomt.
Stap 4: Kies de header of de footer
Klik op Header of Footer en klik daarna op het onderdeel dat je wilt aanpassen. Het onderdeel opent in de editor.
Stap 5: Pas de onderdelen aan
Klik op een blok om het te wijzigen. In een header zijn dat meestal de blokken Site logo, Navigatie (het menu) en Knoppen. Met het plusteken (Blok toevoegen) voeg je een nieuw blok toe.
Let op: een wijziging in de header of footer geldt voor alle pagina’s waarop dat onderdeel staat.
Stap 6: Sla de wijzigingen op
Klik rechtsboven op Opslaan. WordPress toont een overzicht van wat er wordt opgeslagen. Klik nogmaals op Opslaan om te bevestigen.
Controleer of het gelukt is
Open je website in een nieuw tabblad en ververs de pagina. De nieuwe header of footer staat op de homepage en op je andere pagina’s. Controleer op je telefoon of het logo, het menu en de knoppen goed passen.
Meet daarna de snelheid met PageSpeed Insights. Zo zie je of de aanpassing je website niet trager maakt.
Hoe pas ik de header en footer aan met een paginabouwer?
Is je website gebouwd met een paginabouwer zoals Elementor, Beaver Builder of Divi, dan bouw je de header en footer in die paginabouwer. Je vindt ze in het onderdeel met de sjablonen voor de hele website, vaak Theme Builder genoemd.
Open daar de header of de footer. Sleep elementen zoals een menu, een knop of je contactgegevens naar de juiste plek en sla het sjabloon op.
Hoe werkt het met een klassiek thema of met code?
Bij een klassiek thema ga je naar Weergave > Customizer. Wat je daar kunt aanpassen, bepaalt je thema. Het logo staat meestal onder Site identiteit en de inhoud van de footer vaak in widgets onder Weergave > Widgets.
Steeds meer websites gebruiken een blokthema, waarin je de header en footer als template onderdelen beheert. De klassieke Customizer wordt daardoor steeds minder gebruikt.
Met code pas je meer aan dan je thema toelaat. Je bewerkt dan de bestanden header.php en footer.php van je thema. Daarin pas je de HTML, de CSS en eventueel de PHP aan, de talen waarin een thema is geschreven.
- Gebruik altijd een child theme. Dat is een eigen laag boven op je thema, waardoor je aanpassingen bij een update van het thema blijven staan.
- Test wijzigingen eerst in een staging-omgeving, een kopie van je website die bezoekers niet zien.
- Controleer na de aanpassing de snelheid van je website.
Let op: een fout in header.php of footer.php kan je hele website onbereikbaar maken.
Werkt het niet?
Je ziet Editor niet onder Weergave
Je website gebruikt een klassiek thema of een paginabouwer. Ga naar Weergave > Customizer, of open de header of footer in je paginabouwer.
Je wijziging is niet zichtbaar op de website
Ververs de pagina. Gebruikt je website een cachingplugin, leeg dan de cache van die plugin. Een cache is een bewaarde kopie van je pagina’s die de website sneller maakt.
Je aanpassing is verdwenen na een update van het thema
De aanpassing stond in de bestanden van het thema zelf. Een update overschrijft die bestanden. Zet aanpassingen in de code daarom altijd in een child theme.
Je website toont een foutmelding na een aanpassing in de code
Zet het oude bestand of je back-up terug. Kom je niet meer in het dashboard, lees dan hoe je een gecrashte WordPress-website herstelt.
Veelgestelde vragen
Wat is Full Site Editing?
Full Site Editing is de werkwijze van blokthema’s. Je bewerkt de hele website met blokken in de Site-editor, dus ook de header en footer.
Hoe wijzig ik alleen het logo in de header?
Bij een blokthema klik je in de header op het blok Site logo en kies je een andere afbeelding. Bij een klassiek thema ga je naar Weergave > Customizer en open je Site identiteit.
Hoe pas ik het menu in de header aan?
Het menu beheer je apart van de rest van de header. Lees hoe je een navigatiemenu toevoegt en bewerkt in WordPress.
Hulp nodig?
Schakel de helpdesk van ViVortis in als:
- je niet kunt vinden waar de header of footer van je website is gebouwd
- je website een foutmelding toont na een aanpassing in header.php of footer.php
- de header of footer op een telefoon verkeerd wordt getoond
Dien een ticket in via de helpdesk van ViVortis en voeg waar mogelijk een screenshot toe.
Lukt het niet?
Dien een ticket in met een screenshot van wat je ziet. De helpdesk reageert meestal binnen één werkdag.