Sander Kop Portfolio

Niveau van product

Omdat mijn klanten graag zelf content wijzigen op hun website, maak ik veel gebruik van wordpress. Normaal gesproken kies ik een bestaand wordpress thema dat qua functionaliteit aansluit op de wensen van mijn klant en pas ik het uiterlijk aan middels een child theme. Een child theme zorgt ervoor dat ik de css van het thema kan aanpassen en dat ik php functies kan toevoegen, zonder wijzigingen te maken aan het thema zelf. Dat is wel zo handig, aangezien je op deze manier je wijzigingen aan het thema niet kwijtraakt wanneer het betreffende thema een update heeft en mijn klanten deze update uitvoeren.

Ik wil echter al een tijdje mijn eigen wordpress thema’s maken, zodat ik niet meer afhankelijk ben van andermans thema’s en code opbouw. Naamgevingsconventies, html structuur, css opmaak, php functies, ze verschillen van thema tot thema. Het grootste voordeel dat dit me geeft is dat ik mijn eigen framework kan opzetten, wat me een hoop tijd gaat besparen in de toekomst doordat ik een vaste manier van werken hanteer.

Ik heb daarom besloten om voor mijn portfolio site een wordpress thema te maken.

Hoe ben ik te werk gegaan?

Allereerst heb ik Bootstrap gebruikt om de html structuur en de css styling mijn thema te op te bouwen.

vervolgens heb ik wordpress geïnstalleerd op mijn server en een thema folder aangemaakt, met in de root van de folder de bestanden: functions.php, style. css, screenshot.png (dit is de thema afbeelding van hierboven) en index.php.

De thema omschrijving, thema naam, naam auteur, versie en tags zoals te zien in de afbeelding hierboven, zet je als commentaar in het style.css bestand. Ieder wordpress thema dient bovenaan in het style.css bestand te zijn voorzien van dit commentaar.

Opdelen index

Vervolgens heb ik index.php bestand opgedeeld in een Header.php, footer.php en content.php bestand. Ik roep deze bestanden aan in index.php.

The loop

The loop is de naam van de while loop die gebruikt word om content in te laden in wordpress. Je kan the loop enkel op de index.php pagina gebruiken. Omdat ik mijn index.php bestand heb opgedeeld, gebruik ik the loop in het content.php bestand, welke ik weer inlaad in index.php.

Hoe werkt the loop?

Ten eerste wordt er gekeken of er posts zijn. en als deze er zijn, wordt een while loop gestart. deze itereerd door alle posts zolang er posts zijn, dus zolang de functie have_posts() de waarde true geeft.

De the_post() functie haalt deze post vervolgens op en update de post counter. Wanneer er geen posts meer zijn, is het getal in de counter gelijk aan het aantal posts en eindigt de while loop.

De meest eenvoudige versie van the loop is hier onder te zien:

<?php
if ( have_posts() ) {

 while ( have_posts() ) {
 the_post();
 // Post Content here
}
}
?>

Single post pages en front page

In mijn wordpress thema maak ik onderscheid tussen pagina’s met alle posts van een bepaalde categorie en de pagina van de post zelf (single.php).
Dat doe ik door gebruik te maken van een if statement in mijn versie van the loop.

If
Als het een single post pagina betreft, laat ik The_title(), dat is de titel van de blogpost,  zien als <h2> element, genest in een <div> met de bootstrap classes row, centered en mb. En laat ik the_content(), dat is alle content van de post, zien in een <div> met de class theContent.

Else
Voor pagina’s waarop alle posts uit een bepaalde categorie te zien zijn, laat ik de titel van de post zien met de functie the_title() en laat ik de featured image van de post zien met de the_post_thumbnail() functie. De functie the_permalink(), haalt de url van de single post op, ik link met zowel de featured image als de titel van de post naar de single post. Onder de featured image, laat ik met de functie the_excerpt(), de samenvatting van de post zien.

Als laatste content pagina heb ik front-page.php aangemaakt. Dit geeft de mogelijkheid om het uiterlijk van de home pagina te laten verschillen van de andere content pagina’s (index.php en single.php).

Functions.php

Met het bestand functions.php, kan je met de functie add_theme_support() bepaalde functionaliteiten in wordpress, zoals het hebben van een featured image, activeren of dingen doen als een nieuwe afbeeldingsgrootte registreren.

Ook kan je in dit bestand functies toevoegen aan wordpress en functies aanroepen en wijzigen. Dit doe je met behulp van hooks.

Actions en Filters

Er zijn twee soorten hooks in wordpress: actions en filters.  Waar actions worden gebruikt om nieuwe functionaliteiten toe te voegen of verwijderen, worden filters gebruikt om bestaande data te overschrijven voordat het naar de database of browser gestuurd wordt.

Enqueue styles

De eerste hook die ik gebruik is een action om de volgorde van de stylesheets te beinvloeden.

De functie set_excerpt_length()  is een voorbeeld van een filter die ik gebruik om de lengte van een excerpt aan te passen.
Na het declareren van de functie, wordt er met de hook ‘excerpt_lengthgezorgd dat de lengte van een excerpt in wordpress wordt overschreven met de return waarde in de functie, in dit geval zal de excerpt bestaan uit 50 woorden.

Feedback Michiel

Michiel had tijdens een portfolioschouw moment aangegeven dat het onhandig is als je op twee links moet klikken om bij een post uit te komen, wanneer er maar 1 post in een categorie is (home>categorie>post, in plaats van home>post, zie onderstaande afbeelding voor een voorbeeld van deze situatie).

Om ervoor te zorgen dat je direct bij de single post uitkomt, wanneer een categorie maar uit 1 post bestaat, heb ik de action ‘template_redirect’ toegevoegd.

In deze functie wordt er gekeken of er een archive pagina (in dit geval een category) wordt weergegeven. Als dit true is en het aantal posts gelijk is aan 1, dan wordt de wp_redirect() functie gebruikt om de gebruiker te verwijzen naar de permalink (url) van de single post page in kwestie.Op deze manier komt de gebruiker direct bij de single post uit.

Bootstrap navbar 

Omdat ik gebruik maak van bootstrap, wil ik ook gebruik maken van een bootstrap nav. Dit werkt echter niet standaard in wordpress.

Om dit op te lossen heeft Edward McIntyre de wp-bootstrap-navwalker class geschreven.
Ik voeg met require_once() het bestand “wp-bootstrap-navwalker.php” toe en maak gebruik van de register_nav_menus() functie om ervoor te zorgen dat mijn custom menu door wordpress ondersteund wordt.

In het header.php bestand roep ik het menu aan met de functie wp_nav_menu() met als parameter een array met nav argumenten, zoals de class en id die de container moet hebben en een nieuwe instance van de bootstrap walker class.

Na het aanbrengen van de structuur is mijn eigen thema klaar om gevuld te worden met content.

 

© 2017 Sander Kop