Dit e-boek is voorzien van een verborgen, persoonlijk watermerk.
Het verspreiden of openbaar maken van dit e-boek is niet toegestaan.

This e-book contains a hidden and personal watermark. Distribution is prohibited.

Inhoud

Voorwoord

1 Inleiding

Hoe gebruik je dit boek?

Kennis vooraf

WordPress-themes, een inleiding

Wat heb je nodig?

Ontwerpsoftware

Een code-editor

Ftp-client

Een (lokale) testomgeving

Browsers

De opbouw van een WordPress-theme

2 Een WordPress-theme ontwerpen

Webdesign

Een blog-homepage-ontwerp maken in Photoshop

Dropshadow

Inner Shadow

Gradient Overlay

De vervolgpagina’s ontwerpen

3 Je ontwerp omzetten naar html-code

De lay-out indelen

De header vormgeven

Het menu vormgeven

Het content-deel

De loop vormgeven

Niet-standaard lettertypes gebruiken

De sidebar vormgeven

De footer opmaken

4 Van html naar WordPress

Voorbereiden

Waaruit bestaat een WordPress-theme?

De basis

Pagina’s

Overige bestanden

WordPress-terminologie

Widgets

Comments of reacties

Trackbacks en pingbacks

Gravatars

Post thumbnail

Custom post type

Options page

De homepage coderen met php

De header.php

De WordPress-loop

Paginanummering toevoegen

De sidebar.php

Footer.php

De overige pagina’s omzetten in php-code

Single.php

Page.php

Comments.php

5 Meer geavanceerde technieken

Search.php en searchform.php

Google Custom Search Engine

Archives.php

Een theme vertalen

Maak een .pot-bestand

Een pagina met theme opties toevoegen

Custom post types en custom taxonomies

Hoe maak je een child theme?

Je theme distribueren

Je theme testen

Maak je theme volledig

Test je theme met een plugin

6 Verder vooruit als WordPress-ontwikkelaar?

Frameworks

1 Thematic

2 Gantry

3 Thesis

4 Genesis

5 Whiteboard

Blanco themes

Responsive webdesign

Afsluiting

Voorwoord

Dit boek moest er komen. Na het succes van Kickstart WordPress en de daarop volgende edities kreeg ik steeds vaker verzoeken van lezers om toch vooral dieper in te gaan op het maken van WordPress-themes. Dat boek ligt nu voor je. Klaar om de techniek in te duiken? Laat je niet afschrikken; het maken van een eigen WordPress-theme is niet ingewikkeld, je hebt echter wel bepaalde basisvaardigheden nodig, maar daarover verderop in dit boek meer.

Even een stapje terug. Een aantal jaar geleden was WordPress vooral bekend als platform om mee te bloggen. En daarin blinkt het nog steeds uit. Maar er is inmiddels zo veel meer mogelijk. Sinds versie 3 van WordPress is het langzamerhand een volwaardig CMS geworden. En in de laatste versies zijn de mogelijkheden voor ontwikkelaars alleen maar toegenomen. Koop een willekeurig commercieel WordPress-theme en het zit boordevol allerlei fantastische functies. Dat wil je zelf ook kunnen doen? Natuurlijk, dat kan, maar bedenk je dat in dat soort themes vele technieken zoals html5, css3, jQuery, php en natuurlijk kennis van WordPress en WordPress-themes samenkomen. In dit boek zullen al die technieken ook aan bod komen. Maar ik kan je niet beloven dat je daarna een expert bent en als volwaardig webprogrammeur je carrière kunt voortzetten. Wil je dat bereiken, dan komt er meer bij kijken, waarbij inzet en doorzettingsvermogen je belangrijkste eigenschappen zullen zijn.

Dit boek leert je niet hoe WordPress werkt. Ik leer je niet hoe je WordPress installeert, hoe je het inricht en hoe je artikelen en pagina’s aan je website toevoegt. Dat alles wordt behandeld in Kickstart WordPress. En ik weet dat veel WordPress-gebruikers staan te popelen om direct aan de slag te gaan met themes. Ik deed dat vroeger ook, want ik zag direct zaken aan mijn theme die ik wilde aanpassen. Maar zorg er wel eerst voor dat je de basis onder de knie hebt! Werk je al een tijdje met WordPress en heb je al eens naar de code van je theme gekeken maar durf je er niet aan te sleutelen of weet je niet waar je moet beginnen? Dan is dit boek voor jou geschreven.

Veel lees- en programmeerplezier gewenst!

Robbert Ravensbergen

1 Inleiding

Hoe gebruik je dit boek?

Dit boek is grofweg opgedeeld in twee secties. In het eerste deel beginnen we met het ontwerpen van een eigen WordPress-theme. Dat doen we in Photoshop. De nadruk ligt op het maken van een ontwerp. In het tweede deel van het boek gaan we het ontwerp omzetten naar een WordPress-theme. In dat gedeelte van het boek zijn we bezig met het schrijven van code.

Ben je alleen geïnteresseerd in het aanpassen van bestaande themes, dan kun je je voornamelijk richten op het tweede deel van dit boek. Wil je het hele proces leren kennen, dus zelf themes leren ontwerpen en bouwen, dan begin je gewoon vooraan. Wil je het boek alleen als naslagwerk gebruiken? Benut dan de inhoudsopgave of de index achter in het boek.

Je kunt tijdens het lezen de volgende pictogrammen tegenkomen:

Achtergrondinformatie. Interessante aanvullingen en wetenswaardigheden over WordPress, webdesign en themes.

Belangrijke informatie die je niet mag missen

Programmacode wordt in een ander lettertype weergegeven dan reguliere tekst:

Programmacode herken je aan deze stijl.

Hoewel we zo zorgvuldig mogelijk zijn geweest met het samenstellen van de codevoorbeelden, kunnen we niet garanderen dat deze volledig foutloos zijn. Mochten er correcties nodig zijn, dan zullen deze gepubliceerd worden op mijn eigen website. Bezoek www.robbertoverwordpress.nl/boeken voor meer informatie.

Kennis vooraf

Zoals ik in het voorwoord al schreef, is het echt noodzakelijk dat je al enige tijd met WordPress hebt gewerkt. Wacht als beginner nog even met dit boek, start ermee als je zelf het gevoel hebt dat je toe bent aan de volgende stap. Heb je al enige kennis van html, css en php, dan is dat mooi meegenomen. Html- en css-kennis zijn daarbij belangrijker dan kennis van php. Heb je deze basiskennis niet, dan is het geen gek idee om je eerst verder te verdiepen in deze onderwerpen. De uitgave HTML en CSS, de basis, 3e editie van Andree Hollander is dan bijvoorbeeld een goed startpunt.

Ervaren ontwikkelaars die al veel van php, html en css weten kunnen sneller door dit boek heen. Voor hen is het vooral interessant om de specifieke eigenschappen van een WordPress-theme te leren kennen.

WordPress.com-gebruiker?
Wellicht ten overvloede, maar dit boek is alleen geschikt voor gebruikers van een eigen WordPress installatie, die de software hebben gedownload van WordPress.org en hun website bij een provider hosten. Gebruik je een blog op WordPress.com, dan kun je alleen (tegen betaling) css-aanpassingen doen aan je theme. Het zelf schrijven en activeren van een theme is bij WordPress.com niet mogelijk.

WordPress-themes, een inleiding

WordPress werkt met themes, niet met templates, een term die we in sommige andere systemen tegenkomen. In feite wordt hetzelfde bedoeld; een WordPress-theme zorgt voor het uiterlijk van je WordPress-website. Naast het bepalen van het uiterlijk kan een theme ook invloed hebben op de functionaliteit. Uitgebreide WordPress-themes maken handig gebruik van de functionaliteit die WordPress aan boord heeft. Het theme bepaalt niet alleen de kleuren, lettertypes en grafische elementen die je website bevat, het bepaalt ook welke informatie er op welke plek precies wordt weergegeven. Een theme kan dus meer doen dan alleen de wijze waarop je website eruit ziet wijzigen.

Laten we iets verder gaan om dit beter uit te leggen. WordPress bestaat, zoals je zult weten, uit een ‘front-end’ en een ‘back-end’. De back-end van WordPress bestaat uit een MySQL-database met daarin een aantal tabellen, aangevuld met programmacode die je helpt om de inhoud van die tabellen op de juiste wijze te vullen. De database bevat onder andere de inhoud van de artikelen die je schrijft, verwijzingen naar afbeeldingen en instellingen van je WordPress-systeem. De front-end wordt daarentegen geheel door het theme bepaald. Het theme bepaalt welke informatie er vanuit de database getoond wordt en op welke wijze. Kortom, het theme bepaalt niet alleen het uiterlijk van je website, maar het bepaalt in hoge mate wat je website eigenlijk is. Dit wordt nog eens bevestigd door het voorbeeld in afbeelding 1.1. We zien twee maal dezelfde website, met exact dezelfde inhoud in de database, maar er worden andere gegevens getoond op de homepage.

afbeelding 1.1

Standaard-themes
WordPress wordt standaard al met enkele themes geleverd. Vanaf 2010 verschijnt er elk jaar een nieuw standaard-WordPress-theme, die als naam het jaar van uitgave krijgt. Op het moment van schrijven is het theme ‘Twenty Eleven’ nog het actuele theme, maar het zal op korte termijn opgevolgd worden door een nieuw theme: ‘Twenty Twelve’.

Wat heb je nodig?

Je wilt graag snel aan de slag? We gaan zo starten. Laten we wel eerst even kijken naar wat je precies nodig hebt om je eigen themes te maken of bestaande themes aan te passen. Je zult trouwens merken dat je, wanneer je eenmaal je eigen theme hebt gemaakt, je daarna minder moeite zult hebben met het aanpassen van bestaande themes. Maar wat heb je nodig voordat je kunt starten?

Ontwerpsoftware

Websites worden vaak in Photoshop ontworpen. Dat is dé standaard, maar ook een dure oplossing. Photoshop Elements werkt in veel gevallen ook en is veel voordeliger. Maar wie echt geld wil besparen, zou kunnen omzien naar Gimp (http://gimp.org), een gratis open source-oplossing geschikt voor zowel Windows, Mac als Linux. Naast Adobe Photoshop wordt ook vaak gebruikgemaakt van Adobe Illustrator, vooral voor afbeeldingen die goed schaalbaar moeten zijn, zoals een logo of iconen.

Een code-editor

Je hebt een goede code-editor nodig om de programmacode voor je theme mee te schrijven. Ook hier is een kostbare Adobe-variant voor beschikbaar: Dreamweaver. Er zijn echter vele alternatieven beschikbaar. Zelf gebruik ik op mijn Windows-systeem bijvoorbeeld Notepad++ (http://notepad-plus-plus.org/, afbeelding 1.2).

afbeelding 1.2

Ftp-client

Als je al wat ervaring hebt met het werken met WordPress, dan weet je wat ftp is en heb je ongetwijfeld al clientsoftware daarvoor. In dit boek werk ik met het gratis FileZilla (http://filezilla-project.org), dat ook weer voor vrijwel alle besturingssystemen verkrijgbaar is.

Een (lokale) testomgeving

Essentieel bij het ontwikkelen van WordPress-themes is dat je een testomgeving tot je beschikking hebt. Hoewel het niet noodzakelijk is, werkt het het prettigst als je die lokaal op je eigen systeem hebt draaien. Ik maak zelf gebruik van Xampp, dat een webserver, MySQL en php in één biedt (www.apachefriends.org). Natuurlijk heb je daar ook de meeste recente versie van WordPress op draaien. Heb je nog geen testomgeving, en heb je evenmin een idee hoe je zoiets kunt inrichten voor jezelf? Dan is dit boek echt nog een stapje te ver voor je. Ik adviseer je om meer basistechnieken te leren en bijvoorbeeld te beginnen met Kickstart WordPress.

Browsers

We hebben allemaal onze favoriete browser. Bij mij is dat Firefox, maar velen zullen Google Chrome of Safari gebruiken. Echter, je favoriete browser is niet genoeg. Je moet ze eigenlijk allemaal hebben, het liefst in verschillende versies. Je zult merken dat je hier tijdens het ontwikkelen van je themes veel aandacht aan moet besteden: browsers interpreteren de css-code namelijk niet allemaal op dezelfde manier. Hoewel er veel verbeterd is de laatste jaren, moet je gewoon rekening houden met gebruikers die nog met oudere systemen naar je website surfen. Microsoft Internet Explorer is wat dit betreft een kleine ramp, zeker als het gaat om de oudere versies. Maar je kunt het niet negeren, want een groot percentage van de toekomstige bezoekers aan je website maakt nu eenmaal gebruik van Internet Explorer (IE). Maar maak het jezelf niet moeilijk en ga op basis van een van de andere browsers ontwikkelen. Tijdens het bouwen van je theme test je vervolgens ook voor andere browsers en maak je waar nodig aanpassingen. Voor Mac- en Linux-fans geldt dat ze echt ergens een Windows-machine op de kop moeten tikken, zodat er ook met IE getest kan worden.

Portable browsers
Veel browsers zijn door hobbyisten tot zogenaamde portable versies omgebouwd. Dat wil zeggen dat je de software kunt draaien zonder het te installeren, zelfs rechtstreeks vanaf een USB-stick. Het voordeel is dat je kunt testen, maar niet alle verschillende browsers op je eigen systeem hoeft te plaatsen. Ook van de oudere IE-versies bestaan er portable versies. Even zoeken op ‘IE Portable’ of ‘Portable Internet Explorer’ levert je al snel verschillende hits op.

De opbouw van een WordPress-theme

We starten in het eerste deel van dit boek nog niet met het coderen van je theme. Toch is het wel goed om alvast te kijken naar de wijze waarop een WordPress-theme in elkaar zit. Je zult zien dat het niet al te ingewikkeld is en dat een basis-theme eigenlijk maar uit een paar elementen bestaat.

In afbeelding 1.3 zie je een schematische weergave van het Twenty Eleven-theme. Het handige van een WordPress-theme is dat de verschillende onderdelen (header, sidebar en dergelijke) overeenkomen met de bestandsnamen die je straks terug zult zien als je je theme gaat coderen. Met andere woorden: de code die ervoor zorgt dat er een header op elke pagina staat, vind je terug in header.php. De code voor de sidebar bevindt zich in sidebar.php enzovoort.

afbeelding 1.3

Een theme bevindt zich binnen je WordPress-installatie altijd in de map ‘wp-content’. Alle bestanden van het Twenty Eleven-theme staan dus in de map ‘wp-content/themes/twentyeleven’ (afbeelding 1.4).

afbeelding 1.4

Gezien het bovenstaande zul je inmiddels vermoeden dat het allemaal toch niet zo simpel is. Twenty Eleven bestaat uit een hele rij bestanden, in ieder geval veel meer dan afbeelding 1.3 deed vermoeden. Dat klopt, maar toch blijft de eenvoud overeind. Hoe meer functies en verschillende soorten pagina’s een theme kent, des te meer bestanden je zult zien. Daarmee dreig je als beginner het overzicht te verliezen bij het maken van themes. Maar dat hoeft niet, want het meest eenvoudige WordPress-theme bestaat echt maar uit enkele bestanden. In het tweede deel van dit boek ga je die code schrijven en beginnen we heel eenvoudig. We starten nu eerst met het maken van een leuk ontwerp voor je eigen theme.