Werk je met Elementor en wil je de stijl of structuur van je site aanpassen, dan kom je vaak al snel bij themabestanden terecht. Doe je dat rechtstreeks in het hoofdthema, dan raak je je wijzigingen kwijt zodra er een update verschijnt. De oplossing is een child theme.
Met een child theme kun je veilig eigen aanpassingen doen, zonder dat updates van het parent theme (in dit geval Hello Elementor) je werk overschrijven.
Wat is een child theme?
Een child theme is eigenlijk een soort laag bovenop je huidige thema. Het parent theme (bijvoorbeeld Hello Elementor) levert alle standaard functionaliteit en opmaak. Het child theme zorgt ervoor dat jij daar veilig wijzigingen in kunt doen, zonder dat je in de originele bestanden hoeft te rommelen.
Je kunt het vergelijken met een beschermhoes op je telefoon: de telefoon blijft hetzelfde, maar je kunt de hoes aanpassen of vervangen zonder dat de telefoon zelf beschadigt. Zo werkt het ook met child themes: het parent theme blijft intact, terwijl jij aanpassingen doet in de “beschermende” laag erbovenop.
Wat er gebeurt in de praktijk:
- Het parent theme bepaalt de basis: de standaard stijlen, functies en templates.
- Het child theme voegt daar jouw eigen CSS, functies en aangepaste bestanden aan toe.
- Samen vormen ze wat bezoekers uiteindelijk zien.
Het grote voordeel is dat updates van het parent theme je werk niet weghalen. Jij houdt dus alle vrijheid om je site naar wens aan te passen, zonder telkens bang te hoeven zijn dat een update alles terugzet naar standaard.
Waarom een child theme gebruiken?
Het grootste voordeel van een child theme is dat je werk update-proof blijft. Normaal gesproken overschrijven updates van je thema alle bestanden. Werk je in een child theme, dan worden alleen de bestanden van het parent theme vernieuwd en blijven jouw aanpassingen netjes bewaard.
Daarnaast geeft een child theme je overzicht. Alles wat je zelf aanpast – van CSS-regels tot aangepaste templates – staat in een aparte map. Je hoeft dus nooit te zoeken wat je zelf hebt toegevoegd en wat standaard bij het thema hoort.
En misschien wel het belangrijkste: het is veiliger. Als je een fout maakt in je child theme, blijft het parent theme onaangetast. Je kunt dus altijd terugvallen op de originele bestanden, zonder dat je de hele site omver trekt.
Elementor zelf raadt child themes aan zodra je meer wilt dan de standaard stylingopties en widgets. Met andere woorden: wil je écht de vrijheid hebben om je site tot in detail aan te passen, dan is een child theme de juiste basis.
Zo maak je een child theme voor Hello Elementor
1. Maak een map aan
Ga via SFTP of het bestandsbeheer van je hosting naar:
/wp-content/themes/
Hier zie je een map hello-elementor. Maak in dezelfde directory een nieuwe map aan met de naam:
hello-elementor-child
2. Voeg een style.css-bestand toe
Maak in de nieuwe map een bestand style.css en plak deze code:
/*
Theme Name: Hello Elementor Child
Description: Child theme voor Hello Elementor
Author: [jouw naam of bedrijf]
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/
Pas de naam, auteur en beschrijving gerust aan. Belangrijk is dat Template exact overeenkomt met de mapnaam van het parent theme: hello-elementor.
3. Voeg functions.php toe
Maak in dezelfde map een bestand functions.php en voeg dit toe:
<?php
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
});
?>
Deze code zorgt ervoor dat de stijlen van Hello Elementor automatisch worden ingeladen, bovenop de stijlen die je zelf in je child theme toevoegt.
4. Activeer je child theme
Upload beide bestanden naar de map hello-elementor-child. Log in op je WordPress-dashboard, ga naar Weergave > Thema’s en activeer je nieuwe child theme. Je site ziet er hetzelfde uit, maar je wijzigingen kun je voortaan veilig kwijt in het child theme.
5. (Optioneel) Voeg een screenshot toe
Wil je dat je child theme ook een herkenbaar plaatje krijgt in het thema-overzicht? Plaats een PNG-afbeelding van 1200×900 px in je child-theme map en noem deze screenshot.png.
Hoe ga je verder?
Vanaf nu maak je al je CSS-aanpassingen in style.css van je child theme. Voor templates werkt het zo: kopieer een bestand uit Hello Elementor naar de child-theme map en bewerk dat bestand. Alles wat je niet kopieert, blijft automatisch uit het parent theme komen.
Zo kun je dus veilig headers, footers of specifieke templatebestanden aanpassen, zonder risico dat een update van Hello Elementor je werk ongedaan maakt.
Voorbeeld: een eigen CSS-regel toevoegen
Stel dat je de knoppen op je site een eigen kleur wilt geven, omdat de standaardinstellingen van Hello Elementor niet genoeg zijn. In je child theme kun je dit eenvoudig doen door in style.css een extra regel toe te voegen, bijvoorbeeld:
button,
.elementor-button {
background-color: #0056b3;
color: #ffffff;
border-radius: 4px;
}
Zodra je het bestand opslaat en de cache vernieuwt, krijgen alle knoppen op je site deze stijl. Omdat dit in het child theme staat, blijft het behouden bij een update van Hello Elementor.
Voorbeeld: een templatebestand aanpassen
Wil je de header van je site net iets anders opbouwen? Kopieer dan header.php uit de map van Hello Elementor naar de map van je child theme. Pas daar de HTML of PHP aan, bijvoorbeeld om een extra menulocatie toe te voegen.
WordPress gebruikt vanaf dat moment jouw versie van header.php, terwijl alle andere bestanden gewoon uit het parent theme blijven komen. Zo kun je gericht en veilig wijzigingen doorvoeren.
Hulp nodig bij child themes?
Een child theme maken is technisch niet moeilijk, maar kan spannend zijn als je het voor het eerst doet. Bij Surver bouwen we websites standaard met een veilige structuur en hebben we veel ervaring met theme’s als Elementor, maar ook veel anderen.
Wil je dat wij dit voor je regelen, of zoek je ondersteuning via onze webmaster-service, dan staan we klaar om je te helpen – of het nu gaat om kleine tweaks of complete maatwerkoplossingen.
