Het begin van je WordPress thema

Door Jasper Denkers van Developtheweb.nl
In het tweede deel van de minicursus waarin je WordPress thema’s leert maken, gaan we daadwerkelijk beginnen met het maken van een thema. We gaan hiervoor de html opsplitsen. Maar voordat we dat gaan doen, gaan we eerst een map aanmaken waarin we het thema gaan plaatsen.

Een map voor het thema

Bij het maken van een WordPress thema heb je een WordPress website nodig waarop je het thema kunt testen. Om een thema aan te maken maak je eerst een nieuwe map aan in de themes map van WordPress. Geef deze map de naam die je het thema wilt geven.

naam van de map

In bovenstaande afbeelding is dit gedaan in Filezilla. De map heeft de naam van het thema gekregen: voorbeeldthema.

Open nu de map en voeg er twee bestanden toe: style.css en index.php. Dit zijn de twee bestanden die minimaal nodig zijn om een thema te maken.

index en style in map plaatsen

Style.css

Open nu het stijlblad, style.css. De eerst regels van het stijlblad moeten informatie over het thema bevatten. Dit doe je op de volgende manier:

/*
Theme Name: Voorbeeld Thema
Theme URI: http://www.websitevanthema.nl
Description: Beschrijving van het thema.
Author: Maker van het thema
Author URI: http://www.websitevanmaker.nl
Version: 1.0
Tags: tags, waarmee, het, thema, gevonden, kan, worden

License: Soort licentie
License URI: URL waar informatie over de licentie gevonden kan worden

Eventuele andere opmerkingen die niet worden weergegeven.
*/

De gegevens die je hier invult zul je terugzien in het thema overzicht in WordPress onder het menu-item Appearance. Deze informatie wordt ook weergegeven in de zoekresultaten van WordPress als je het thema instuurt.

Voeg naast de bovenstaande gegevens ook de CSS van de voorbeeldpagina toe. We laten de HTML nu nog even voor wat het is en gaan meteen het resultaat bekijken.

WordPress thema testen

Open nu in het WordPress menu het item Appearance. Zoals je ziet vind je hier nu je thema terug, met de informatie die je hebt opgegeven in style.css.

voorbeeld thema in WordPress

Activeer het thema. Als dit goed gaat, zul je zien dat wanneer je een onderdeel van je website opent een witte pagina wordt weergegeven. Dit is logisch, index.php wordt gebruikt voor de weergave en hier staat nog niks in. Daar gaan we nu verandering in brengen.

De Index.php

Zoals eerder al besproken, is index.php het meest algemene bestand om pagina’s weer te geven in WordPress. We gaan nu de volledige HTML code van de voorbeeldpagina naar index.php kopiëren. Sla index.php op en bekijk het resultaat. Je zult zien dat er nu wél iets wordt weergegeven, alleen nog zonder de inhoud van je website en zónder opmaak.

De link naar het stijlblad

Het stijlblad bevindt zich in de map van het thema. WordPress heeft een speciale PHP functie waarmee je hier naar kunt verwijzen. Vervang de regel waarin je het stijlblad toevoegt:

Naar de volgende regel:

Er wordt gebruik gemaakt van de ‘bloginfo()’ functie van WordPress. Met deze functie kun je verschillende informatie over je thema opvragen. Hier wordt hij gebruikt om de locatie van het stylesheet op te vragen.

Sla index.php opnieuw op en bekijk het resultaat. Zoals je ziet wordt het stijlblad nu wel gevonden en wordt de pagina inclusief de CSS opmaak weergegeven.

Omdat je later meerder themabestanden hebt waar sommige delen code, bijvoorbeeld van een header, terugkomen, gaan we de code in aparte bestanden opsplitsen en opslaan.

Header.php, footer.php en sidebar.php

In WordPress is het gebruikelijk om de bestanden header.php, footer.php en sidebar.php te gebruiken. Deze worden respectievelijk voor de header, het deel van de pagina voor de inhoud, voor de footer, het deel na de inhoud van een pagina en voor de sidebar gebruikt.

Maak nu in de map van het thema de drie bestanden header.php, footer.php en sidebar.php aan.

footer en header invoegen

De volgende stap is het knippen van de stukken code naar de drie bestanden. Het deel wat in header.php moet komen is alles vanaf het begin van de HTML code tot aan waar de inhoud van een pagina begint.

Voor de voorbeeld pagina die we gebruiken is dat dus het volgende stuk code:




	WordPress Voorbeeldthema
	




Entry in WordPress

In WordPress is het gebruikelijk de inhoud van een pagina, die per pagina verschillend is, de naam ‘entry’ te geven. Zo noemen we bijvoorbeeld een pagina of artikel. De div met id ‘entry’ plaatsen we dus niet in de header, omdat deze bij de inhoud hoort.

Knip het bovenstaande stuk code uit index.php en plaats het in header.php.

Hetzelfde doen we voor sidebar.php en footer.php.

Sidebar.php krijgt de volgende code:

		

En footer.php de rest van de code, na de afsluitende tag van de div met id ‘entry’: