Kop 1

WP thema vanaf scratch

Een WordPress thema maken is een fikse klus en er zijn verschillende strategieën om dat aan te pakken.
Één daarvan is te beginnen vanaf niks. Je leert zo goed kennis maken met de Wordpress functies en de manier van werken in zo een thema.
Een andere keuze zou kunnen zijn eerst een complete statische html pagina te bouwen een soort van dummy.html en deze dan langzaam aan dynamischer te maken door de inhoud te vervangen door WordPress-functies.

WordPress heeft een heel uitgebreide documentie. Zou je als developer wilen kennismaken met het fonomeen thema-maken, dan kun je bijvoorbeeld kijken op: Het WP theme handbook: https://developer.wordpress.org/themes/. Ook is er een pagina met alle wp-functies: https://codex.wordpress.org/Function_Reference voor het geval je ergens wat code tegenkomt en wil ontdekken wat dat betekent en wat er meer mogelijk is.

Opdracht

Maak een eigen thema voor WordPress.
Het thema bevat tenminste:

• een header met een achtergrondafbeelding;
• footer.php, die een widget bevat;
• single.php;
• page.php;
• category.php waarin te zien is om welke category het gaat;
• search.php;
• functions.php;
• 2 widgetgebieden;
• gestyled menu vanuit Bootstrap

Er is ook een oudere versie van deze opdracht te vinden.

WP thema vanaf scratch 0: WP op local host (00:10:23)

Omdat bij het ontwikkelen van je WP-thema veel getest moet worden, is het praktisch deze op de local host te installeren.
Je hebt natuurlijk al vel berichten en pagina's gemaakt, maar je ziet hier ook hoe je die dan naar jouw lokale WP overbrengt.

1. Allereerst download je WordPress van https://nl.wordpress.org/download/
2. Pak de zip uit en wijzig de naam in iets dat duidelijk voor je is.
3. Plaats jouw map naast de andere project in htdocs van MAMP/WAMP/XAMMP.
4. Start de server op en maak bij phpMyAdmin een database aan
5. Start jouw WP site en vul de configuratie-gegevens in: de naam van de gemaakt database, root, toot(of leeg veld), en de overige gegevens kunnen hetzelfde blijven.
6. De installatie wordt afgerond door de gebruikers naam en wachtwoord van de site-beheerder aan te maken. Het wachtwoord is niet te achterhalen of te herstellen. Schrijf deze dus op.

Van een eerdere WP-site zijn via het Dashboard -> Gereedschap -> Exporteren je inhoud naar een xml-bestand te exporteren.
Deze export kun je in jouw site importeren: Dashboard -> Gereedschap -> Importeren (wel even de WordPress Importer plugin installeren) in jouw site halen.

WP thema vanaf scratch 1: mapstructuur (00:08:26)

We maken een eigen WordPress thema van nul af aan. Hier gebeurt dat in de local host.
Misschien moet je daarvoor nog een WP-installatie maken en de inhoud vanuit jouw eerdere WP-training importeren.
We kijken eerst waar de thema's in WordPress zijn.
In de map wp-content zit de map themes en elk thema heeft zijn eigen map. We maken dus een map voor ons eigen thema. Daarin maken we index.php en style.css. style.css begint met regels commentaar waardoor WordPress het thema herkent en er meta-informatie uit aan halen.
Het zijn tenminste de Theme Name, Author URI en Version. Documentatie: https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/
In index.php plaats je even wat HTML.
Na het opslaan zie je het thema tussen de andere thema's, kun je gegevens ervan zien en het thema activeren. Dit geeft een heel star resultaat.

WP thema vanaf scratch 2: de WordPress loop (00:09:42)

Om de berichten uit de database te halen, stellen we WP zo in dat de eerste pagina wel de 10 laatste berichten laat zien.
In index.php plaatsen we daarvoor WordPress Loop: Daarmee doorloopt het php-script alle berichten en kun je aangeven wat je er mee wil.

We zien in deze WP-loop een if-statement en een while-lus zonder accolades. Dat kan in PHP, als de statements maar met een endif en een endwhile worden afgesloten.
De loop is ingepakt in een if-conditinonal, die vraagt of er wel berichten zijn.
Dit kan met de functie have_posts(), die dan true of false geeft.
De if kan met een else voor een alternatieve tekst komen en met een endif; worden afgesloten.

Bij een true in het if-statement zullen alle berichten worden doorlopen met een while-lus.
Deze staat tussen while( have_posts ) : the_post() en endwhile;
Daartussen kun je vertellen wat je met elke bericht wil.
In dit voorbeeld werken we met html en php om de title van het bericht in een h3-element uit te voeren met daaronder de inhoud.
De titel van een bericht wordt gehaald met the_title(); en de inhoud met the_content();

Kortom de basis-wp-loop is:

          <?php if ( have_posts() ) : ?>
             <?php while ( have_posts() ) : the_post(); ?>
              ... voer de inhoud van de post uit...
             <?php endwhile; ?>
          <?php endif; ?>
          

Documentatie:
https://tussendoor.nl/handleidingen/wordpress-theming/snippet-wordpress-cheat-sheet
en
https://developer.wordpress.org/themes/basics/the-loop/

WP thema vanaf scratch 3: de header en footer (00:10:52)

Met the_excerpt(); kan de inhoud verkort worden weergegeven.
Met the_permalink(); kunnen we van elke kop in het overzicht een linkje maken naar het betreffende bericht.

Om een header en footer te maken voegen we de WP-functies get_header(); en get_footer(); toe.
Als header.php en footer.php er niet zijn, maakt WP daar een default invulling bij.
We willen deze natuurlijk zelf maken en maken dus wel header.php en footer.php aan.
Vanuit een standaard dummy-pagina plaatsen we de header en de footer mark-up. Het werkt vergelijkbaar met include(); of require(); bij PHP, maar ze bevatten nog extra functionaliteit, vooral in het geval er geen header.php of footer.php bestaan (je geeft ze ook niet als argument mee).

In de header vervangen we de statische inhoud met dynamische data uit de database. Daarvoor gebruiken we:

• bloginfo('name');
• bloginfo('url');
• bloginfo('language');
• bloginfo('stylesheet_url');
• bloginfo('template_url');

Bloginfo heeft dus verschillende opties, die je allemaal hebt ingevuld onder de Dashboard -> Instellingen -> Algemeen Daarbij kun je de eigenschappen van de karakterset meegeven met bloginfo('charset'); en het lang-attribuut van het html-element met language_attributes().

WP thema vanaf scratch 4: header en footer afmaken (00:10:24)

De footer kan dynamisch worden voorzien van de maker met the_autor();. Het jaar kan met een echo van date('Y');

Met wp_head(); markeer je de plek waar stijlbladen en scripts kunnen worden toegevoegd. Ze moeten vlak voor het afsluiten van het head-element.
Door het h1-element van een link te voorzien wil je dat de gebruiker terugkeert naar de homepagina. Het href-attribuut krijgt de dynamische waarde. Via php echo je home_url();

In de footer roep je met de WordPress-functie wp_footer(); verschillende scripts aan, die de admin-balk bovenaan het document plaatst.
Hierdoor kan de beheerder het Dashboard weer bereiken.

WP thema vanaf scratch 5: stijlblad koppelen (00:10:52)

Als we CSS eigenschappen aan het style.css toevoegen is er geen effect. Het stijlblad moet eerst worden gekoppeld. Dat gaat ook dynamisch in functions.php.
Dit maken we eerst aan. Het lijkt in eerste instantie wat omslachtig, maar je maakt hier 1 centrale plek waar alle koppelingen met opties kunnen worden ingesteld.

We maken daar een functie met een naam, die bij jouw thema past. Daarin de opdracht om het stijlblad te koppelen met de functie wp_enqueue_style();
Het eerste vereiste argument is een string, die de naam van het stijlblad bevat. In ons geval 'style'. Het tweede argument, dat wij gebruiken, is de plaats waar dit bestand is. Wij doen dit met de functie get_stylesheet_uri(); Zie: https://developer.wordpress.org/reference/functions/wp_enqueue_style/

Hierna moet -zoals je als developer weet- de functie nog worden aangeroepen.
Dit doe je met add_action();
Het eerste argument is en string 'wp_enqueue_scripts'. Wordpress-developers noemen dat een 'hook', die zowel scripts als stijlbladen koppelt en aangeeft wanneer de koppeling plaatsvindt.
Het tweede argument, welke ook een string is geeft welke functie de opdrachten bevat. Ik vergelijk het maar met een event-listener, die in JavaScript een functie aanroept.
Documentatie: https://developer.wordpress.org/themes/basics/including-css-javascript/

WP thema vanaf scratch 6: WordPress menu's (00:09:43)

In het Dashboard is er nog gen toegang tot het beheer van de menu's.
Om dat voor elkaar te krijgen moet je in functions.php de menu's eerst registreren.
Dat doe je met register_nav_menus();
Het argument is een associatieve array, zodat je veel meerdere menu's kunt meegeven.
Hier wordt er 1 menu geregistreerd. Je geeft hem een naam en een weergave-naam voor in het Dashboard.

Codevoorbeeld:

function register_mijn_menus() {
  register_nav_menus(
    array(
      'hoofd-menu' => __( 'Hoofd menu' ),
      'extra-menu' => __( 'Extra menu' )
      )
    );
  }
add_action( 'init', 'register_mijn_menus' );

Daarna moet je in jouw template het menu ook weergeven met wp_nav_menu();
Ook hier een array als argument voor meerdere opties. Wij gebruiken daarvan de theme_location en als waarde de naam van het geregistreerde menu.
Documentatie: https://developer.wordpress.org/themes/functionality/navigation-menus/

een codevoorbeeld:

wp_nav_menu( array( 'theme_location' => 'hoofd-menu' ) );

Hierna kun je in het Dashboard het menu toevoegen en aanpassen.

WP thema vanaf scratch 7: tussenresultaat op GitHub (00:10:52)

Er is al een redelijk tussenresultaat en dan ontstaat de noodzaak voor een commit op GitHub.
Er wordt een README.md document gemaakt met daarin de naam van deze training.
Je plaatst een link naar de online versie van jouw WP-site. (je kunt je thema daar al naar uploaden en activeren.)
Je maakt een repositry aan op GitHub.
In de commandline (Terminal dan wel opdracht-prompt) ga je met de volgende opdrachten de commit pushen:

git init
git add -A
git commit -m "menu toegevoegd"
git remote add origin https://github.com/Theo-denBlanken/WPtrainingThema.git
git push -u origin master

Volgende commits kunnen via pijltjes-toetsen dan eenvoudig worden opgeroepen:

  git add -A
  git commit -m "nieuwe feature"
  git push -u origin master

Tot slot wordt in ons thema het dynamische menu voor de semantiek nog in een nav-element geplaatst.

WP thema vanaf scratch 8: Bootstrap bemachtigen (00:06:06)

Voor de vormgeving zouden we met Bootstrap willen werken en liefst een afgeslankte en aangepaste versie van deze library.
Daarvoor open ik een oud project in mijn IDE en laat Sass weer watchen. De stijlregels, die ik niet nodig heb evenals de imports die ik niet verwacht te gebruiken verwijder ik.
Na compilatie kopieer ik de gecompileerde css en maak in mijn thema-map een stijlblad waar ik die opmaak in plak.
Vervolgens maak ik de wijzigingen in het bootstrap-project ongedaan, compileer weer zodat daar alle weer bij het oude is, en sluit dat project af.

WP thema vanaf scratch 9: Bootstrap koppelen (00:05:49)

Om het extra stijlblad te koppelen, gaan we terug naar functions.php.
Daar wordt al een stijlblad gekoppeld en die kan met een extra regel worden aangevuld.
We gebruiken dus weer een wp_enqueue_style() maar het pad kan niet direct. Gebruik een combinatie van en functie, die naar de thema-map leidt, en plak daar de rest van het pad als string aan vast:
get_template_directory_uri() . '/css/bootstrap.css'

We kunnen Bootstrap dan ook meteen inzetten door de jumbotron-component in te zetten.
De documentatie daarvan vind je bij https://getbootstrap.com/docs/4.5/components/jumbotron/

WP thema vanaf scratch 10: Bootstrap menu (00:09:26)

Om het het menu, met al zijn classes van Bootstrap-class-namen te voorzien, maken we gebruik van een nav-walker. Het is een php-class, die het menu doorloopt en class-namen aanvult, zodat de vormgeving door Bootstrap loopt.
De repo op https://github.com/wp-bootstrap/wp-bootstrap-navwalker is voorzien van een goede gebruiksaanwijzing: eerst class-wp-bootstrap-navwalker.php aan jouw thema-map toevoegen en deze in functions.php met require_once binnenhalen.
Vervolgens in jouw register_nav_menus() de array van argumenten aanvullen.
En hetzelfde met de array in wp_nav_menu(): ook daar krijgt array als argument een fiks aantal items...

WP thema vanaf scratch 11: scripts laden (00:06:10)

Het dropdown-menu in de Bootstrap-menu werkt niet, omdat daarvoor een JavaScript van Bootstrap nodig is.
Deze wordt daarom gedownload en aan het thema toegevoegd.
Het koppelen gaat weer via script in functions.php.
Het kan worden toegevoegd aan de lijst van te laden stijlbladen.
Die wordt uitgebreid met met wp_enqueue_script(); en we kunnen dus spreken van het laden van stijlbladen en scripts.
wp_enqueue_script() heeft 5 argumenten:

1. de naam die je aan het script geeft;
2. de plaats in jouw thema-map van het script;
3. de afhankelijkheden van dit script: als het andere scripts nodig heeft, dan moeten die eerst geladen worden. Dit is een array, omdat er meerdere scripts nodig zouden kunnen zijn.
4. het versienummer van het script: type is nummer, dus geen string
5. de plaats waar je dit script wil geven. In Bootstrap wordt deze voor het sluiten van de body gezet en daarom is de boolean hier true.

WP thema vanaf scratch 12: afbeelding in de header (00:10:22)

De jumbotron kan worden voorzien van een achtergrondafbeelding. We kunnen niet de url in de CSS invoeren, maar wel in header.php een inline stijl toevoegen, met een stukje PHP die de locatie in de thema-map geeft.
De afbeelding is dus in de thema-map geplaatst.
Met echo get_template_directory_uri() . '/img/bg.jpg' geven we dan de locatie op.
De overige stijlopmaak kan dan wel weer in de style.css toegevoegd worden.

WP thema vanaf scratch 13: lay-out met Bootstrap (00:13:20)

Om de overige delen van de pagina gelijk te laten inspringen zoals in de navigatie, krijgen ze daarbinnen ook een element, die de class container krijgt.
Dat gebeurt met de jumbotron, de footer en de main.
De structuur van de footer wordt zo aangepast, dat er geen div-element meer in een small element komt.
Door de toevoeging van classes als bg-primary en text-white, krijgt de footer dezelfde kleurstelling als de navigatiebalk.
De hoofdinhoud, komt een in container en het main-element krijgt zelf de class .col-md-8 mee.
Daarnaast komt een aside met class .col-md-4 zodat ze de breedte verdelen in een verhouding van 2:1. Met een eigen tint op de achtergrond is het resultaat goed te zien.

De hele footer krijgt met wat padding wat meer ruimte.
Om de opmaak meer structuur in je editor te geven, selecteren we een stuk tekst en gebruiken de uitbreiding Beautify om de inspringing te laten zien. Opgeroepen met command-Shift-P en daarna is Beautify-selection geselecteerd en moet ik de extensie helpen door aan te geven dat het om HTML-opmaak gaat.

WP thema vanaf scratch 14: validatie en commit (00:01:56)

Voer de broncode van jouw pagina in op https://validator.w3.org/#validate_by_input van W3C.
Als de validatie in orde is plaats je met 3 opdrachten op de CLI jouw commit op GitHub!

WP thema vanaf scratch 15: widget plaatsen (00:10:06)

Het plaatsen van widget heeft veel overeenkomsten met het plaatsen van een menu.
Eerst registreren, daarna plaatsen.
Registreren gebeurt in functions.php, waar je een functie maakt die in zijn opdracht het widget registreert.

De opdracht gaat met register_sidebar(). Daarbij zijn veel argumenten nodig, vandaar dat dit met een array moet. In ieder geval is een id (géén hoofdlettters toegestaan!!) en een naam vereist.
Daarnaast kun je een beschrijving en de html doorgeven, die je voor en achter het widget wenst.
Ook de titel kan de html krijgen, die je zelf wenst.

Na deze registratie verschijnt het widget in het Dashboard, en kun je daar van alles in stoppen.
Dan moet op de gewenste plaats in jouw template het widget worden geplaatst. Dat kan met de WordPress functie dynamic_sidebar( '' ); Deze heeft één argument, namelijk de id van het geregistreerde widget.

WP thema vanaf scratch 16: tweede widget plaatsen (00:10:16)

Een extra widget is eenvoudig te registreren door de register_sidebar() te herhalen en met andere waarden in het array dat argument van deze functie is.
Om hem hier in de footer weer te geven, is weer dynamic_sidebar( '' ); gebruikt met de passende id als argument.
Doordat we bij het registreren van de widgets classes hebben toegevoegd aan het widget en de titel, kunnen we voor het stijlen eenvoudig selecteren.

WP thema vanaf scratch 17: single.php (00:02:33)

Als we een bericht gaan weergeven, zien we nog telkens alleen de samenvatting en heeft de kop nog steeds een link in dit geval naar zichzelf.
Dit komt omdat voor de weergave van dit bericht gebruik gemaakt wordt van het template index.php uit mijn thema.
Je kunt echter index.php opslaan als single.php en daar aanpassingen maken voor de weergave van een enkel bericht.
We vervangen daar de the_excerpt() door the_content() en halen de link in de kop weg.

WP thema vanaf scratch 18: aside stijlen (00:08:05)

Het stijlen gebeurt door CSS, maar natuurlijk ook door het toevoegen van classes voor Bootstrap.
Daarom is het goed dit goed voor elkaar te hebben, voordat je meerdere templates voor jouw thema gaat afleiden. Anders moet je een wijziging in elk template apart gaan bijwerken.
Er wordt dus een class toegevoegd in index.php en in single.php.
Verder wordt de tekst voor screenreaders verwijderd en wat padding toegevoegd in het stijlblad. Dit om de verschillende widgets beter als losse widgets te zien.
Ook wordt de fontgrootte van de koppen wat teruggebracht.

WP thema vanaf scratch 19: screenshot (00:06:31)

Voor de weergave van het thema voegen we eerst nog een logo toe aan de navbar.
Deze staat in de img-map van ons thema en we kunnen deze dus koppelen met get_template_directory_uri() en koppelen naar de startpagina met echo home_url(). Volgens https://codex.wordpress.org/Theme_Development#Screenshot is het optimaal als je een png-afbeelding maakt van 1200px bij 900px. Geef deze de naam screenshot.png en plaats deze in de root van jouw thema.
Bij de weergave van het thema zal deze afbeelding de gebruiker kunnen uitnodigen om jouw thema eens uit te proberen.

WP thema vanaf scratch 20: posts in 2 kolommen (00:09:01)

In de pagina, waar een overzicht van de blog-items staan, willen we de blog-items naast elkaar.
Dit kan door het handig toevoegen van extra elementen met de bijpassende Bootstrap-classes in index.php.
De container maken we fluid, zodat deze de breedte helemaal gebruikt.
De verhouding van main en aside is 8:2 en die verbreden we voor de main: de verhouding wordt 9:3. De main is een kolom, maar wordt daarnaast ook weer container, zodat er een genest grid van Bootstrap komt. Daarin een div-element met de class row en vervolgens om elke post een div met de class col-md-6, zodat er 2 kolommen in de main komen.
Voeg ook nog wat p-4 classes toe om meer tussenruimte te creëren.

Bij weinig inhoud in een bericht blijkt de footer lelijk te gaan hangen. Daarvoor voegen we css toe aan de body.
Het krijgt een display: grid met een grid-template-rows waarbij de waarde auto 1fr auto is. De header en footer krijgen de hoogte die ze nodig hebben en de resterende ruimte is voor de tussenliggende container.
Geef de body wel een minimale hoogte van 100vh, want dat heeft hij niet vanzelf en dan zou de grid-truc helemaal niet werken.

WP thema vanaf scratch 21: Google-webfont in thema (00:05:43)

Door het teovoegen van de p-4 class hebben de berichten wat meer padding, zodat ze er beter als losse berichten uit komen te zien. (wordt niet in de video gecodeerd.)

Het karakter van jouw thema wordt sterk door het font beïnvloed.
Kies daarom een eigen font van https://fonts.google.com/
In functions.php kunnen we het font importeren in de functie die het stijlblad koppelt.
We voegen een nieuw wp_enqueue_style(); opdracht toe. Het heeft 2 argumenten: een id, en de url naar het font. Beide zijn strings. Het eerste argument wordt een echte id in de markup, dus je kunt beter geen spatie gebruiken zoals in de video gebeurd!
Kies iets met themaNaamFonts.
Het tweede argument is en url naar het font op de Google-site, dus iets als: '//fonts.googleapis.com/css?family=......' .
De dubbelel slash aan het begin maakt het mogelijk de verwijzing zowel van een http-site als van een https-site te laten werken.
Hierna moet je in de CSS de betrokken elementen die het lettertype nodig hebben met de eigenschap font-family het font toewijzen.

WP thema vanaf scratch 22: screenshot, valideren, pushen (00:03:31)

De nieuwe layout nodigt uit om een nieuwe screenshot.png te maken.
Ook zal na deze operaties gekeken moeten worden of er nog valide mark-up gemaakt wordt.
Dit blijkt niet het geval, omdat de id een spatie heeft gekregen.
Dat moet dus hersteld, waarna er opnieuw gecontroleerd wordt en bij succes de repositry op GitHub weer bijgewerkt wordt.

WP thema vanaf scratch 23: pagina template (00:02:51)

De weergave van een pagina heeft de kenmerken nog de kenmerken van de weergave van alle blogposts. Dat komt omdat index.php als template gebruikt wordt voor het weergeven van de pagina.
We maken heel snel een template voor het weergeven van pagina's door single.php op te slaan als page.php.
Omdat de pagina's nu goed worden weergegeven, kan de site weer zo worden ingesteld dat de site start met een van de statische pagina's.
Dat loopt in het Dashboard via Instellingen => Lezen.

WP thema vanaf scratch 24: reacties weergeven (00:09:35)

WordPress is van oorsprong een blogsysteem en dus hebben ze nog alle mogelijkheden voor het plaatsen en weergeven in hun functies.
Op https://developer.wordpress.org/themes/template-files-section/partial-and-miscellaneous-template-files/comment-template/ vind je de start documentatie.
In single.php plaatsen we in php de conditional om te kijken of er reacties moeten worden weergegeven. In dat geval wordt met comments_template(); het template voor het weergeven van reacties opgeroepen.
Je schrijft dit template in comments.php.
Daarin kun je natuurlijk html laten uitvoeren maar in ieder geval het formulier met comment_form();
De reacties met wp_list_comments();
De weergave hangt er ook vanaf of de auteur in de instellingen bij het opstellen van het bericht dit toegelaten heeft.

WP thema vanaf scratch 25: meta-data van berichten (00:09:57)

Om de meta-data van een bericht weer te geven maken we daar in single.php een andere layout. De Bootstrap classes worden aangepast en toegevoegd, zodat main.php 2 kolommen krijgt en kan weergeven.
De meta-data kunnen binnen een WP-loop worden opgeroepen met

• the_author();,
• the_time('j F Y'); en
• the_category();

WP thema vanaf scratch 26: vorig en volgend bericht (00:09:20)

De gebruiker kunnen we ook een link aanbieden naar het vorige of volgende bericht, tenminste als deze bestaan.
WordPress heeft daarvoor de functies get_next_post(); en get_previous_post();
We maken een WP-object door bijvoorbeeld $vb = get_next_post();
We kunnen dan aan het werk gaan als $vb bestaat: if ( !empty( $vb ) )
Dan kunnen we zowel de titel uitvoeren met
echo apply_filters( 'the_title', $prev_post->post_title ); en ook de link naar het artikel met:
echo get_permalink( $prev_post->ID );
Daarmee kunnen we dus een link opbouwen.
Voor een volgend bericht gaat dit op vergelijkbare wijze.
Meer over apply_filters() op: https://kinsta.com/nl/blog/wordpress-hooks/

WP thema vanaf scratch 27: zoekvenster in navbar (00:10:57)

Bootstrap beschikt over een mooie navigatiebalk met zoek venster. Dat willen wij ook.
Om wat ruimte te maken, vervangen we de branding tekst door het logo.
Via de broncode van het zoekvenster in het widget halen we mark-up van het zoekformulier.
Van https://getbootstrap.com/docs/4.5/components/navbar/ halen we de nodige classes op.
Het blijkt dat het dan nog niet helemaal klopt: er blijkt nog wat padding en afgeronde hoeken niet mee te zijn gekomen. Die vinden we via de inspectie van het voorbeeld in Bootstrap.
Door het kopiëren van het formulier blijkt dat we de value van de input ook meegenomen hadden, die maken we dus weer leeg.

WP thema vanaf scratch 28: errors zoekvenster (00:07:01)

Doordat er nu 2 zoekvensters met elk dezelfde id zijn ontstaan er validatiefouten.
We halen de zoekvenster uit de widget weg. We plaatsen daar recente berichten en een RSS feed.
In dit geval een van https://github.com/impressivewebs/frontend-feeds#the-giants.
Door het kopiëren blijkt er bij validatie ook nog een dubbel attribuut gekomen te zijn, die we dan weer terugbrengen. Hierna nog een validatiecheck en een push op GitHub.

WP thema vanaf scratch 29: template zoekresultaten (00:10:08)

Voor de zoekresultaten wordt to nu toe index.php gebruikt om deze weer te geven.
Om de gebruiker extra feedback te geven maken we hiervoor uit index.php het template search.php.
Daar wordt dan een kop aan toegevoegd waarin de gebruiker te zien krijgt dat hij zoekresultaten ziet.
Daarvoor gebruiken we dan get_search_query();
Ook het else statement in de WordPress-loop geeft dan weer dat er bij een zoek-actie geen berichten zijn. Hier is het nog belangrijker dat de gebruiker ziet welke zoekactie is uitgevoerd.
Om alle berichten goed weer te geven, wordt het menu nog iets aangepast, zodat het menu-item Blog niets anders doet dan het sub-menu openen en daarbinnen een item 'Alle berichten' te vinden is voor alle blog-items.

WP thema vanaf scratch 30: tags bij een bericht weergeven (00:07:11)

Om in single.php ook de geplaatste tags bij het bericht weer te geven, zoeken we in de documentatie naar de WP-functie daarvoor: https://codex.wordpress.org/Function_Reference/get_the_tag_list.
We kunnen eenvoudig de return van get_the_tag_list(); gebruiken. Je krijgt een lijst met de tags en hun koppelingen terug en je kunt zelf aangeven welke mark-up er aan de lijst voorafgaat en welke deze afsluiten en welke markup de gevonden linkjes scheidt.
Dat gaat in deze functie met parameters, die je vooraf kunt definiëren en een waarde geven.

WP thema vanaf scratch 31: template hiërarchie (00:07:11)

Om bezoekers te informeren welke berichten bij een categorie of tag horen, maken we aparte templates.
Op https://developer.wordpress.org/files/2014/10/Screenshot-2019-01-23-00.20.04.png is te zien, hoe WordPress de eventueel gemaakte templates inzet voor de weergave van de verschillende situaties. Lees het schema van links voor de verschillende mogelijkheden en als er dan een template gemaakt is, wordt deze gebruikt. Als het template ontbreekt, dan kost WordPress een template dat rechts daarvan voorkomt.
Je volgt de lijn net zo lang tot je hem vindt. Desnoods beland je bij index.php en deze is natuurlijk aanwezig in elk thema.

Als voorbeeld maken we nog een template aan voor het weergeven van categorieën. Een speciale versie van de archiefpagina's.
De wensen lijken op die van search.php, dus we slaan dit template op als category.php.
De inleidende tekst wordt aangepast en om de naam van de categorie van de weergegeven berichten te krijgen gebruiken we single_cat_title();. Zie: https://developer.wordpress.org/reference/functions/single_cat_title/

Voor het tag-template maken we tag.php en de titel van het archief maken we met echo get_the_archive_title(); Het archief is een hogere classe van tag- of categorie. Het kan een hele reeks van resultaten weergeven als je daar nog geen template van gemaakt had.

Bonusopdracht

Hebt een keuze uit:

• Voeg nog een extra widgetgebied toe in de footer en plaats daar widgets naar keuze in.
• Maak een template die alleen voor de voorpagina geldt. Je mag de inhoud zelf helemaal zelf bepalen. Je kunt bijvoorbeeld het aside verwijderen. De inhoud kan zelfs statisch zijn, dus zonder WP-loop, maar de keuze is aan jou.
• Berichten kunne een uitgelichte afbeelding hebben: Featured image. Voeg deze aan jouw thema toe. Instructie zou je kunnen zien op: https://www.youtube.com/watch?v=DJrGP9X2_bQ

Inleveren

• Na afloop plaats je deze training online in je bewijzenmap;
• Valideer jouw pagina's op Markup Validation Service van W3C.
• De validatie icoontjes staan al in de footer. Code vind je bij https://github.com/Theo-denBlanken/validatie-W3C;
• Plaats jouw thema-map op in een aparte repository op GitHub en activeer jouw thema op de online versie;
• Maak in jouw GitHub-repo een README.md met daarin temnminste een link naar jouw online WP-site.
• Plaats de GitHub-link in ELO Magister bij de CMS-opdracht eigen thema.
  Als het goed is is dit al na filmpje 13 gebeurd. Vergeet nu dus niet de aanvullingen te committen.