Hoe een WordPress Child Thema maken en waarom?

WordPress Child Thema maken

Mensen die een tijdlang bezig zijn met WordPress, gaan toch hun thema willen verbeteren. Er zijn altijd zaken die je anders wilt. Zoals bijvoorbeeld het menu in een andere kleur. Een ander lettertype. Ik zeg maar wat. Het zit niet altijd standaard in de thema instellingen om deze opties te veranderen. Daarom kan het handig zijn om een WordPress Child Thema te maken. Een WordPress Child Thema is eigenlijk ruw gezegd een kopie van het thema dat je gebruikt. Kopie althans van de bestanden die je wilt gaan veranderen. De bestanden die het meest worden veranderd zijn de header.php, de footer.php en de style.css stylesheet.

We zullen hier uitleggen hoe een wordpress child thema maken tot stand kan komen en ook waarom je dit zou moeten doen. Om een WordPress child thema te kunnen gebruiken heb je best de basiskennis van CSS en PHP. Maar vele dingen kan je makkelijk op het internet vinden zonder enige kennis van deze programmeertalen.

Wanneer je geen Child thema gebruikt kan je jezelf in de toekomst heel wat kopzorgen bezorgen. Ten eerste worden bij een update van het thema dat je gebruikt alle gemaakte aanpassingen verwijderd. En ten tweede wanneer je een ernstige fout maakt kan het nodig zijn je hele website opnieuw te moeten installeren. Indien je dan net geen recente backup gemaakt hebt kan je dat heel veel extra werk kosten.

Hoe een WordPress Child Thema maken : Het begin

We beginnen met een aparte map te maken in onze wp-content/themes/thema_child

Voor het gemak nemen we de naam van het thema met een underscore _child. Het eerste wat we gaan doen is een style.css aanmaken. En we gaan dat nieuwe aangemaakte CSS bestand in de nieuwe map plaatsen.

Bovenaan het CSS bestand gaan we WordPress eerst laten weten dat we een Child Thema gebruiken. Dit doen we zo. We gebruiken hierbij het Foxy thema.

/*
Theme Name: Foxy Child Theme
Theme URI: http://www.elegantthemes.com/gallery/foxy/
Description: Foxy Child Theme
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
Template: Foxy
Version: 1.0.0
*/

@import url(“../Foxy/style.css”);

/* =Theme customization starts here
——————————————————- */

Het belangrijkste is dus dat WordPress weet voor welk thema er een Child Thema gemaakt is. Dit wordt duidelijk gemaakt in de Template sectie. Daarna is het heel belangrijk dat er een @import url(‘….’) wordt geplaatst. Zo weet WordPress welke stylesheet bij onze nieuwe stylesheet hoort. Je moet ook zeker zijn dat je de map Foxy_child in dezelfde map hebt geplaatst waar de map Foxy zich bevindt. Dat is in de map Themas of Themes.

WordPress Child Thema activeren

Om het thema dan te activeren gaan we naar ons Dashboard in WordPress. Naar weergave en dan naar themas. Daar kunnen we het Foxy_child thema selecteren en meteen ook activeren en als thema gaan gebruiken. Daarvoor moet het Child Thema natuurlijk in de Themes directory map staan van WordPress. Dat kan je doen door FTP te gebruiken zoals FTP Zilla. Of je kan het Child Thema ook gewoon Zippen en uploaden via WordPress zelf.

We hebben nu een Child Thema voor het Foxy thema gemaakt en het geupload. Wanneer we dit Child Thema gaan activeren zal het identiek hetzelfde er gaan uitzien als ons oorspronkelijk thema. Omdat het enige wat we hebben gedaan is een style.css bestand aangemaakt en hebben dit stylesheet bestand verbonden met het hoofd thema Foxy.

CSS en PHP bestanden veranderen in WordPress Child Thema

Wanneer we veranderingen willen zien aan de layout van de website dienen we dus het style.css in onze Foxy_Child map te gaan editen.  Daarvoor hebben we dus de basiskennis nodig van CSS. Om bijvoorbeeld de achtergrond van de header te gaan veranderen kunnen we dit doen als volgt:

header {background-color:#CCCCCC;}

De achtergrond van de header zal nu een grijze tint krijgen. Wanneer we het lettertype willen vergroten kunnen we er nog aan toevoegen…

header {background-color:#CCCCCC;

font-size:16px;

}

Nu is ons lettertype naar 16px gebracht. Verdere aanpassingen zijn pure CSS daarvoor zal je dus enkele basislessen dienen te volgen of beetje opzoeken op het internet over CSS.

Wanneer we het Functions.php bestand willen veranderen. Het functions.php bestand is waar alle functies voor het thema zijn ondergebracht. Deze functies worden automatisch geladen met het Child Thema maar als je extra functies wilt toevoegen aan je thema kan je dat doen door een nieuw functions.php bestand te gaan aanmaken in het Child Thema folder. De nieuwe functies worden geladen, net voor de functies van het hoofdthema geladen worden. Wanneer we deze functions.php gaan aanmaken in onze Foxy_Child map gaan we beginnen met de PHP tekens erin te plaatsen

<?php

// Hier kunnen we dan de code in gaan plaatsen

?>

Je WordPress Child Thema volledig naar jouw wens

Buiten CSS en de functions.php kunnen we ook nog andere bestanden gaan veranderen in ons WordPress Child Thema. We kunnen eigenlijk het volledige thema gaan veranderen als we dat zouden willen. Gelijk welk bestand we gaan veranderen in ons Child_Thema zal altijd worden geladen VOOR het bestand wordt geladen in ons hoofd thema. Het originele bestand zal dan gewoon worden genegeerd. Om een ander bestand te gaan veranderen dienen we het bestand volledig te gaan kopieren en plakken in het Foxy_Child folder. Wanneer we dus de navigation.php willen veranderen in de includes map. Foxy/includes/navigation.php gaan we dit bestand gaan plaatsen in Foxy_Child/includes/navigation.php. WordPress zal automatisch dit bestand gaan gebruiken doordat de naam en het pad naar dit bestand hetzelfde zijn. En omdat het Child Thema is geactiveerd natuurlijk en niet het hoofd thema.

Wanneer we dus de footer willen veranderen. bijvoorbeeld door de Powered by WordPress te gaan veranderen door iets anders. Gaan we op dezelfde manier te werk. We kopieren het footer.php bestand en we plaatsen het in onze Foxy_child map. We gaan het nodige veranderen zodat Powered by wordpress niet meer zichtbaar is en we gaan het bestand gaan opslaan en uploaden naar de server. We zien dat de footertekst powered by wordpress is verdwenen.

Waarom is een WordPress Child thema maken nodig?

Het zal niet vaak gebeuren dat je volledig tevreden bent over het WordPress thema dat je gebruikt. Vaak zal je na verloop van tijd toch enkele veranderingen willen doen aan je huidige thema. Je kan die veranderingen natuurlijk ook doen in het Thema zelf. Maar dit is echt een riskante bezigheid. Stel dat je een fout maakt dan kan je het hele WordPress CMS systeem opnieuw moeten installeren. Zeker in het begin kan het zeker wel gebeuren dat je een simpel teken vergeet. Zoals de ?> de PHP closing tag. Of de ;} de css closing tag. Dit zijn allemaal domme fouten die je in het begin zeker zult maken. Het is het niet waard om door zo’n stomme fout het hele WordPress systeem opnieuw te moeten installeren, en indien je nooit een backup gemaakt hebt, je hele website opnieuw zult moeten maken.

Dit kan dus allemaal verholpen worden door gebruik te maken van een Child Thema. Als je een ernstige fout gemaakt in het Child Thema, dan verwijder je gewoon het desbetreffende bestand en kopieer het terug van het hoofd thema naar het child thema en je kan terug verder.