HTML-site.nl

Superhandige Tips voor Jouw Eigen Website

Een wordpress theme maken voor beginners

door ·

Binnenkort een update om je eigen WordPress theme te maken

Binnenkort verschijnt er een update van dit artikel waarin ik je uitleg hoe je een WordPress theme zelf kunt maken! Meld je aan voor de nieuwsbrief en je krijgt een update als dit artikel klaar is!
[mc4wp_form id=”940131″]

In deze tutorial 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 en 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 het stijlblad. 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.

Nu gaan we aan de slag met ‘the loop’, ‘The loop’ is de motor achter WordPress.
Hiermee wordt iedere post getoond. Elke code die in de loop geplaatst wordt zal in iedere post terugkomen.

Stap 3 ‘The Loop’ in WordPress

Open het bestand index.php. Deze is nu leeg, hier vul je het volgende in:

    <?php get_header(); ?>
    <div id="main">

De eerste regel zorgt ervoor dat de kop, header, wordt aangeroepen in de index.
Een header-template is erg gemakkelijk omdat je, wanneer je iets in de kop wilt veranderen, je dat alleen hoeft te doen in de header en niet in ieder apart document.

Als tweede wordt de basis ‘div’ geopend. Deze wordt ‘main’ genoemd. Deze div omsluit alle andere code.
We gebruiken trouwens steeds de engels benaming, deze zul je namelijk vaker, op andere plaatsen ook tegenkomen.

Nu dan de WordPress loop. Deze start als volgt:

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

De loop gaat verder met de titel van de post en de metadata voor de post.
Deze hele post is geplaatst in een div met de id ‘post‘. Daarnaast wordt de inhoud van de post ook weer voorzien van een div, nu met de naam ‘entry‘. Hierdoor kun je gemakkelijk het uiterlijk van een afzonderlijke post en de inhoud van die post veranderen. In de voorbeeld CSS is er bijvoorbeeld een stippellijn geplaatst boven en onder de titel. Hiermee worden de artikelen visueel in stukken verdeeld. De code:

    <div class="post" id="post-<?php the_ID(); ?>">
    <div style="border-bottom:1px dotted #000;"></div>
    <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
 
    <div class="entry">
    <div style="padding-bottom:5px;border-bottom:1px dotted #000;">
    <p class="postmetadata">
    <?php the_time('l, F jS, Y') ?> | <?php _e('Geplaatst in:'); ?> <?php the_category(', ') ?> <?php _e('door'); ?> <?php the_author(); ?> |
   <?php comments_popup_link('Geen reacties &raquo;', '1 Reactie &raquo;', '% Reacties &raquo;'); ?> <?php edit_post_link('Bewerk, ' | ', ' '); ?>
 
    </p>
    </div>
    <br />

Functie ‘the_content()‘ laat de inhoud van de post zien. Als je alleen de korte voorbeelden van een
artikel wilt hebben zet je voor ‘the_content()‘ in de plaats, de functie ‘the_excerpt()‘.

Dus zo:

    <?php the_content(); ?>

Vergeet niet de divs weer af te sluiten en daarbij aan te geven wat deze div afsluit.

    </div><!-- sluit entry -->
    </div><!-- sluit post -->

De loop eindigt met ‘endwhile;’

    <?php endwhile; ?>

Het eerste onderdeel na de loop is de navigatie div. Op het einde van de pagina komt er ‘Volgende pagina’
of ‘vorige pagina’ te staan. Hiermee kunnen bezoekers eerdere of latere berichten van je bezoeken.

    <div class="navigation">
    <?php posts_nav_link(); ?>
    </div><!-- sluit navigatie -->

Vervolgens geven we aan wat er komt te staan als de loop faalt in het tonen van posts of artikelen.
In dit voorbeeld verschijnt de ‘Not Found’ melding.

    <?php else : ?>
    <div class="post" id="post-<?php the_ID(); ?>">
    Not Found
    </div><!-- sluit post -->
    <?php endif; ?>

Tenslotte sluiten we de main div en includen we de sidebar en de footer templates.

    </div><!-- close main -->
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>

Stap 4 – Andere Loops in WordPress

Je kunt bovenstaande code ook in andere onderdelen van je site inpassen. Zo kun je dezelfde code gebruiken,
of functie ‘the-content()‘ aanpassen naar ‘the_excerpt()‘, als je korte beschrijvingen van een post wilt.

Nu openen we page.php. De code is min of meer dezelfde:

<?php get_header(); ?>
    <div id="main">
    <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
    <div class="post" id="post-<?php the_ID(); ?>">
 
    <div style="border-bottom:1px dotted #000;"></div>
    <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
    <div class="entry">
 
    <div style="padding-bottom:5px;border-bottom:1px dotted #000;">
    <?php the_time('l, F jS, Y') ?> | <?php edit_post_link('Edit', ", "); ?>
    </div>
    <br />
    <?php the_content(); ?><br />
 
    <?php link_pages('<p><strong>Pagina's:</strong> ', '</p>', 'number'); ?>
    </div><!-- sluit entry -->
    </div><!-- sluit post -->
 
    <?php endwhile; ?>
    <?php else : ?>
    <div class="post" id="post-<?php the_ID(); ?>">
    Not Found
    </div><!-- sluit post -->
    <?php endif; ?>
 
    </div><!-- sluit main -->
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>

De metadata is verwijderd (categorie en reactie informatie is nu niet nodig), na de functie ‘the_content()‘
komt er nog wat code bij:

    <?php link_pages('<p><strong>Pagina's:</strong> ', '</p>', 'number'); ?>

Voor het geval de inhoud over meerdere pagina’s verdeeld wordt.

Individuele pagina’s en reacties

Nu gaan we aan de slag met de gedeeltes voor de individuele pagina, in WordPress ’single’ genoemd, en de reacties. Voor veel van deze onderdelen geldt dat je een hele hoop kunt aanpassen met behulp van CSS. Het is niet de bedoeling dat je alles klakkeloos overneemt, experimenteer zelf met aanpassingen, dan wordt het echt je eigen template!

Individuele of ’single’ post

Dit is de pagina waar de uiteindelijke post komt te staan. Wanneer je single.php opent dan is dit bestand als het goed is leeg. De volgende code plaats je hierin.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_content(); ?><br />
<?php link_pages('<p><strong>Pages:</strong> ', '</p>', 'number'); ?>
 
</div><!-- close entry -->
<div class="comments-template">
<?php comments_template(); ?>
</div>
</div><!-- close post -->
<?php endwhile; ?>
<?php else : ?>
<div class="post" id="post-<?php the_ID(); ?>">
 
Not Found
</div><!-- close post -->
<?php endif; ?>
</div><!-- close main -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

De meeste van de code lijkt op datgene wat we eerder gemaakt hebben. Je zult inmiddels al wat bekender zijn
met een aantal zaken. Ook zijn er een paar nieuwe regels, de volgende:

In postmetadata is de informatie over reacties weggelaten. Deze zullen namelijk verderop verschijnen en
zijn dus hier niet meer nodig.

Net na het einde van de ‘entry‘ wordt de functie om de reacties aan te roepen ingeschakeld.
In het engels ‘comments‘ genoemd. Omdat deze ‘comments‘ in een specifieke div geplaatst
zijn met een klassenaam, zijn reacties straks makkelijker te verwerken in een stylesheet.

<div class="comments-template">
<?php comments_template(); ?>
</div>

De rest van de code is dezelfde als in de andere templates.

Reacties of ‘comments’

Nu openen we comments.php, de volgende code kun je hierin weer plaatsen:

  1. <?php // Deze regels niet verwijderen
  2. if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) die ('Please do not load this page directly. Thanks!');
  3. if (!empty($post->post_password)) { // if there's a password
  4. if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) { // and it doesn't match the cookie
  5. ?>
  6. <h2><?php _e('Password Protected'); ?></h2>
  7. <p><?php _e('Enter the password to view comments.'); ?></p>
  8.  
  9. <?php return;
  10. }
  11. }
  12. /* Deze variable is om de comment achtergrond 'alt' aan te passen */
  13. $oddcomment = 'alt';
  14. ?>
  15. <!-- Hier kun je aanpassen. -->
  16. <?php if ($comments) : ?>
  17. <h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to "<?php the_title(); ?>"</h3>
  18. <ol class="commentlist">
  19. <?php foreach ($comments as $comment) : ?>
  20.  
  21. <li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>" style="padding:0;">
  22. <div class="commentmetadata">
  23. <strong><?php comment_author_link() ?></strong>, <?php _e('on'); ?> <a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> <?php _e('at');?> <?php comment_time() ?></a> <?php edit_comment_link('Edit Comment',' ',' '); ?> <?php _e('Said:'); ?>
  24.  
  25. <?php if ($comment->comment_approved == '0?) : ?>
  26. <em><?php _e('Your comment is awaiting moderation.'); ?></em>
  27. <?php endif; ?>
  28. </div><div style="border-bottom:1px solid #fff;"></div>
  29. <div style="padding:10px;"><?php comment_text() ?></div>
  30.  
  31. </li>
  32. <?php /* Verandert iedere oneven reactie in een verschillende class */
  33. if ('alt' == $oddcomment) $oddcomment = ' ';
  34. else $oddcomment = 'alt';
  35. ?>
  36. <?php endforeach; /* end for each comment */ ?>
  37. </ol>
  38. <?php else : // geen reacties geeft dit weer ?>
  39. <?php if ('open' == $post->comment_status) : ?>
  40. <!-- Als er geen berichten zijn maar wel kunnen gegeven worden. -->
  41. <?php else : // comments are closed ?>
  42.  
  43. <!-- Als reacties geven gesloten is. -->
  44. <p class="nocomments">Comments are closed.</p>
  45. <?php endif; ?>
  46. <?php endif; ?>
  47. <?php if ('open' == $post->comment_status) : ?>
  48. <h3 id="respond">Leave a Reply</h3><br />
  49.  
  50. <?php if ( get_option('comment_registration') && !$user_ID ) : ?>
  51. <p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>">logged in</a> to post a comment.</p>
  52.  
  53. <?php else : ?>
  54. <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
  55. <?php if ( $user_ID ) : ?>
  56. <p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Logout »</a></p>
  57.  
  58. <?php else : ?>
  59. <p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="40? tabindex="1? style="font-family:tahoma,sans-serif;" />
  60. <label for="author"><small>Name <?php if ($req) echo “(required)"; ?></small></label></p><br />
  61. <p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="40? tabindex="2? style="font-family:tahoma,sans-serif;" />
  62.  
  63. <label for="email"><small>Mail (will not be published) <?php if ($req) echo “(required)"; ?></small></label></p><br />
  64. <p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="40? tabindex="3? style="font-family:tahoma,sans-serif;" />
  65. <label for="url"><small>Website</small></label></p><br />
  66.  
  67. <?php endif; ?>
  68. <!–<p><small><strong>XHTML:</strong> <?php _e('You can use these tags:'); ?> <?php echo allowed_tags(); ?></small></p>–>
  69. <p><textarea name="comment" id="comment" cols="60? rows="10? tabindex="4? style="font-family:tahoma,sans-serif;"></textarea></p><br />
  70.  
  71. <p><input name="submit" type="submit" id="submit" tabindex="5? value="Submit Comment" style="font-family:tahoma,sans-serif;" />
  72. <input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
  73. </p><br />
  74. <?php do_action('comment_form', $post->ID); ?>
  75. </form>
  76. <?php endif; // Als registreren verplicht is ?>
  77.  
  78. <?php endif; // Niet verwijderen!! ?>

In dit stuk staat veel PHP code waar we nu niet teveel op ingaan. Dit bestand wordt toch niet te vaak veranderd. Toch een paar aandachtspunten.

Ten eerste, de code vanaf regel 47 tot en met regel 64, is het formulier om de reacties te posten.
Hierin kun je lettertypes, kleuren enz. aanpassen.

De regel $oddcomment = 'alt'; is erg handig. hiermee kun je de even en oneven berichten een
verschillend uiterlijk geven. De eerste bijvoorbeeld wat donkerder dan de tweede en zo om en om.

Verderop in de code veranderen we de class van de oneven reacties en op die manier kun je ze in CSS opmaken.

<?php /* Verandert iedere oneven reactie in een verschillende class */
if ('alt' == $oddcomment) $oddcomment = ";
else $oddcomment = 'alt';
?>

In het voorbeeld is een witte lijn geplaatst tussen de reactie en de metadata van de reactie om deze visueel te scheiden. Deze regel kun je natuurlijk zonder probleem weghalen als je dat wenst.

<div style="border-bottom:1px solid #fff;"></div>

Als je wat beter naar de code kijkt zie je dat ieder deel van de ‘comments’; een eigen class heeft. Hiermee kun je in style.css elk onderdeel aanpassen. Bijvoorbeeld met de volgende code (plakken in style.css dus!):

/* Comments */
.comments-template {text-align:left;}
.comments-template ol {margin:0;padding:0 0 15px;list-style:none;}
.comments-template ol li {margin:10px 0 0 0;padding:0;color:#111;background:#e8e8e8;font-size:10pt;}
.commentlist li.alt {background:#c7c7c7;}
.comments-template h2, .comments-template h3 {font-family:tahoma,sans-serif;}
.commentmetadata {padding:5px 10px 5px 10px;font-size:8pt;}
.comments-template p.nocomments {padding:0;}
.comments-template textarea {font-family:tahoma,sans-serif;font-size:10pt;}
/* End of comments */

Voor de even reacties gebruik je deze regel:

.comments-template ol li {margin:10px 0 0 0;padding:0;color:#111;background:#e8e8e8;font-size:10pt;}

Voor de oneven reacties:

.commentlist li.alt {background:#c7c7c7;}

De oneven reacties erven de attributen van de even reactie class, je hoeft dus alleen wat anders is te veranderen, in dit voorbeeld hebben we alleen de achtergrond aangepast de rest is hetzelfde als bij de even reacties.

De eerste regel gebruik je om het hele reactiegedeelte van stijlen te voorzien. De tweede is voor de lijst.

.comments-template {text-align:left;}
.comments-template ol {margin:0;padding:0 0 15px;list-style:none;}

De headers verander je met:

.comments-template h2, .comments-template h3 {font-family:tahoma,sans-serif;}

Comments’ metadata wordt aangepast met:

.commentmetadata {padding:5px 10px 5px 10px;font-size:8pt;}

Stijl als er nog geen reacties zijn:

.comments-template p.nocomments {padding:0;}

En tenslotte de textarea aanpassen met

.comments-template textarea {font-family:tahoma,sans-serif;font-size:10pt;}

De sidebar

We komen steeds dichterbij ons einddoel om een eerste WordPress template te maken. Er is nog een belangrijk
onderdeel over namelijk de sidebar, het zij-blok. Iedere blog moet gestructureerd en gebruiksvriendelijk zijn
in de navigatie. Het is feitelijk vrij eenvoudig te maken, een paar functies aanroepen en een paar regels css
code toevoegen en klaar ben je.

De dynamische sidebar

Laten we beginnen met een ongeordende lijst, ul. Open de pagina ‘sidebar.php’ en vul het volgende in:

<div id="sidebar">
<ul>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>
 
// Hier plaatsen we alle andere code
 
<?php endif; ?>
</ul>
</div><-- close sidebar -->

De twee regels tussen <ul> en </ul> maken er een dynamische sidebar van, een zogenaamde
‘widget’-geschikte sidebar. Hiermee kun je de sidebar vanuit je admin gedeelte gemakkelijk organiseren. Door in het
stijlblad de volgende code toe te voegen: ul,li {list-style:none;}, zorgen we ervoor dat er geen
rondjes of vierkantjes in de opsomming komen te staan. Wellicht wil je er later je eigen plaatje aan toevoegen…

Categorieën

Het eerste onderdeel van de lijst bevat categorie of onderwerpen. De code /* Function _e('Onderwerpen') geeft op je webpagina het woord ‘Onderwerpen’ weer.

<li><h2><?php _e('Onderwerpen'); ?></h2>
<ul>
/* Deze functie roept de lijst met onderwerpen of categorie&euml;n op en geeft dat weer */
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0?'); ?>
</ul>
</li>

De functie ‘wp_list_cats()‘ bevat een paar onderdelen. De uitleg:
sort_column=name – Links naar onderwerpen in alfabetische volgorde
optioncount=1 – Geeft het aantal posts weer na ieder onderwerp (verander ‘1’ in ‘0’ om de nummers niet weer te geven)
hierarchial=0 – Sub-onderwerpen worden niet weergegeven in sub lijst items. (verander ‘0’ in ‘1’ om de functie aan te zetten)

Archief en blogroll

Wanneer je het maand archief wilt tonen plaats je de volgende code onder de categorieën:

<li><h2><?php _e('Archives'); ?></h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>

Nu de links in de blogroll. Een blogroll is het onderdeel waarbij je de links plaatst naar andere websites die
gerelateerd zijn aan jouw website, of die je gewoon als link wilt opnemen. De code:

<li>
<ul>
<?php get_links(-1, '<li>', '</li>', ' - '); ?>
</ul>
</li>

Meta Tags

Bij de metatags vind je een link om je te registreren, on in te loggen of uit te loggen en een link naar het
administratiepaneel. De code hiervoor is als volgt:

<li><h2><?php _e('Meta'); ?></h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
</li>

Overigens hoef je geen metatags in je sidebar op te nemen. Je kunt altijd inloggen door http://jouwblog.nl/wp-login.php te typen.
Dat is alles voor de zijkant, de sidebar. Hieronder voor het gemak nog even de complete code:

  1. <div id="sidebar">
  2. <ul>
  3. <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>
  4. <li><h2><?php _e('Categories'); ?></h2>
  5. <ul>
  6. <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0?); ?>
  7. </ul><br />
  8. </li>
  9. <li><h2><?php _e('Archives'); ?></h2>
  10. <ul>
  11. <?php wp_get_archives('type=monthly'); ?>
  12. </ul>
  13. </li>
  14. <li>
  15. <ul><br />
  16. <li><h2><?php _e('Blogroll'); ?></h2></li>
  17. <?php get_links(-1, '<li>', '</li>', ' - '); ?>
  18. </ul><br />
  19. </li>
  20. <li><h2><?php _e('Meta'); ?></h2>
  21. <ul>
  22. <?php wp_register(); ?>
  23. <li><?php wp_loginout(); ?></li>
  24. <?php wp_meta(); ?>
  25. </ul>
  26. </li>
  27. <?php endif; ?>
  28. </ul>
  29. </div><!-- close sidebar -->

Horizontale Navigatie

Wanneer je een horizontale navigatie wilt hebben in de header moet je het volgende doen:
1. Open header.php en zoek de code <div id="nav"> en </div><!-- close nav --> op.
2. Zet tussen de divs de volgende code: <?php wp_list_pages('title_li='); ?>
3. Ga nu naar het style.css bestand.
4. Voeg de volgende code toe om ervoor te zorgen dat de lijst horizontaal wordt in plaats van de standaard verticale lijst.

ul,li {list-style:none;}
#nav ul li {display:inline;padding:2px 10px 2px 10px;}
.entry {margin-bottom:20px;} /* Eenvoudige toevoeging om posts te scheiden op de idexpagina */

Door de padding in bovenstaande code wordt de navigatie niet te vol.

Footer

Meestal staat er wat copyright informatie en eventueel een link in de footer, het onderste stuk van de website. Je
kunt er ook een sitemap plaatsen als je dat van belang vindt. Open het bestand footer.php en plaats de volgende code. Hierbij hebben we gekozen om er alleen wat copyright informatie te plaatsen.

<div id="footer">
Copyright &copy; 2009 <?php bloginfo('name'); // Functie bloginfo('name') roept de naam op van je blog ?>
</div><!-- close footer -->
</div><!-- close wrapper -->
</body>
</html>

Hiermee is je eerste template klaar!

Ga naar het administratiepaneel en activeer je template. Er is natuurlijk nog genoeg te doen, maar de basis ligt klaar.

In de toekomst zullen we trips en trucs geven om een en ander nog eens te veranderen.

Ik geloof je heus wel!

Je zit echt niet te wachten op weer een saaie nieuwsbrief...
Met allerlei oninteressante informatie.
Maar echt, als je mijn mails probeert, dan beloof ik je te helpen met de zoektocht naar jouw perfecte niche! Zodat jij een website kunt maken rond jouw favoriete onderwerp of idee!
En je krijgt meteen toegang tot mijn gratis downloads. Proberen? Meld je hieronder aan!

7 reacties

  1. Lara schreef:
    2 januari 2014 om 22:40

    Wat bedoel je in de voorbereiding met: 'deze open je in de folder van wordpress'? Bedoel je dat je hem bij thema's moet installeren bij wordpress, want dat lukt niet. En nog iets anders (ik ben hier nog niet echt goed in) als ik het style.css docement wil open, opent het in een internetpagina, ik neem aan dat dat de bedoeling is, maar waar moet ik de tekst dan plakken? Veder een hele duidelijke uitleg!

    Beantwoorden
    • Youri schreef:
      3 januari 2014 om 14:13

      Hiermee wordt bedoeld dat je hem op de server via een FTP programma kunt uploaden in die map. Verder moet je het .css file openen in een tekstverwerker om hem te kunnen aanpassen.

      Beantwoorden
  2. manon schreef:
    16 januari 2014 om 16:40

    misschien een suffe vraag, maar als je zegt 'plak in je stylesheet' maakt het dan nog uit waar je het plakt? of gewoon onderaan is goed?

    Beantwoorden
  3. Chris schreef:
    2 maart 2014 om 18:02

    Hallo,

    Ik wil zelf een thema maken voor een wordpress webwinkel. In deze webwinkel wil ik geen blog of commentaar, welk deel of delen moet ik dan weg laten. Alvast bedankt en hopelijk hoor ik snel iets van u.

    Groet,
    Chris.

    Beantwoorden
  4. Jans schreef:
    5 juni 2014 om 18:52

    Is het ook legaal om een gekocht theme aan te passen?

    Beantwoorden
  5. Ineke schreef:
    3 april 2018 om 16:45

    Hallo Bjorn,
    Fijn dat je dat zomaar met ons wil delen.
    Ik zou je aanraden de lijst met bestanden, header en footer etcetera gewoon allemaal ingevuld geven, en deze uitleg als extra.
    Dan komen er minder vragen.
    Zoals waar moet je dat “get content” zetten ? In de header? In de body?
    En meer van deze beginners-vragen. want ik ben ook een wordpress beginner.
    Dat zou fijn zijn!
    Groet, Ineke

    Beantwoorden
  6. Chris schreef:
    29 oktober 2019 om 00:40

    Hallo,
    Word er nog steeds aan deze site gewerkt. Dit omdat het mij niet lukt om een werkend thema voor wordpress te maken.
    Mvg,
    Chris.

    Beantwoorden

Geef een reactie

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