Maak je eigen wordpress theme.

Maak je eigen wordpress theme.

In een serie van artikelen gaan we beschrijven hoe je je eigen theme voor WordPress kunt maken. WordPress is een van de meest populaire blogsystemen van het moment. Je kunt hiervoor heel veel templates vinden en downloaden of kopen, maar je kunt vrij eenvoudig ook zelf een template of theme maken. In het eerste van een serie artikelen gaan we kijken naar de basis van WordPress en de opbouw van een theme. Je moet in ieder geval kennis hebben van HTML, CSS. Een beetje kennis van PHP kan ook geen kwaad, al hoef je hier verder niet zoveel mee te kunnen.

Voorbereiding

Voordat je aan het stijlen en coden slaat zijn er een paar dingen die je moet doen. Ten eerste maak je een map aan die je een willekeurige naam geeft. Deze plaats je in de /wp-content/themes/ folder van wordpress. Je kunt nu alles op je localhost installeren en testen, maar je kunt het ook allemaal online toepassen. In de betreffende map ga je nu een aantal lege documenten aanmaken met de volgende namen:

  • header.php
  • sidebar.php
  • footer.php
  • index.php
  • page.php
  • single.php
  • archive.php
  • comments.php
  • style.css

Deze bestanden zijn nu leeg, we zullen ze stap voor stap de juiste inhoud geven. Sla ze wel op met de juiste extentie, dus .php en .css

Stap 1 – De Stylesheet

Laten we starten met het stijlblad ‘style.css’. Kopieer en plak de volgende code in dit bestand:

/*
    Theme Name: Naam van je wordpress theme
    Theme URI: http://www.jesite.com
    Description: Omschrijving van je wordpress theme.
    Version: 1.0
    Author: Je naam
    Author URI: http://www.jesite.com/
    */

Natuurlijk moet je hier je eigen naam, url en omschrijving invullen. Dit legt vast hoe het theme gaat heten in het admin gedeelte van wordpress bij design.

We zullen de rest van style.css ook meteen ingeven. We hebben een basis nodig voor de layout. We zullen even uitgaan van een gratis css template wat overal op internet te vinden is. De hele code kopieren en plakken we in de stylesheet. Het ziet er dan als volgt uit:

/*
    Theme Name: Naam van je wordpress theme
    Theme URI: http://www.jesite.com
    Description: Omschrijving van je wordpress theme.
    Version: 1.0
    Author: Je naam
    Author URI: http://www.jesite.com/
    */

    * {
    margin:0;
    padding:0;
    }

    body {
    background:#fff;
    color:#000;
    min-width:800px;
    font-family:tahoma, arial, sans-serif;
    font-size:10pt;
    }

    #wrapper {
    width:800px;
    height:auto;
    margin:0 auto;
    }

    #header {
    width:784px;
    height:auto;
    padding:8px;
    text-align:center;
    border-bottom:1px solid #000;
    }

    #nav {
    width:784px;
    height:auto;
    padding:8px;
    text-align:center;
    border-bottom:1px solid #000;
    }

    #sidebar {
    width:180px;
    height:auto;
    float:left;
    padding:8px;
    text-align: center;
    }

    #main {
    width:587px;
    height:auto;
    float:right;
    padding:8px;
    border-left:1px solid #000;
    }

    #footer {
    clear:both;
    margin:0;
    padding:8px;
    text-align:center;
    border-top:1px solid #000;
    } 

Stap 2 – Header

Nu openen we het volgende document, header.php. Onderstaande code kopieren en plakken we daarin.

<!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">

    <head profile="http://gmpg.org/xfn/11?>
    <title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <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 0.3? href="<?php bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php wp_get_archives('type=monthly&format=link'); ?>
    <?php //comments_popup_script(); // off by default ?>
    <?php wp_head(); ?>
    </head>

    <!–
    Vanaf hier kun je gaan aanpassen. Pas de verschillende divs naar wens aan.
    Als je bovenstaande template gebruikt hoef je niets te doen.
    –>

    <body>
    <div id="wrapper">
    <div id="header">
    <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
    <?php bloginfo('description'); ?><br /><br />
    </div><!– close header –>
    <div id="nav">
    </div><!– close nav –>

Dit is min of meer het begin van iedere html pagina. Eerst wordt het DOCTYPE geplaatst. Dan volgt de TITLE, de koppeling met het stylesheet en de meta tags.

Als je vervolgens wat beter kijkt zie je waarden die PHP bevatten, zoals:

<?php wp_title(); ?>

Hier hoef je niet bang voor te zijn, hiermee kunnen waarden dynamisch worden veranderd wanneer je dit aanpast in het admin gedeelte. Bovenstaande code bijvoorbeeld gaat na welke titel er voor het blog is ingegeven. Dat wordt uit de database gehaald.

Tot zover de eerste aflevering. Je bent nu op weg om je eigen wordpress theme te gaan maken. Volgende week zal het tweede deel worden geplaatst, waarin we aan de slag gaan met de andere bestanden.

          Leuk als je dit artikel deelt:
Share

15 gedachten over “Maak je eigen wordpress theme.

  1. Ik kreeg het in eerste instantie niet helemaal voor elkaar, maar er lijken gewoon wat foutjes in de code te zitten.. er staan wat ?’s waar “s horen en vergeet bij t laatste stuk niet de wrapper div en de op het eind erbij te zetten..
    opzich best logisch, maar hopenlijk scheelt het weer iemand wat zoekwerk!
    Sander

  2. De grote lijnen volg ik nog niet helemaal.
    Bijvoorbeeld: ik heb een site gemaakt waar in de toekomst een pagina moet komen met nieuws, interessante zaken e.d. Moet de hele site dan in wordpress of kan ik alleen die ene pagina in wordpress maken en in de bestaande website integreren?

    1. In principe maak je de hele site in wordpress, je kunt natuurlijk de bestaande layout en wordpress naast elkaar gebruiken, maar de meeste websites gebruiken alleen WordPress. Als je meer een nieuwssectie wil dan zou je eens moeten kijken naar Cutenews, dat kun je wel integreren op de manier zoals jij voorstelt. http://cutephp.com/

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *