Jasper Denkers van de cursus ‘Je eigen Website maken‘, heeft een serie artikelen voor HTML-site geschreven waarin hij je gaat leren om een WordPress Theme te maken. In het verleden is er al een uitgebreid artikel hierover geschreven. Jasper gaat een flinke stap verder.

Introductie minicursus je eigen WordPress thema maken

Als bezoeker van html-site ken je waarschijnlijk het CMS ‘WordPress’ al. Het is een van de meest populaire softwarepakketten voor het beheren van een blog of website. Een van de redenen waarom WordPress zo populair is geworden, is omdat er ontzettend veel WordPress thema’s beschikbaar zijn.

WordPress thema’s is een verzameling bestanden die het uiterlijk van een WordPress website verzorgen. In een serie van meerdere artikelen gaan we kijken hoe jij zelf zo’n WordPress thema kunt maken.

Waarom zelf een WordPress thema maken?

Het kunnen maken van een eigen WordPress thema heeft meerdere voordelen. Misschien heb je al een website en wil je deze omzetten tot een WordPress thema. Daarnaast leer je de WordPress software kennen wat erg handig is als je later bijvoorbeeld plugins wilt gaan maken. En het maken van een WordPress thema is natuurlijk leuk!

Bestanden van een WordPress thema

Als je wel eens de mappen van een WordPress installatie hebt bekeken, zul je misschien hebben opgemerkt dat er een themes map is. Deze is te vinden in de map wp-content. Deze map bevat de thema’s welke zijn geïnstalleerd op de WordPress installatie.

Elk thema heeft een eigen aparte map met daarin de bestanden van het thema. Dit zijn minstens twee bestanden; index.php en style.css. De laatste is de belangrijkste. In het stijlblad staat informatie over het thema. Als deze informatie niet in de map te vinden is, zal WordPress het thema niet herkennen.

Hoewel je al een thema van twee bestanden kunt maken, is het gebruikelijker meer bestanden te gebruiken voor meerdere verschillende pagina’s. We bekijken kort de meest gebruikte bestanden:

style.css – Het stijlblad bevat uiteraard de css-opmaak van het thema. Je kunt meerdere stijlbladen gebruiken, maar style.css moet sowieso gebruikt worden. Naast de css staat in style.css informatie over het thema. Hieraan herkent WordPress het thema en bijvoorbeeld welke versie van het thema is geïnstalleerd.

index.php – Index.php is het meest algemene bestand in een WordPress thema. Index.php wordt door WordPress altijd gebruikt wanneer er geen ander bestand beschikbaar is. Heb je naast index.php en style.css een bestand ‘page.php’, dan zal voor een losstaande pagina page.php gebruikt worden. Voor andere pagina’s, waarvoor het thema geen aparte bestanden heeft, dat kan bijvoorbeeld voor een artikel of een zoekpagina zijn, wordt index.php gebruikt.

single.php – Single.php wordt gebruikt om losstaand een artikel of bericht van een blog weer te geven.

page.php – Page.php is het bestand wat wordt gebruikt wanneer een losstaande pagina wordt geopend.

search.php – Om zoekresultaten weer te geven wordt het bestand search.php gebruikt.

category.php – Wordt gebruikt wanneer een categorie wordt weergegeven.

tag.php – Laat alle berichten zien met een bepaalde tag.

author.php – Hetzelfde als tag.php, maar dan voor een bepaalde auteur.

date.php – Laat alle berichten zien die op een bepaalde datum zijn gepubliceerd.

archive.php – Archive.php is een algemener bestand voor de hiervoor genoemde category.php, author.php en date.php. Als een van deze bestanden niet bestaat, wordt archive.php gebruikt.

404.php – 404.php wordt gebruikt wanneer een pagina niet kan worden weergegeven, bijvoorbeeld omdat deze niet bestaat.

header.php – Header.php bevat het ‘bovenste’ html gedeelte van de pagina’s wat bij elke pagina hetzelfde is. Door header.php te gebruiken hoef je niet steeds eenzelfde stuk code te gebruiken in de aparte thema bestanden.

footer.php – Voor footer.php geldt hetzelfde als voor header.php, alleen dan voor het ‘onderste’ gedeelte van de pagina’s.

sidebar.php – Sidebar.php bevat de code voor de sidebar van het thema.

comments.php – Comments.php wordt gebruikt om reacties weer te geven.

De html en css

In deze reeks artikelen gaan we stap voor stap een eigen thema maken. We doen dit aan de hand van een pagina waarvan we de HTML en CSS al hebben. De broncode van deze voorbeeldpagina vind je hieronder:

	
	



	

		
WordPress Voorbeeldthema
		
Een voorbeeld WordPress thema
	
	

		

			
Home
			
Over
			
Contact
		
	
	

		

			
Testpagina
			
Inhoud.
		
		

			

				
Widget #1
				
Widget inhoud.
			
		
		

	
	

		
Footer content
	

* {
    margin: 0;
    padding: 0;
    border: 0;
}
.clear {
    clear: both;
}
body {
    font: 12px/18px 'Arial', Sans-serif;
    background-color: #F3F3F3;
    text-align: center;
}
#wrapper {
    background-color: #FFF;
    margin: 20px auto;
    width: 960px;
    text-align: left;
}
#header {
    height: 100px;
}
#header h2 {
    line-height: 24px;
    font-size: 24px;
    padding: 25px 30px 0 30px;
}
#header h3 {
    padding: 5px 30px;
    font-size: 16px;
    color: #555;
}
#menu ul {
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
    list-style-type: none;
    background-color: #333;
}
#menu ul li {
    float: left;
}
#menu ul li a {
    display: block;
    color: #FFF;
    padding: 0 15px;
    text-decoration: none;
}
#menu ul li a:hover {
    background-color: #444;
}
#content {
    margin: 20px 0;
}
#entry {
    float: left;
    width: 650px;
}
#entry p {
    margin: 1em 15px;
}
#entry h1 {
    margin: 30px 15px;
}
#sidebar {
    float: right;
    width: 300px;
}
#sidebar .widget {
    background-color: #EEE;
    margin: 0 10px 15px 0;
    padding: 10px;
}
#footer {
    margin-top: 30px;
    background-color: #333;
    padding: 15px;
    text-align: center;
    color: #FFF;
}

Zoals je ziet is dit voorbeeld zo simpel mogelijk gehouden. We gaan uit van een normale layout met een sidebar.

Tot zover het eerste gedeelte van deze serie waarin we een eigen WordPress thema gaan maken. In het volgende deel beginnen we met het daadwerkelijk maken van het thema.