Wil je een WordPress thema aanpassen, dan is een WordPress child theme, een kindthema, de juiste weg. Een kindthema erft de eigenschappen van een ander thema; het ouderthema.

Met behulp van een kindthema kun je niet alleen veranderingen aanbrengen in het uiterlijk van het thema, maar ook functionaliteit toevoegen. In dit bericht wil ik je graag op weg helpen met het creëren van een kindthema.

Maar waarom zou je eigenlijk een kindthema gebruiken, terwijl je eventuele veranderingen ook kunt aanbrengen in het oorspronkelijke thema?

Nou, net als WordPress krijgen ook thema’s wel eens een update. Op het moment dat een thema wordt geupdate, ben je de veranderingen die je hebt aangebrachte kwijt. Dat wil je denk ik voorkomen en dat kan eenvoudig met een kindthema.

Een platte teksteditor

We gaan zo meteen de style.css bewerken. Daarvoor heb je een platte teksteditor nodig. Gebruik in elk geval geen tekstverwerker zoals Microsoft Word of LibreOffice Writer.

Omdat ik zelf met zowel Windows als Linux werk, gebruik ik sinds enige tijd – met grote tevredenheid – SublimeText. SublimeText is verkrijgbaar voor Windows, Linux en Mac. Helaas is deze editor niet gratis, hij kost maar liefst USD 70. Niet goedkoop, ik weet het. Je kunt hem wel gratis downloaden en om te testen.

Voor incidenteel gebruik zijn er gelukkig gratis alternatieven. Een goede en gratis editor voor Windows is Notepad++. In het geval van Linux kun je gedit of Kate gebruiken, net naar gelang welke Linux desktop je voorkeur heeft.

Windows kladblok is ook een platte tekst editor. Kladblok heeft echter de neiging om tijdens het opslaan .txt toe te voegen aan de bestandsnaam. Je kunt dit voorkomen door het toepassen van aanhalingstekens bij het opslaan, dus “style.css” – inclusief de aanhalingstekens dus.

Als het echter even kan gebruik dan liever niet Kladblok, maar Notepad++. Een bijkomend voordeel van Notepad++ is de zogenaamde syntax highlighting. Hierbij krijgen HTML-elementen, CSS-eigenschappen en waarden en dergelijke een bepaalde kleur. Dit vergroot de leesbaarheid en helpt over het algemeen ook bij het signaleren van fouten.

Een kindthema maken

Het creëren van een kindthema, in zijn meest elementaire vorm, is kinderspel. Als voorbeeld nemen we het huidige standaardthema van WordPress; TwenteyThirteen. Dit thema bevindt zich in de directory twentythirteen in de folder /wp-content/themes van je WordPress installatie. Dat wordt ons ouderthema.

Allereerst maak je een nieuwe directory aan in dezelfde /wp-content/themes folder. Die nieuwe map noem je twentythirteen-child. In deze map wordt ons kindthema gehuisvest. De toevoeging -child is niet verplicht, maar wel goed gebruik. Je kunt de map van het kindthema in principe elke gewenste naam geven, zolang deze maar uniek is en geen spaties bevat. Gebruik dus letters, cijfers en de tekens _ (underscore) en – (koppel-/minteken).

Vervolgens kopieer je vanuit de folder van het ouderthema de style.css en de screenshot.png. Let op dat je deze niet sleept, maar kopieert; selecteer beide bestanden en gebruik de sneltoets Ctrl+C.Eventueel kun je na de selectie ook rechts klikken in de map van het ouderthema. In het menu dat vervolgens verschijnt kies je kopieer of copy.

Nu ga je naar de folder van het kindthema, in ons voorbeeld twentythirteen-child. Daar aangekomen gebruik je de sneltoets Ctrl+V. Rechts klikken en plakken of paste kiezen kan natuurlijk ook.

Het enige bestand dat aanwezig moet zijn in de folder van het kindthema is de style.css. Een screenshot.png geeft het kind echter ook een smoel op de pagina Weergave >> Thema’s van WordPress. Je mag de screenshot.png van het kindthema ook vervangen door een eigen creatie. Voor het beste resultaat kies je een afmeting van 300 x 225 of 600 x 450 pixels.

De style.css van ons kindthema is nu een exacte kopie van het ouderthema en daarmee nog geen volwaardig kindthema. Daarvoor openen we de style.css met de platte teksteditor van jouw keuze. Afgezien van de eerste “/*” en “Theme Name: Twenty Thirteen”, haal je alles weg. Vervolgens zet je ” Child” achter de naam van het thema.

Je style.css ziet er nu dus als volgt uit:

/*

Theme Name:     Twenty Thirteen Child

Nu moeten we nog een relatie leggen met het ouderthema. Daarvoor voegen we “Template: twentythirteen” toe. De template verwijst naar de foldernaam van het ouderthema. Tenslotte voegen we nog een “*/” toe. Ons style.css ziet er nu zo uit:

/*

Theme Name:     Twenty Thirteen Child
Template:       twentythirteen

*/

In principe is alles wat er tussen de tekenreeksen /* en */ staat commentaar, bedoeld voor ons mensen. Het is een goed gebruik om ook je eigen werk in een style.css op deze wijze te documenteren. Niet alleen voor anderen, maar ook voor jezelf.

Nippen aan de CSS beker

Ons kindthema heeft nu een probleem. Hoewel het verwijst naar het ouderthema, maken we nog geen gebruik van de stijlen van het ouderthema. Opdat we niet alle CSS zelf moeten verzinnen kunnen we de CSS regels van de style.css van onze template importeren. Dat doen we met de regel:

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

Deze regel voegen we toe onder de */. Zet je deze regel namelijk bij het commentaar, dan zal de browser deze negeren. @import spreekt waarschijnlijk voor zich, dit is het importcommando. Met url geven we aan hoe de informatie tussen de ronde haken moet worden geïnterpreteerd.

Met de .. geven we aan dat we in de folderstructuur op de webserver een stapje omhoog gaan. Vervolgens willen we de style.css gebruiken in de folder twentythirteen – de template folder, de map van het ouderthema.

Onze style.css omvat nu:

/*

Theme Name:     Twenty Thirteen Child
Template:       twentythirteen

*/

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

We hebben nu een kind dat zich exact hetzelfde gedraagt als de ouder. We kunnen nu alle gewenste veranderingen in het ontwerp van het kindthema aanbrengen zonder dat dit effect heeft op dat ouderthema. Dat betekent ook dat bij een eventuele update van het ouderthema onze wijzigingen en toevoegen veilig zijn en behouden blijven.

In het ouderthema hebben de koppen van berichten (.entry-title a) een zwarte kleur met als hexcode #141412. Als we met de cursor over de titel van een bericht gaan, “hoveren” zoals ze dat noemen, dan krijgt die (.entry-title a:hover) een oranjekleur. Dat is wel mooi, maar deze worden ook onderstreept getoond. Dat willen we niet. Wat we dan moeten doen is een regel toevoegen, namelijk “text-decoration: none”.

Zet de volgende CSS regel onder het @import-commando:

.entry-title a {
    text-decoration: none !important;
}

De toevoeging !important is wel eens nodig om CSS regels in het ouderthema te overheersen.

Stel nu dat we diezelfde titels in een ander font willen tonen. In Droid Sans bijvoorbeeld. Daarvoor moeten we twee stappen ondernemen. Eerst importeren we het Google Webfont Droid Sans met het commando

@import url(http://fonts.googleapis.com/css?family=Droid+Sans);

Je vindt deze instructie als je op de pagina van Droid Sans rechts bovenaan op de link Open Droid Sans in Google Fonts » klikt. Kijk vervolgens onder het tabblad @import. De import

De tweede en laatste stap is aangeven dat we de berichttitel in Droid Sans willen zien. Daarvoor voegen we de volgende regel toe:

font-family: 'Droid Sans', sans-serif;

Het stijlblad van ons kindthema ziet er nu als volgt uit:

/*

Theme Name:     Twenty Thirteen Child
Template:       twentythirteen

*/

@import url("../twentythirteen/style.css");
@import url(http://fonts.googleapis.com/css?family=Droid+Sans);

.entry-title a {
    font-family: 'Droid Sans', sans-serif;
    text-decoration: none !important;
}

De .entry-tile a wordt de selector genoemd. Het verwijst naar het stijlelement dat we willen adresseren.

Font-family en text-decoration zijn properties, eigenschappen van die selector.

‘Droid Sans’, sans-serif; en none !important zijn de values, de waarden van de achtereenvolgende properties.

Een combinatie van property en value wordt een declaration, een verklaring genoemd.

De selector vormt samen met zijn declaraties een CSS rule, een CSS regel. Je mag als je dat wil alles achter elkaar zetten.

De CSS regels in een style.css worden van boven naar beneden uitgevoerd. Let daar op als je stijlblad langer begint te worden.

Een iets uitgebreidere introductie in de wereld van CSS vind je in mijn (Engelstalige) bericht WordPress Frameworks, Stylesheets (CSS) and Required Coding Skills.

De eerste stap van een reis?

We laten de CSS voor wat het is en keren terug naar het kindthema.

Aangezien het ouderthema en het kindthema elk hun eigen directory hebben en elk een eigen style.css, worden deze door WordPress herkent als twee verschillende thema’s. Als de geïnstalleerde thema’s bekijkt via Weergave >> Thema’s, dan moet je dan ook zowel het ouder als het kindthema kunnen zien.

Zie ja alleen de ouder, dan is er iets mis met de verwijzing naar de ‘Template’ in de kop van de style.css. Meestal wijkt de naam van het ouderthema dan iets af van de template-naam in de kop van de style.css van het kindthema.

Ontbreken beide, dan is waarschijnlijk het ouderthema nog niet of niet meer geïnstalleerd.

Zie je zowel het ouder- als het kindthema, maar lijkt de opmaak van het kindthema in het geheel niet op die van de ouder – terwijl je nog niets hebt toegevoegd aan de style.css van het kindthema – dan is er iets verkeerd (gespeld) in de @import-regel.

Zodra je het kindthema activeert, wordt automatisch de style.css van het kindthema gebruikt. Zo eenvoudig is dat.

Dus nog even samenvattend:

1. je activeert het kindthema – niet het ouderthema!
2. het kindthema maakt gebruik van de php (template) bestanden van de ouder – dankzij “Template: x” in de kop van de style.css
3. het kindthema importeert de opmaak (de style.css) van de ouder via de @import regel
4. eventuele afwijkende styling voeg je toe aan het de style.css van het kindthema

Dat betekent dus als je verder niets toevoegt aan de style.css van het kindthema, dan lijkt het kind sprekend op zijn ouder.

In dit bericht hebben we slechts een tipje van de sluier opgelicht. WordPress kindthema’s is een krachtig concept waar veel meer mee mogelijk is dan het aanpassen van kleurtjes en fonts.

Je kunt ook de logica wijzigingen door toevoegingen aan de functions.php of paginasjablonen naar wens aanpassen. Dat zijn echter ook aspecten van kindthema’s die enige kennis van de programmeertaal PHP vereisen. Of jij je die kennis wilt eigen maken is een persoonlijke keuze, het is niet echt nodig.

Enige kennis van CSS kan ik echter warm aanbevelen. Je hoeft geen auto te kunnen repareren om er in te kunnen rijden. Het kan echter wel eens handig zijn als je een lamp of een band kunt vervangen. Wil je zelfs dat niet, dan is de ANWB gelukkig nooit verder weg dan een telefoontje.