arrow_drop_up arrow_drop_down
5 mei 2014 

Maak Je Eigen WordPress Thema - Deel 1

Je bent pas echt bekend met WordPress als je je eigen thema hebt ontwikkeld. Je leert op deze manier hoe WordPress in elkaar steekt en je met behulp van loops, templates en een functions file een werkend thema maakt. Vandaag gaan we kijken welke stappen je daar allemaal voor moet nemen, welke benodigde voorkennis en middelen je moet hebben en gaan we in dit eerste deel alvast kijken naar stap 1 tot en met 2.

Maak je eigen WordPress thema – Stappen die we doorlopen

  1. Theme folder & debug modus
  2. Benodigde templates & bestanden (style.css, index.php, header.php, footer.php functions.php)
  3. Enqueue style & menu support (functions.php)
  4. Header & navigatie (header.php)
  5. De loop (index.php)
  6. Pagina’s (page.php, front-page.php)
  7. Pagina templates
  8. Posts (archive.php, single.php)
  9. Widgets (sidebar.php, functions.php)

Benodigde voorkennis en middelen

Een WordPress Thema maken vereist enige voorkennis. In dit artikel ga ik ervan uit dat je op de volgende vlakken je weg weet te vinden. Is dit niet het geval, ga dit dan eerst opschroeven:

  • Basiskennis in het gebruik van WordPress

Je moet weten hoe je WordPress installeert, thema’s en plugins installeert, pagina’s en berichten aanmaakt, menu’s en widgets beheert en hoe je de instellingen veranderd.

  • Basiskennis PHP

Er wordt niet van je verwacht dat je een hele applicatie kan maken met PHP. Het is wel belangrijk dat je weet hoe je PHP moet gebruiken. Ook kennis van het gebruik van basisfuncties van PHP zoals het maken en gebruiken van variabelen en het weergeven van HTML wordt sterk aangeraden.

  • Basiskennis HTML/CSS

In dit artikel beginnen we het maken van het thema met een HTML/CSS website. Als dit in het begin al vragen oproept is het verstandig om eerst je kennis over HTML / CSS te verbeteren voordat je hieraan begint.

  • Je eigen HTML/CSS website

Om te leren hoe je je eigen WordPress Thema maakt, kun je in deze les gebruik maken van een eigen HTML/CSS ontwerp dat je hebt. Je kunt ook gebruik maken van het ontwerp dat ik in deze les zal gaan gebruiken, deze kun je hier downloaden, inclusief alle final bestanden van ons thema:

https://github.com/itstartswithcoffee/Maak-Je-Eigen-WordPress-Thema

In dit artikel zullen veel functies van WordPress gebruikt worden. Ik zal deze kort toelichten, voor een uitgebreidere uitleg kun je het beste kijken in de WordPress Codex (http://codex.wordpress.org/). Deze codex bevat alle functies die je tot je beschikking hebt binnen WordPress en is het zeker waard om een keer te bekijken.

Stap 1: Theme folder & Benodigde templates

Theme folder

Allereerst maken we een map aan waar je thema in komt. Hiervoor ga je naar je installatie van WordPress. Wanneer dit op een externe server is doe je dit via ftp. Als je bij de installatie map bent dan klik je op ‘wp-content’ en dan op ‘theme’. Maak nu een nieuwe map aan en geef deze de naam die jij wilt. In dit voorbeeld zullen we ‘demo-thema’ gebruiken.

Debug modus

Voordat we beginnen zetten we eerst de ‘debug modus’ aan. Dit is niet nodig om een thema te kunnen ontwikkelen maar maakt het wel makkelijker. Standaard onderdrukt WordPress de foutmeldingen die php geeft om zo de gebruiker niet tot last te zijn als er iets mis gaat. Jij als ontwikkelaar wilt deze foutmeldingen wel zien zodat je er iets aan kunt doen. Om de debug modus aan te zetten open je  wp-config.php in de installatie map van WordPress. Als je iets naar onderen scrollt zie je de code ‘define(‘WP_DEBUG’, false);’ verander dit naar ‘define(‘WP_DEBUG’, true);’. Sla het bestand op en de debug modus staat aan.

Stap 2: Benodigde templates & bestanden

Om een wordpress thema te laten werken zijn een paar bestanden benodigd.

style.css

Dit is een verplicht bestand. Zonder style.css zal je WordPress thema terugkomen in de lijst van beschadigde thema’s. Dit is omdat je style.css gebruikt om de informatie over het thema aan WordPress door te geven. Hierin staan de naam van je thema, de autheur, de omschrijving en nog een paar andere details. Het begin van style.css zal er als volgt uit moeten zien.

Maak je eigen wordpress thema - style

Het spreekt aardig voor zich maar om het even kort uit te leggen:

  • Theme Name: De naam die in de lijst van beschikbare thema’s zal verschijnen. Zorg dat deze altijd uniek is om conflicten te voorkomen.
  • Author: De naam van de auteur van het thema. Zo kan iedereen zien wie het thema gemaakt heeft.
  • Author URI: De website van de auteur. Op deze manier kun je een website meegeven waar de mensen de auteur kunnen vinden.

Voor een gedetailleerde uitleg over style.css en alle informatie die je kunt toevoegen kijk je in de codex bij http://codex.wordpress.org/Theme_Development#Theme_Stylesheet

index.php

Ook dit is een verplicht bestand. Zonder index.php zal je thema ook als beschadigd worden gezien. Dit komt door de hoe wordpress de website weergeeft. WordPress gebruikt templates om de website weer te geven, index.php is je standaard template template waar wordpress op terug valt als er geen ander bruikbare template is gevonden. WordPress wil geen risico nemen dat het nergens op terug kan vallen dus als dit bestand niet bestaat, is het thema beschadigd.

Laten we index.php even wat inhoud van de HTML / CSS website geven. Omdat de kans groot is dat index.php voor een collectie van berichten, of een archief, wordt gebruikt kunnen we het beste de inhoud van blog.html gebruiken. Deze is daar immers voor gemaakt. Kopieer de hele inhoud van blog.html naar index.php. Als je index.php hebt opgeslagen in je wp-admin gedeelte naar de beschikbare thema’s zie je dat je thema er al bij staat. Klik op activeren en je hebt je website gebruikt nu jouw eigen wordpress thema.

Als je je website nu bekijkt zul je zien dat de site er niet helemaal uit ziet zoals de bedoeling is. Dit komt omdat de css, en eventueel javascript, bestanden niet meer werken. Dit komt doordat wordpress niet kan werken met relatieve links. Om te zorgen dat deze op een goede manier werken maken we functions.php.

functions.php

Dit is het hart van de functionaliteit van je thema. Hoewel functions.php niet verplicht is, is het wel zeer verstandig om deze wel te hebben. Zonder functions.php is het niet mogelijk om gebruik te maken widgets en menu’s. Dit is namenlijk het enige bestand in je thema dat vrijwel aan het begin wordt ingeladen. De rest van de bestanden wordt pas gebruikt als alle data is opgehaald en de inhoud wordt weergegeven. Meer informatie over functions.php vind je hier https://codex.wordpress.org/Functions_File_Explained.

Zoals gezegd werkt de css van je website nog niet. Daar gaan we nu wat aan doen. Maak functions.php aan in de map van je thema en open het bestand. Her eerste wat er in het bestand moet komen is de php-tag ‘<?php’ . Zorg ervoor dat er geen spatie of enter voor staat, dit zorgt ervoor dat de site niet werkt. Het beste kun je de sluitende php-tag weglaten om ervoor te zorgen dat er ook geen spatie of enter aan het einde komt, deze heeft hetzelfde effect.

Nu gaan we de css voor je site inladen. Voeg een map ‘css’ toe aan je thema en zorg ervoor dat je de css voor je website daarin hebt staan. Voeg dan onderstaande code toe aan functions.php

Maak je eigen wordpress thema - functions

Dit is wat deze code doet:

  • add_action zorgt ervoor dat op het juiste moment de meegegeven functie wordt uitgevoerd. In dit geval wanneer wordpress de scripts in gaat laden.
  • wp_enqueue_style zorgt ervoor dat het css-bestand dat meegegeven wordt in de tweede parameter wordt ingeladen. De eerste parameter is de id die er bij hoort. Zorg ervoor dat deze uniek is.
  • get_template_directory_uri haalt de absolute url voor jou thema op. Zoals gezegd werkt wordpress niet mer relatieve urls. Het is dus belangrijk om deze functie te gebruiken.

Om ervoor te zorgen dat wordpress weet waar in de template hij de bestanden in moet laden moet je nog 1 ding doen. Ga naar index.php en verwijder de link-tags die de stylsheets inladen tussen de head-tags. Voeg op deze plaats de code ‘<?php wp_head(); ?> toe.

Maak je eigen wordpress thema - wp-head

Hetzelfde doe je onderin, vlak boven het sluiten van de body. Haal het inladen van de scripts weg en zet daar ‘<?php wp_footer(); ?>’ neer. Nu heeft  wordpress een plek boven en onderin om zowel css als javascript files in te laden. Ga maar naar je website en als je alles goed hebt gedaan zul je zien dat de css nu ook werkt. Voor meer informatie over wp_head, wp_footer, add_action en wp_enqueue_style kijk je op:

https://codex.wordpress.org/Function_Reference/wp_head
https://codex.wordpress.org/Function_Reference/wp_footer
https://codex.wordpress.org/Function_Reference/add_action
https://codex.wordpress.org/Function_Reference/wp_enqueue_style

Conclusie

We hebben nu je eerste pagina omgezet naar  een thema voor wordpress en ervoor gezorgd dat alle css en javascript weer werkt. Zoals je misschien al wel in de gaten had is het nog totaal niet beheerbaar. De inhoud zit nog in de HTML-code in plaats van de database van wordpress. Hier gaan we in deel 2 mee aan de slag. Dan zullen we onder andere kijken naar ‘de loop’, widgets en meer.  In deel 3 beginnen we met de dynamische website titel, sidebar en pagina template.

Om alvast wat inzicht te krijgen kun je kijken op

https://codex.wordpress.org/The_Loop
http://codex.wordpress.org/Widgetizing_Themes

Over de schrijver
Ik ben Peter Padberg en ik ben eigenaar en webdeveloper bij IT Starts With Coffee, een jong en dynamisch bedrijf. Bij ons begint het met een kop koffie en eindigt het altijd met een website met karakter. Dàt is ons motto. We leveren producten die er niet alleen mooi uitzien, maar die ook functioneel en makkelijk te beheren zijn. Daarvoor gebruiken we WordPress en maken we onze eigen premium thema's en plugins. Naast het ontwikkelen van WordPress thema's en plugins vind ik het leuk om nieuwe dingen uit te zoeken en nieuwe kennis op te doen over PHP, Javascript en jQuery.
Mike Nuijs
Door

Mike Nuijs

op 5 May 2014

Hi, Interessant blog, de moeite waard om te proberen zelf een WordPress thema maken! Groet Mike

Joep Franssen
Door

Joep Franssen

op 5 June 2014

Handige uitleg: een eigen thema lijkt me ook leuk, maar mijn php-kennis is beperkt. Welk boek zou je me op dit vlak aanraden om de basis te leren?

Nukeface
Door

Nukeface

op 25 June 2014

PHP6 Professional van Wrox, verkrijgbaar bij bookdepository.co.uk, bol.com of te downloaden ;) Goed boek om te lezen en mee te werken met de voorbeelden. De code is apart te downloaden (via wrox.com) voor het geval je iets niet werkend krijgt. gl hf

Eric
Door

Eric

op 20 February 2015

Zeer goed geschreven bericht. Zelfs is er veel voor website builder beschikbaar. Alle website bouwers hebben uitzonderlijke en fenomenale aspecten die maakte het zeer moeilijk voor mij om te kiezen welke het beste is onder al deze grote opties om te ontwerpen thema, goed, ik heb al gedownload een generator van het thema TemplateToaster. Het heeft ook opmerkelijke eigenschappen.

Javier Salas
Door

Javier Salas

op 11 July 2016

Ontwerp Templates en Themes In Slechts Enkele Minuten Zonder enige technische kennis met behulp van @TemplateToaster

Reactie plaatsen