Tag: functions

Wil je weten hoe je een child theme aan kunt maken? Lees dan gauw verder. In deze blog gaan we een child theme maken. We nemen je mee door het proces en leggen je uit waarom het belangrijk en soms handig kan zijn om een child theme te gebruiken. Een child theme aanmaken voor WordPress is vrij eenvoudig. Mocht je na het lezen van deze blog er toch niet helemaal uitkomen? Geen probleem! We helpen je graag verder bij het aanmaken van jouw eerste WordPress child theme.

Wat is een child theme?

Een child theme is niets meer dan een thema dat de functies en styling overneemt van een hoofdthema dat je al gebruikt. Wil je bijvoorbeeld bepaalde styling in CSS of bepaalde functies in PHP veranderen? Doe dit dan met zo’n child theme. Zo voorkom je dat jouw wijzigingen verloren gaan bij een update van het desbetreffende hoofdthema. Een child theme bestaat tenminste uit 1 folder met 1 CSS bestand. Zonder het CSS bestand kun je het thema niet vinden in jouw WordPress dashboard. Een child theme kun je op verschillende manieren aanmaken.

Handmatig een child theme maken

Aangezien het niet moeilijk is om handmatig een child theme aan te maken, gaat onze voorkeur hier ook naar uit. Zoals eerder benoemd moet een child theme tenminste bestaan uit één folder en één CSS bestand. Het is de bedoeling dat je in het CSS bestand een aantal regels aan gaat maken dat er voor moet zorgen dat het child theme verbinding gaat maken met het hoofdthema dat je al geïnstalleerd hebt. Neem de stappen zorgvuldig door!

1. Maak eerst verbinding met de FTP server of de filemanger op jouw control panel.
2. Ga vervolgens door de mappenstructuur opzoek naar de map ‘themes’ in WordPress. Standaard gaat het via het volgende bestandspad: ‘httpdocs/wp-content/themes’.
3. Hier zie je als het goed is ook jouw hoofdthema staan dat je wellicht al gebruikt. Het is nu de bedoeling hier een nieuwe folder aan te maken. Je mag deze zelf een gewenste naam geven.
4. Na het aanmaken van de gewenste folder, kun je deze openen en maken hier een text bestand aan dat we vervolgens ‘style.css’ noemen.
5. Open nu het bestand ‘style.css’. Dit kun je het beste openen met een code editor als Notepad ++ of Atom bijvoorbeeld.

Nu we het bestand style.css aangemaakt hebben kunnen we dit bestand voorzien van de benodigde code om hem te laten verbinden met het hoofdthema dat je hiervoor wil gebruiken. Voeg hiervoor de volgende code toe:

/*
Theme Name: De Web Developer
Theme Name: De Web Developer
Theme URI: https://www.dewebdeveloper.nl/
Author: Bouke Lourens
Author URI: https://www.dewebdeveloper.nl/
Description: Hier kun je een omschrijving invullen voor het template.
License: Hier vul je de eventuele license in.
License URI: license.txt
Tags: Tags: tags, kun, je, op, deze, manier, invoeren
Text Domain: Hier vul je de mapnaam van je childtheme in.
Template: storefront
Version: Hier vul je de versie in van jouw template, bijvoorbeeld: 1.0
*/

Na het toevoegen van de bovenstaande code moet je nog bij ‘Template:’ de templatenaam invullen van het hoofdthema waarvoor je deze child theme aanmaakt. De naam moet wel exact overeenkomen met de naam van het hoofdthema (parent theme), anders kan deze geen verbinding maken en zul je hem niet zien tussen de jouw templates. Je kunt de naam vrij eenvoudig opzoeken in de template folder via FTP of de filemanager. Nadat je de bovenstaande code juist heb ingevuld kun je de style.css pagina opslaan. Gelukt! Jouw child theme is nu aangemaakt.

Het child theme activeren

Nu jouw child theme aangemaakt is, kunnen we deze activeren. Dit doe je door allereerst in te loggen op jouw WordPress dashboard. Nadat je ingelogd bent ga je naar: ‘Weergave’ > ‘Thema’s’. Op deze pagina zie je vervolgens alle geïnstalleerde thema’s staan. Ook zul je jouw net aangemaakte child thema hier zien staan. Om het child thema te gebruiken moeten we deze eerst nog activeren. Hover met je muis over het child theme, waarna je de knop ‘Activeren’ ziet staan en klik hierop. Gefeliciteerd! Je WordPress website is nu ingesteld met jouw eigen net aangemaakte child theme. Je kunt ook nog even drukken op ‘Themadetails’. Hier zie je vervolgens alle details die je hebt kunnen invullen in de code die je opgeslagen hebt in het style.css bestand. Echter, zie je nog geen tumbnail oftewel een thema afbeelding. Hoe we dit oplossen, gaan we nu bespreken.

Preview afbeelding instellen voor jouw child theme

Zoals je hebt kunnen merken hebben alle templates netjes een thema preview afbeelding, behalve jouw eigen child theme. Dit kunnen we vrij eenvoudig oplossen door een afbeelding in het juiste formaat en bestandsformaat te uploaden in de hoofdfolder van het child theme. Doe dit als volgt:

1. Open een fotobewerkings- programma als Adobe Photoshop of het gratis fotobewerk programma GIMP.
2. Maak hier een nieuw bestand aan in de volgende afmetingen: 880 pixels breed en 660 pixels hoog.
3. Wat we zelf altijd doen voor onze klanten, is een printscreen maken van de homepage en deze te gebruiken als preview afbeelding.
4. Sla de preview op in het bestandstype PNG met de volgende bestandsnaam: ‘screenshot.png’.
5. Upload de afbeelding ‘screenshot.png’ naar de hoofdmap van jouw child theme.

Als je nu weer terug gaat naar de thema pagina in jouw WordPress dashboard zul je de preview moeten zien bij jouw child theme. Mocht dit niet het geval zijn, controleer dan even goed of je de juiste bestandsnaam en of bestandstype gebruikt.

PHP functies toevoegen aan jouw child theme

Het kan ook voorkomen dat je bepaalde wijzigingen wilt doorvoeren aan jouw template. Hiervoor zou je de PHP code bijvoorbeeld naar het bestand ‘functions.php’ kunnen doorvoeren van jouw parent theme. Echter zal na een update ook hier de code weer verdwijnen uit de ‘functions.php’. Het is daarom aan te raden hiervoor een ‘functions.php’ voor aan te maken in de hoofdfolder van jouw child theme. Zo blijven de wijzigingen na een thema update netjes bewaard.

Om jouw eigen functions.php in te laden zullen we deze eerst moeten aanmaken. Deze kan aangemaakt worden in de hoofdmap van jouw child theme. Dit gaat op dezelfde wijze als het aanmaken van het style.css bestand. Maak nu een nieuw bestand aan via FTP en noem deze ‘functions.php’. Voer vervolgens het onderstaande script in:

<?php
function my_function() {
    // Hier kun je jouw aangepaste functions plaatsen.
}
?>

Vervolgens kun je jouw aangepast functies toevoegen in de placeholder van bovenstaande script. Het bovenstaande script zal ervoor zorgen dat de huidige functions.php overschreven zal worden.

Child theme aanmaken via een plugin

Zoals eerder besproken is het ook mogelijk een child theme aan te maken door hiervoor een plugin te gebruiken. Dit zouden we enkel adviseren als het via de handmatige manier niet wil lukken. Voor het aanmaken van een child theme kun je de volgende plugins gebruiken:

• Child Theme Generator (Serafino Carriero)
• Child Theme Configurator (Lilaea Media)
• Child Theme Wizard (Jay Versluis)

Uiteraard zullen er nog veel meer plugins zijn die je kunnen helpen bij het maken van een child theme. Voor meer informatie over bovenstaande plugins kun je altijd contact opnemen met de ontwikkelaars van deze plugins.

Hulp nodig bij het aanmaken van jouw child theme?

We helpen je graag bij al je vragen omtrent het aanmaken van jouw eigen child theme. Loop je vast op een bepaalde stap, of werken bepaalde functies niet? Neem dan gerust contact met ons op, en we helpen je graag verder!

Vraag support