Child Themes

Laten we het eens hebben over Child Themes, of child themes. In het Nederlands is de beste vertaling die ik heb kunnen vinden subthema. Want waar hebben we het nou precies over? Een subthema is een verzameling bestanden, die inhaakt op het originele thema (hierna Hoofdthema), en die bestanden overschrijft.

Een Child Theme heeft een subthema, maar nog heel veel meer, waardoor je eigenlijk een complete website kunt importeren en kunt aanpassen naar je eigen smaak.

Subthema

Een standaard subthema bestaat uit de volgende bestanden in een .zip en wordt als thema binnengehaald in WordPress. Let wel op dat het Hoofdthema niet wordt verwijderd, want daarnaar wordt verwezen in het subthema.

  • style.css
  • functions.php
  • een screenshot, dimensies 600x400 pixels

Deze bestanden en een uitleg hoe je een subthema zelf maakt zijn duidelijk beschreven in de WordPress Codex, maar er zijn ook hulpmiddelen om snel een subthema in elkaar te zetten. Bijvoorbeeld bij Divi Space: Divi Space Child Theme Builder.

Stylesheet

Het stylesheet van het sub thema overschrijft het stylesheet van het Hoofd thema, in ons geval Divi, wanneer de code begint met:

/*

Theme Name: “DutchDivi”

Theme URI: http://www.hbwebdesign.nl/

Description: A Child Theme built for Divi

Author: HBwebdesign

Author URI: http://www.hbwebdesign.nl

Template: Divi

Version: 1

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

*/

Alle schuin geschreven tekst mag volledig naar eigen smaak worden ingevuld. Wat belangrijk is om het sub thema te laten werken is dat het Template juist is ingevuld en de naam van het gebruikte thema (in dit geval ‘Divi’) heeft. Dit zorgt er namelijk voor dat dit style sheet die van het Hoofd thema overschrijft. Na deze code kun je je eigen CSS toevoegen.

Voorbeeld: in Divi is Arial het standaard lettertype met een tekstgrootte van 14 en de kleur zwart. Als we in het stylesheet van het subthema de hieronder genoemde CSS code plaatsen, zal de Koptekst 1 het lettertype Montserrat met een lettergrootte van 1.3 em en de kleur #FCAB55 (oranje) als standaard in de customizer zetten, en voor je website worden gebruikt. Uiteraard totdat dat weer wordt overschreven in de modules van Divi.

h1 {

font-family: “Montserrat”;

font-size: 1.3em;

color: #FCAB55;

}

Functions.php

Functions.php in het child theme moet in elk geval de volgende code bevatten:

<?php

function elegant_enqueue_css() { wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ ); }

add_action( ‘wp_enqueue_scripts’, ‘elegant_enqueue_css’ );

?>

Nu moet je mij echt niet vragen wat al deze code betekent: ik ben zeker geen codeur. Ik weet alleen dat deze code ervoor zorgt dat de deze functions.php het stylesheet van het subthema laat prevaleren boven het stylesheet van die van het Hoofdthema.

Soms worden er nog stukjes code toegevoegd, die heel handig kunnen zijn:

include(‘editor/footer-editor.php’);

include(‘editor/login-editor.php’);

Door deze twee codes in functions.php op te nemen worden in de customizer van Divi twee extra mogelijkheden toegevoegd: edit footerlinks en edit login. Met edit footerlinks is het mogelijk om de standaard voettekst te personaliseren, en edit login helpt je om je login scherm te verfraaien. Niet noodzakelijk, wel erg handig.

Screenshot

Een screenshot zorgt ervoor dat bij je thema’s je subthema een meer gepersonaliseerd uiterlijk krijgt dan het standaard paarse vlak met de Divi D erin. Voor het subthema van het Child Theme Secula is bijvoorbeeld dit plaatje gebruikt:

Het maakt niet uit wat je daarop zet, als de dimensies maar 600x400 pixels zijn en het een .png of een .jpg is, en wordt meegenomen in de zip van het subthema.

Child Theme

Er bestaat nog een vorm van Child Themes, en dat schrijf ik even met hoofdletters. Deze tweede vorm is veel uitgebreider en is in feite een blauwdruk voor een volledige website. Stel dat je snel een website over graffiti verwijdering wilt maken. Je hebt geen tijd om zelf na te denken over zo’n website, je wilt alleen kleuren, tekst en afbeeldingen wijzigen en snel de site online plaatsen. Dan kun je ervoor kiezen om een Child Theme aan te schaffen (of in sommige gevallen gratis te downloaden).

In de .zip van een Divi Child Theme tref je minimaal de volgende bestanden aan:

  1. Alles wat je in een child theme vindt (als .zip)
  2. Thema Opties.json – een export van de thema opties van Divi met alle aanpassingen die daarin zijn gemaakt, zoals bijvoorbeeld het kleurenpallet.
  3. Customizer Settings.json – een export van de customizer instellingen van WordPress/Divi, met alle stijlen die daarin zijn aangepast.
  4. Demo Content.xml: via Dashboard -> Extra -> Exporteren kun je de volledige inhoud van je website in een .xml bestand zetten en op een andere site importeren. Hierin zitten (naar keuze) alle media, pagina’s, berichten, etc.
  5. Instructies – hoe gebruik je het Child Theme, wat heb je nodig, welke stappen moet je nemen om zo snel mogelijk je website online te zetten zoals bedoeld.en optioneel:
  6. Bloom settings (.json) – Bloom is een gratis email optin plugin van Elegant Themes
  7. Layouts (.json), hierin zitten de layouts van het originele Child Theme en kunnen worden hergebruikt.
  8. Een extra kopie van het CSS bestand, waar je altijd naar kunt teruggrijpen als je de originele code hebt aangepast.

In onze winkel vindt je verschillende Child Themes, die door DutchDivi zorgvuldig zijn samengesteld. Een website met Lorem Ipsum tekst, demo afbeeldingen en een uitgebreide instructie, en zodanig ingepakt dat deze direct op een schone WordPress installatie met de laatste versie van Divi kan worden geïmporteerd. In de meeste gevallen staat je website dan snel online.

DutchDivi

Vaak, en zeker in de Facebookgroep van DutchDivi, zijn er discussies over het gebruik van subthema’s. Eén van de voornaamste functies van een subthema is ervoor te zorgen dat bij updates van het Hoofdthema (Divi zelf dus) geen CSS code verloren gaat. Omdat we tegenwoordig de eigen CSS-code ook kwijt kunnen in de Extra CSS tab van de customizer, valt die functie weg omdat die niet wordt overgeschreven bij een update. Echter, wanneer je buiten de functions.php nog andere .php bestanden hebt aangepast (zoals de single.php voor de blogberichten, of een zelfgemaakte 404 pagina), is het gebruik van een subthema zeker aan te raden.

Op de website van Elegant Marketplace kun je zelf een subthema genereren, en uploaden zoals je dat met elk ander thema zou doen. Zo’n subthema grijpt terug naar je Hoofdthema, dus in dit geval mag je Divi niet verwijderen en moet je Divi gewoon updaten als daarom wordt gevraagd.

Als je niet zelf een subthema in elkaar wilt zetten, dan is de plugin van Orbisius een goede keuze. Deze helpt je om automatisch een subthema te genereren binnen WordPress.

Mocht je een ander thema willen gebruiken, dan werkt zo’n standaard subthema (en de Orbesius plugin) ook uitstekend. Vergeet dan niet om bij Template het juiste thema in te vullen.

Succes met je Divi child theme, en schroom niet om je vragen en/of opmerkingen hieronder in de reacties te plaatsen.