Een Wordpress theme in 30 minuten! » Tanja de Bie

Tijdschrift voor webwerkers » Artikel #164

Binnen 30 minuten een Wordpress theme maken? Dat kan! Ik ga je vertellen welke basisstukken code je nodig hebt voor een eenvoudige theme. We gaan ons niet met CSS vermoeien, want ik ga er stiekem vanuit dat dát geen probleem voor je is, net als de installatie van Wordpress.

Voor iedereen met CSS kennis, maar die er nog steeds niet aan toe was gekomen te leren hoe een Wordpress theme in elkaar zit. Het is echt niet zo moeilijk, slechts 30 minuten voor de basis, let maar op!

Benodigdheden

Een fijne front-end tekstverwerker,
Een kant-en-klare Wordpress-installatie met FTP toegang om je nieuwe theme te uploaden,
Een stuk of 3 á 5 dummy blogposts (check blindtextgenerator.com voor goede dummyteksten),
CSS/HTML kennis om het straks mooi te maken,
30 minuutjes van je tijd!

De anatomie

De anatomie van een eenvoudig Wordpress theme bestaat uit drie PHP-documenten:

een header (header.php), bevat alle informatie die bovenaan een HTML document hoort te staan, <doctype><meta><style type> etc. Een logo of hoofdnavigatie staat hier vaak in, maar ook in elk geval de start van <body>.
een body (index.php), de content van je website, de blogposts of content op statische pagina’s.
een footer (footer.php), sluit je HTML document af, copyright of contact gegevens, links naar scripts (bv statistieken)

Uiteraard komen er feitelijk nog veel meer zaken bij te kijken, een sidebar, een archief, comments en een zoekfunctie om maar wat te noemen. Maar voorlopig zullen we ons vermaken met de basiskennis van een Wordpress-theme.

Beginnen bij het begin, de index.php

Begin met de drie PHP-bestanden aan te maken: header.php, index.php en footer.php De index.php is het document waar je de header en de footer aanroept en waar de kern van je Wordpress-theme zich bevindt: de “Wordpress loop”.

Wordpress gebruikt een groot aantal “template tags”, short codes naar functies vastgelegd in de Wordpress-core, en die elk een eigen taak uitvoeren, vaak nog binnen bepaalde parameters. Het zijn vaak taken die veel voorkomen en zo niet steeds opnieuw hoeft te definieren. Sterker nog, dit zijn typische dingen die Wordpress het mooie stukje open source software maakt dat het is. Het is ook mogelijk om je eigen template tags te schrijven, maar dat is zwarte band Wordpress-kunde!

Start de index.php met deze twee template tags:

<?php get_header(); ?>
<?php get_footer(); ?>

Deze template tags maken verbinding met de header.php en de footer.php. Nu het leuke gedeelte: de Wordpress loop! De loop is verantwoordelijk voor het ophalen van informatie uit de database: de blogposts, de content op statische pagina’s, categorieën etc. De eenvoudigste vorm van de Wordpress loop haalt alle posts op, uit alle categorieën, en net toont er zoveel als je in je instellingen van Wordpress hebt aangegeven.

Deze loop gaat als volgt:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

In deze regel staat min of meer “áls je blogposts hebt, én zolang je ze hebt, laat ze allemaal zien”. Het is overigens handig om te weten dat Wordpress blogposts altijd chronologisch toont, de nieuwste bovenaan.

Dit is een start van een if/else statement en die moet je altijd afsluiten, in dit geval zonder aanvullende voorwaarden, behalve voor het tonen van een bericht wanneer er geen blogposts zijn:

<?php endwhile; else: ?> 
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p> 
<?php endif; ?>

Plaats deze loop tussen het aanroepen van de header en de footer in:

<?php get_header(); ?> 
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
<?php endwhile; else: ?> 
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p> 
<?php endif; ?> 
<?php get_footer(); ?>

We zijn heel dicht bij de magie, nu nog aan je theme vertellen wát hij van je blogpost moet tonen: een titel, de inhoud of een samenvatting…

<?php the_title(); ?> 
<?php the_content(); ?> <!-- voor de volledige inhoud van de blogpost -->
of
<?php the_excerpt(); ?> <!-- voor een samenvatting van de blogpost -->

Vergeet niet dat wanneer je de samenvatting wilt gebruiken, je ook een link aanmaakt naar het volledige artikel:

<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">Lees het volledige artikel</a>

Voor het geval ik nu twee stappen te hard ga, ontleed ik deze regel nog even snel voor je. Bij het aanmaken van een link naar het volledige artikel, laat je de doellink (<?php the_permalink(); ?>) en de title (<?php the_title(); ?>) van het artikel uit de database ophalen. Hoe ziet je index.php er nu uit? Ik kom tot negen regeltjes code met gebruik van de samenvatting en de link naar het volledige artikel:

<?php get_header(); ?> 
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
<?php the_title(); ?> 
<?php the_excerpt(); ?> 
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">Lees het volledige artikel</a> 
<?php endwhile; else: ?> 
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p> 
<?php endif; ?> 
<?php get_footer(); ?>

De header.php

Voor we het theme kunnen testen hebben we de start van een HTML-document nodig in de header. In een paar standaard regeltjes code kunnen we dit oplossen en het kan aangevuld worden met meta-tags of links naar andere stylesheets of javascripts wanneer je dat wilt. Maar de snelle variant van een header.php ziet er zo uit:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> 
<head profile="http://gmpg.org/xfn/11"> 
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> 
<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title> 
<style type="text/css" media="screen"> 
              @import url( <?php bloginfo('stylesheet_url'); ?> ); 
</style> 
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" /> 
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" /> 
<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="<?php bloginfo('atom_url'); ?>" /> 
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> 
<?php wp_head(); ?> 
</head> 
<body>

Na deze laatste regel begint jouw HTML/CSS feestje! Een container en/of een content-div (hoe je het ook wilt aanpakken) kun je in de header.php openen en in de footer.php sluiten. De code specifiek voor posts plaats je in de index.php, weet je wat… ik geef je toch een klein voorbeeldje:

<?php get_header(); ?> 
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
<div class=”thePost”> 
<h2><?php the_title(); ?></h2> 
<div class=”postContent”> 
<p><?php the_excerpt(); ?></p> 
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">Lees het volledige artikel</a> 
</div> 
</div> 
<?php endwhile; else: ?> 
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p> 
<?php endif; ?> 
<?php get_footer(); ?>

Daar heb je vast genoeg aan om het gevoel te krijgen! Je kunt de code nog iets uitbreiden met meta-informatie over de post, zoals de datum van publicatie en de categorie bijvoorbeeld meteen onder de titel.

<?php get_header(); ?> 
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
<div class=”thePost”> 
<h2><?php the_title(); ?></h2> 
<div class="meta"><?php the_date() ?><span class="cat">Categorie: <?php the_category(',') ?></span></div> 
<div class=”postContent”> 
<p><?php the_excerpt(); ?></p> 
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">Lees het volledige artikel</a> 
</div> 
</div> 
<?php endwhile; else: ?> 
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p> 
<?php endif; ?> 
<?php get_footer(); ?>

Waarschijnlijk is het ook een goed idee om de titel van het artikel een link naar het volledige artikel te maken, misschien heb je mijn hulp inmiddels niet meer nodig, maar voor de zekerheid:

<?php get_header(); ?> 
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
<div class=”thePost”> 
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2> 
<div class="meta"><?php the_date() ?><span class="cat">Categorie: <?php the_category(',') ?></span></div> 
<div class=”postContent”> 
<p><?php the_excerpt(); ?></p> 
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">Lees het volledige artikel</a> 
</div> 
</div> 
<?php endwhile; else: ?> 
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p> 
<?php endif; ?> 
<?php get_footer(); ?>

De footer.php

Helaas is de footer tot nu toe het minst sexy, met drie miezelige regeltjes code, maar hier kun jezelf nog wat spannends van maken, straks als je aan de volgende band toe bent. Door de footer te 'widgetizen', klinkt goed he?! Moet ook wel, anders is dit het:

<?php wp_footer(); ?> 
</body> 
</html>

Style.css

Het is goed te weten dat zonder een CSS-file een theme niet werkt, tenminste niet selecteerbaar is in het admin-gedeelte. Maar dat is met een kleine start zo te realiseren zonder in markup te gaan duiken, bewaar een document als style.css met de volgende code (naar eigen inzicht in te vullen):

/* 
Theme Name: Testtheme in 30 minuten 
Version: 0.1 
Author: Tanja de Bie | daags.nl 
Author URI: http://daags.nl/ 
*/

En voila, uploaden in een eigen mapje in de theme-folder op je server, maak er vervolgens een mooie voorvertoning (300x225 pixels en noem het screenshot.png) bij en je bent klaar voor de start, met slechts 4 bestanden!

Oh, niet helemaal… omdat we zijn gaan werken met de samenvatting, moeten we nog een pagina aanmaken waar het volledige artikel op te lezen is. Anders komen we terecht in een “oneindige loop” van pagina’s die een samenvatting met een link tonen. Het enige wat we daarvoor nodig hebben is een nieuw document genaamd single.php. Deze is grotendeels gelijk aan de index.php met een kleine uitzondering: waar the_excerpt stond, vul je nu the_content in.

<?php get_header(); ?> 
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
<div class="thePost"> 
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2> 
<div class="meta"><?php the_date() ?><span class="cat">Categorie: <?php the_category(',') ?></span></div> 
<div class="postContent"> 
<?php the_content(); ?> 
</div> 
</div> 
<?php endwhile; else: ?> 
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p> 
<?php endif; ?> 
<?php get_footer(); ?>

Let op: wanneer je the_excerpt gebruikt, toont de index.php geen afbeeldingen die je hebt gebruikt in de blogpost! In the_content worden afbeeldingen wel getoond. Er zijn legio mogelijkheden om toch afbeeldingen te tonen, van plugins tot 'custom fields' aan toe. En vooral 'custom fields' zijn verstandige trucjes om onder de knie te krijgen!

Tot slot

Je hebt nu een simpel Wordpress-theme. Nu komt het op je eigen fantasie, HTML-skills en CSS-kunsten aan om er een mooie site van te maken. Je vindt veel tips en trucs in de Wordpress Codex. Daar kun je ook terecht voor troubleshooting. Zo kom je pijlsnel aan die zwarte band!

Tanja de Bie

omschrijft haar werkzaamheden als ‘designing for online persuasion’; het ontwerpen van verleidelijke en gebruiksvriendelijke interfaces van webapplicaties of nog leuker formulieren slimmer en aangenamer maken. Van oorsprong een fanatieke blogger en Twitteraar, met interesse voor alles dat wat internet is.

Publicatiedatum: 10 maart 2010

Naar Voren is op 18 juli 2010 gestopt met publiceren. De artikelen staan als een soort archief online. Het kan dus zijn dat de informatie verouderd is en dat er inmiddels veel betere of makkelijkere manieren zijn om je doel te bereiken.