WordPress Child Theme maken

Haast niemand schaft een WordPress theme aan dat meteen volledig aan zijn wensen voldoet. Er zijn altijd aanpassingen die je wilt maken. Je kunt deze aanpassingen natuurlijk gewoon doen maar zonder WordPress Child Theme gaan alle wijzigingen verloren wanneer je een WordPress Theme update. Dit is natuurlijk dood zonde van alle tijd die je er in hebt gestoken. In dit artikel gaan wij een WordPress Child Theme maken en uitleg geven wat er gebeurd en waarom.

WordPress Child Theme maken Twenty Fourteen

In dit artikel pakken we als voorbeeld het Twenty Fourteen Theme van WordPress zelf en gaan we hier een Child Theme bij maken.

Het eerste wat je moet doen is een nieuwe folder aanmaken in je theme folder. Deze kun je vinden in wp-content/themes. Dit kun je doen vanuit je controlpanel of via FTP met bijvoorbeeld FileZilla.

Belangrijk is dat je de nieuwe folder een naam geeft waar geen spaties in voorkomen. Vaak wordt de originele naam gebruikt van de hoofd theme met daar –child aan het einde. In het voorbeeld wat wij nu gebruiken zou de naam van de folder er zo uit komen te zien “twentyfourteen-child”.

WordPress Child Theme maken

 

Zodra de folder van het Child Theme is aangemaakt kunnen we een bestand gaan maken genoemd “style.css”. Dit is een stijl bestand dat je moet hebben bij het maken van een Child Theme.

Het nieuw aangemaakt stijl bestand moet beginnen met het volgende stukje code:

/*
 Theme Name:   Twenty Fourteen Child
 Theme URI:    http://example.com/twenty-fourteen-child/
 Description:  Twenty Fourteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfourteen
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fourteen-child
*/

@import url("../twentyfourteen/style.css");

/* =Aanpassingen vanaf hier
-------------------------------------------------------------- */

Nu kun je nieuwe stukken css toevoegen of bestaande overschrijven om je Theme aan te passen. Let er wel op dat je alleen css toevoegt na het @import gedeelte en dat je in het bovenste gedeelte de “Theme Name” en “Template” laat zoals het is (als je Twenty Fourteen als Theme gebruikt).

Het volgende wat je moet doen is het activeren van je WordPress Child Theme. Wanneer je ingelogd bent op je WordPress website ga dan naar Weergeve -> Themes. Als je precies gedaan hebt wat wij hierboven hebben uitgelegd dan moet er een “Twenty Fourteen Child” Theme tussen moeten staan.

Klik op “Activeer” en je WordPress Child Theme is actief.

WordPress Child Theme maken

Aanpassingen maken in je WordPress Child Theme CSS

Als je nu naar je website gaat dan zul je merken dat deze exact hetzelfde is als je “Twenty Fourteen Theme”. Dit komt natuurlijk omdat je een CSS Stylesheet hebt geïmporteerd van “Twenty Fourteen Theme”.

Wil je aanpassingen door gaan voeren in je CSS Stylesheet dan kun je dit doen onder het @import gedeelte. Alle nieuwe CSS regels zullen worden toegepast op je website.

Om je een voorbeeld te geven gaan we de kleur van je lettertype aanpassen. Stel dat we de kleuren van het originele zwart naar blauw willen veranderen? Het enige wat je dan aan je CSS Stylesheet moet toevoegen is het volgende:

/*
 Theme Name:   Twenty Fourteen Child
 Theme URI:    http://example.com/twenty-fourteen-child/
 Description:  Twenty Fourteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfourteen
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fourteen-child
*/

@import url("../twentyfourteen/style.css");

/* =Aanpassingen vanaf hier
-------------------------------------------------------------- */

p { color: #0e00cb;}

Deze nieuwe regel in je WordPress Child Theme CSS overschrijft de CSS van je WordPress Parent Theme.

Het aanpassen van je functions.php bestand

Het bestand functions.php is het bestand waar alle functionaliteiten van je WordPress website worden geplaatst. Wil jij nieuwe functies toevoegen aan je WordPress Child Theme dan kun je een nieuw funcions.php bestand aanmaken en deze plaatsen in de root van je WordPress Child Theme folder.

In tegenstelling tot je CSS worden functies in je originele functions.php bestand niet overschreven wanneer je website laad. De functies in je nieuwe functions.php bestand zullen worden toegevoegd aan het huidige functions.php bestand wanneer je website laad.

Hoe moet je nieuwe functions.php bestand er eigenlijk uit zien? Dit is eigenlijk heel simpel. Je nieuwe functions.php bestand moet beginnen met een PHP opening tag en eindigen met een PHP sluiting tag. Daartussen kun je alle nieuwe functies plaatsen voor je website.

Hieronder een voorbeeld van een functions.php bestand (leeg):

Het aanpassen van andere bestanden binnen je WordPress Child Theme

In tegenstelling tot het functions.php bestand, worden de functies voor andere PHP-bestanden van uw thema niet automatisch geïmporteerd. Andere PHP bestanden worden bewerkt door het bestand te vervangen door een kopie. Het oorspronkelijke bestand van het thema wordt dan genegeerd en de nieuwe wordt in plaats daarvan gebruikt.

Bijvoorbeeld, als je van plan bent om wijzigingen aan te brengen in het Twenty Fourteen 404.php bestand, moet je eerst een kopie maken van het originele 404.php bestand en deze plakken in je WordPress Child Theme folder.

Als het gekopieerde 404.php bestand is geplaatst in je WordPress Child Theme folder kun je aanpassingen gaan maken in het bestand. Deze aanpassingen zul je meteen zien wanneer je het aangepaste 404.php bestand plaatst (overschrijft) in je WordPress Child Theme folder.

Dit zijn de belangrijkste dingen die je moeten weten om een WordPress Child Theme te maken. Ervaar je toch problemen en kom je er niet uit?

WordPress heeft een grote gemeenschap die elkaar graag helpt. Kijk op het WordPress Forum en wellicht staat je vraag er al tussen.

WordPress Hosting

Mocht je nog op zoek zijn naar een hosting provider voor je nieuwe WordPress website kijk dan eens op onze pagina “WordPress Hosting Vergelijken“.