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;

WP thema vanaf scratch 1: mapstructuur (00:05:18)

We maken een eigen WordPress thema van nul af aan.
Daarvoor kijken we 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 bizar resultaat.
Je kunt nu naar /wp-admin/ terug door de URL in te voeren of de back-knop van je browser te gebruiken.

WP thema vanaf scratch 2: WordPress Loop (00:06:44)

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 h2-element uit te voeren met daaronder de inhoud.
De titel van een bericht wordt gehaald met the_title(); en de inhoud met the_content();
Om de titel van het blog om te zetten in een link, kun je de link toevoegen met het href-attribuut een dynamische link die gewoon een PHP echo is met als waarde home_url(); Niet tussen quotes want het is geen string maar een returnwaarde van een WP-functie.

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; ?>
    

De documentie WP-loop: https://developer.wordpress.org/themes/basics/the-loop/.

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

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.

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().

Met wp_head() markeer je de plek waar stijlbaden en scripts kunnen worden toegevoegd. Ze moeten vlak voor het afsluiten van het head-element.

WP thema vanaf scratch 4: footer afronden (00:13:43)

Er is al inhoud in de footer geplaatst voor de validatie.
Daarnaast komt dynamisch de naam van het Blog. Dit heb je al eerder gedaan.
Met copyright en de dynamische maker van het blog kan ook het jaartal met de PHP-functie date(); worden gemaakt.
Met wp_footer() markeer je plekken aan waar scripts kunnen worden toegevoegd. Ze moeten vlak voor het afsluiten van het body-element. Een eerste effect zie je al in het terugkeren van de zwarte gereedschapsbalk van het Dashboard.

WP thema vanaf scratch 5: stijlblad koppelen (00:19:47)

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.
Na de koppeling van het stijlblad wordt het document gestyled. Indien nodig worden in index.php nog elementen en classes toegevoegd. Zie ook: https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts

WP thema vanaf scratch 6: achtergrondafbeelding van de header (00:08:36)

Om de berichten beter de onderscheiden wordt er een dubbele streep tussen geplaatst.
Dat kan met border-bottom. Als je dat voor het laatste bericht anders wil, selecteer je dat in de CSS met de pseudoclass :last-of-type.

De achtergrond afbeelding is in een submapje in het thema geplaatst. Als je deze dynamisch wil bereiken kan dat niet in een CSS-bestand. We maken daarom in de header een inline-style. Dan kun je met echo get_template_directory_uri(); de url van je template-map invoeren. Dat vul je aan met het vervolg van het pad in je thema-map en de bestandsnaam.
Als je responsive zou willen werken, dan moet je dit doen in een style-element in de head van jouw document.

WP thema vanaf scratch 7: WordPress menu's (00:19:26)

Een menu in WordPress maak je al eenvoudig met de WP-functie wp_nav_menu();
Dit kan al zonder dat je bij de bewerking van de menu's in het Dashboard kan komen.
De aanwezige pagina's zullen dan getoond worden op de plekken, waar deze functie wordt aangeroepen.
Maar de gebruikers willen het menu kunnen beheren.
Om dit goed zichtbaar te maken wordt het (al aanwezige menu) weggehaald, door even en ontwikkeld thema te selecteren.

Daarvoor geven de functie wat argumenten mee. Als is het nu slechts 1 argument, WP zet dat argument in een associatieve array. Dit ene argument is de 'theme-location' die je vervolgens een toepasselijke string toewijst, die iets over de plaats in het thema zegt.
We maken hier 2 locaties.
Om dat werkend te maken moeten die locaties geregistreerd worden in functions.php.
Daar gebruiken we de functie register_nav_menus().
Deze krijgt ook een associatieve array mee om de verschillende menu's te koppelen aan de plaatsnamen.
Om een menu met de headermenu te koppelen aan de naam 'Menu in header', ziet een array-item er uit als 'header menu' => __('Menu in header'),

Hierna is het menu wel te beheren in het Dashboard en kunnen we 2 verschillende menu's aanmaken: één voor de header en één voor de footer.

  function registreer_mijn_menus() {
  register_nav_menus(
    array(
      'hoofd-menu' => __( 'Menu in header' ),
      'extra-menu' => __( 'Een extra menu' )
     )
   );
 }
 add_action( 'init', 'registreer_mijn_menus' );

Documentatie: https://developer.wordpress.org/themes/functionality/navigation-menus/.

WP thema vanaf scratch 8: Menu opmaken (00:11:26)

Door de functie wp_nav_menu() wordt er dynamisch een menu gegenereerd. Je moet dus via de inspector gaan uitzoeken welke markup er ontstaat en welke classes daarin voorkomen.
Die gebruik je dan om list-style-types te verwijderen, linkjes een display-type te geven, achtergronden, hover-stijlen te maken.
Het list-element van het actieve bericht of actieve pagina krijgt van WordPress de class current-menu-item mee, zodat je die eenvoudig kunt selecteren om deze een aangepast stijl mee te geven.
In het bericht zit een afbeelding in een container, die ervoor zorgt dat de breedte van de viewport niet smal kan worden. Dit is in de volgende video opgelost.

WP thema vanaf scratch 9: Mediaquery voor menu (00:11:55)

Het menu is voor kleine viewports bedacht. Met negatieve marges, steekt het menu over de container, zodat de hele breedte van de viewport gebruikt wordt.
De mediaquery wordt voor bredere viewports gemaakt, de menu-items moeten dan naast elkaar komen. Dit wordt hier met CSS Grid gerealiseerd.
In de footer passen de items dan nog niet naast elkaar. Deze bevatten teveel tekst. Ze zijn met een aparte selector voor de footer te selecteren en krijgen dan een geringer font.

WP thema vanaf scratch 10: submenu verbergen (00:14:41)

Het submenu wordt verborgen en opgelopen met een JavaScriptje.
In de themamap wordt een submap gemaakt met daarin een JavaScript-bestand.
Het script gaat dit submenu verbergen. Dit is verstandiger dan dit direct met CSS te doen. Mocht om wat voor reden dan ook het script niet werken, dan blijft het submenu in ieder geval bereikbaar voor de gebruiker. We nomen dit principe 'graceful degradation'.

Om dit te koppelen aan het thema, gaan we op dezelfde manier te werk als bij het koppelen van het stijlblad. We werken in functions.php zelfs in dezelfde functie, die het koppelen van het stijlblad gebruiken.
Daarin plaatsen we een extra statement: wp_enqueue_script(); Deze heeft 5 argumenten:

1. een string met een 'naam' voor het te koppelen script,
2. de plaats en bestandsnaam van het script. Dit kan met de functie get_theme_file_uri() waar je als argument een string opgeeft van het pad en bestandsnaam van het script binnen de mag van je thema
een array met scripts waar jouw script gebruik van maakt (dependencies zoals jQuery). In dit geval is dat er niet en geven we NULL mee als argument.
3. Een versienummer van jouw script.We geven hier '1.0' mee
4. en tot slot een boolean die aangeeft of jouw script vlak voor het afsluiten van het body-element moet komen of false als deze voor de body geladen moet worden.
   Omdat we in ons script met DOM-elementen werken is het verstandig hier true op te geven.

In het script stoppen we eerst alle items, die een submenu hebben, in een variabele met de het statement document.querySelectorAll(); Om het argument hier te vinden moeten we op zoek in de bron-code die WordPress genereert, of je zoekt door de inspector van je browser. Het blijkt dat het list-item in de navigatie die het submenu heeft, een class heeft met de waarde .menu-item-has-children.

Je verwacht nu een node-list, die bij meerdere submenu's meerdere nods bevat.
We gaan dus met een for-lus door deze node-list heen om alle submenu's met het script elk submenu te verbergen. In de for-loop maak je een variable dit het submenu bevat. Dat is een ul-element en WordPress heeft hieraan de class-naam sub-menu gegeven. We selecteren dit met een .querySelector(); omdat we slechts de eerste willen hebben als er meerdere mochten zijn. Dit element kan je dan met .classList.toggle(); voorzien van een extra class-naam. In het stijlblad kun je dit hard verbergen met een selector, die een display: none; krijgt. Controleer hier of alles werkt.

WP thema vanaf scratch 11: submenu tonen (00:04:22)

Het is de bedoeling dat het submenu weer getoond wordt, als er op de de link, die het submenu heeft, geklikt wordt. Als dit zou werken, dan krijgt de gebruiker het submenu nauwelijks te zien, omdat de site dit als een menu-klik ziet en er dus gelijk een nieuwe pagina met gesloten menu getoond wordt.
De link mag dus niet gewoon werken. Het script aan dat verzorgen door een variabele te maken van de link. Dat is een a-element. Dus opnieuw .querySelector() maar nu met het a-element als argument.
Aan dit DOM-element voeg je dan een event-listener toe met als argument 'click' en aan het event een .preventDefault();
Je kunt nu testen dat een klik op de link niet een andere pagina tot gevolg krijgt. Bovendien laat je de variabele, die het submenu bevat opnieuw een classList.toggle() ondergaan die het menu eerst verborg, maar nu afwisselend toont.

WP thema vanaf scratch 12: submenu symbool (00:11:00)

Voor gebruikers is het belangrijk aan te geven welke links uit het menu submenus bevatten.
dat kan met CSS omdat dat linkje een class-naam menu-item-has-children heeft.
De directe link daarin selecteer je met menu-item-has-children>a.
Met het pseudo element ::before geeft je de unicode \25BC mee voor het driehoekje met de punt naar beneden.

Het symbool moet eigenlijk omgekeerd zijn, als het submenu getoond wordt.
In het script geef je de link met classList.toggle() een extra class-naam. In de CSS kun je die dan weer selecteren en de content de waarde \25B2 geven.
Het submenu duwt nu de andere inhoud nog naar beneden. In de desktop versie is dat onwenselijk.
In de mediaquery geven het submenu daarom een position absolute. De navolgende inhoud schiet daar onderdoor.

WP thema vanaf scratch 13: submenu animeren (00:05:56)

Dit kan helemaal met CSS worden opgelost. Waar eerst met display:none; het menu werd verborgen, verbergen we het nu door de volgende eigenschappen een waarde 0 te geven:

• height;
• font-size;
• line-height;
• padding-top;
• padding-bottom; en
• border-width.

Als er daarvoor alle items selecteren met * en deze een transition op alle eigenschappen geven, is de animatie compleet.
Als de hoogte van de link van het submenu blijkt toe te nemen, wordt er als tweak de padding aan de bovenkant verminderd.

WP thema vanaf scratch 14: Eigen font gebruiken (00:06:27)

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 koppelde.
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 15: Widget toevoegen (00:12:40)

Voor het plaatsen van widgetgebieden in het thema moeten er twee dingen gebeuren:

• het widget moet worden geïnitialiseerd in functions.php;
• het gebied moet worden geplaatst in de markup.

Deze stappen lijken erg op het plaatsen van menu's.
Voor de eerste stap schrijf je in functions.php een functie thema_mijn_widgets(); die je daarna oproept met add_action('widgets_init', 'thema_mijn_widgets'); In de functie thema_mijn_widgets plaats je de WP-functie register_sidebar();
Deze heeft een array als argument, die je het makkelijkst van https://codex.wordpress.org/Function_Reference/register_sidebar haalt. De array heeft veel mogelijkheden, zoals de naam, id, beschrijving, elementen voor- en na elk widget en de kop van het widget. De standaardwaarden vind je op https://codex.wordpress.org/Function_Reference/register_sidebar.
Naam: bedenk de naam, die je voor het widgets-element in het Dashboard wenst.
Id: kies een id zonder gebruik van kapitalen. Dit ben je meestal niet gewend.
De overige hebben betrekking op de weergave in de pagina of het Dashboard.
Voorbeeldcode:

  <?php register_sidebar( array(
    'name'          => __( 'naam voor het widget' ),
    'id'            => 'een_unieke_id',    // gebruik alleen onderkasten! ! !
    'description'   => '',
    'before_widget' => '<li id="%1$s" class="widget %2$s">',
    'after_widget'  => '</li>',
    'before_title'  => '<h2 class="widgettitel">',
    'after_title'   => '</h2>' );
  ) ); ?>

Nu blijkt dat de Widgets al te selecteren zijn in het Dashboard, maar ze zullen nog niet op de pagina te zien zijn. Voor dit laatste moet er op de gewenste plaats -hier is dat na de WordPress-loop- een dynamic_sidebar(); worden geplaatst. Als argument wordt de id als string uit de register_sidebar(); meegegeven.
Voorbeeldcode:

  <?php dynamic_sidebar( 'een_unieke_id' ); ?>

WP thema vanaf scratch 16: Aside naast inhoud (00:10:32)

Het widget willen we rechts van de inhoud hebben. Tegelijk willen we de linkerkant in lijn houden. Daarom wordt de markup in index.php aangevuld.
Daarvoor worden verschillende stukken PHP opengebroken, om daartussen markup-tags te plaatsen.
Dit doen we door de div met de class container, die nu nog binnen het article staat, er omheen te plaatsen, ook om de aside, die het widget bevat.
Net binnen de container-div komt dan het main-element. Die heeft dan alleen het article en de aside als children.
In de CSS geven we in de mediaquery voor brede viewports de main een display: grid; en een grid-template-columns: 4fr 1fr; we zien de elementen dan naast elkaar staan. Met het kleuren van de kopjes in de aside en een rechterrand wordt het wat fraaier.
Om over de padding van de container uit te reiken, krijgt de aside ook een negatieve rechtermarge, die net zo groot is als de padding van de container.

WP thema vanaf scratch 17: Screenshot voor Dashboard (00:06:34)

Een screenshot kan gebruikt worden om in de thema-kiezer van het Dashboard, een weergave van je thema te laten zien.
Voordat er een screenshot voor het Dashboard gemaakt gaat worden, wordt het thema nog wat geoptimaliseerd.
De aansluiting van de streep van de aside naar de footer is hersteld als de scholing van de browser 100% is.
We maken ook een lijn aside naar het navigatiemenu dwars over de header-afbeelding.
We kiezen als selector de container in de header.
Als de lijn ook hier niet aansluit, geven we deze voor grotere viewports ook de minimale hoogte, die de header zelf heeft.

Voor een screenshot kun je de specificaties lezen op: https://codex.wordpress.org/Theme_Development#Screenshot. Optimaal is 1200 bij 900px.
Sla dit op als screenshot.png en plaats deze dan in de root van je thema-map.

WP thema vanaf scratch 18: errors in de structuur (00:06:34)

Als er meerdere items moeten worden weergegeven bijvoorbeeld van een categorie, dan blijkt er een fout in de structuur van het thema te zitten!
Het blijkt dat de sluittag van het main-element juist een openingstag is.
Daarnaast zal elke iteratie in de while-lus een nieuwe container met main-element genereren. De bedoeling is natuurlijk 1 enkele main.

Nadat dit is verholpen krijgen we een 2 kolom-layout, zoals je zou kunnen verwachten, van alle articles in de main. Maar we wensen alle articles in de linkerkolom.
We zorgen er in de mark-up dus voor dat alle articles in een div komen, die naast de aside de enige children van het main-element zijn. Hierna blijkt nog dat door erg lange regels in de pre-elementen, de articles nog te breed maken.

WP thema vanaf scratch 19: nog meer errors (00:03:19)

Uit de vorige video blijkt al dat er foutjes op de loer liggen.
Daarom van een pagina de broncode opgeroepen en deze op https://validator.w3.org/#validate_by_input ter controle ingevoerd.
Er blijken nog 2 fouten te zijn, die verholpen kunnen worden.
Allereerst levert language_attributes(); niet alleen de waarde van het lang-attribute, maar het hele attribuut. We kunnen het attribuut dus in de mark-up weglaten, dat verzorgt deze WP-functie!
Daarnaast staat er bij het font een id, die een spatie bevat. Dat is natuurlijk principieel verkeerd, en we kunnen die er eenvoudig uithalen.

WP thema vanaf scratch 20: apart template voor enkel bericht (00:12:26

Als je een enkel bericht weergeeft, zijn er in de weergave andere wensen, dan voor een overzicht van berichten of een pagina. Het thema kan daarvoor een aparte template-pagina weergeven: single.php.
We slaan daarom index.php op als single.php en voegen onder het bericht de datum, de auteur en de categorie van het bericht. Dit kan met

• the_author();
• the_date(); en
• the_category();

WP thema vanaf scratch 21: reacties weergeven (00:11:05)

Een enkel bericht heeft in een blog nog meer wensen voor de gebruiker.
Er zouden reacties weergegeven kunnen worden.
Hiervoor is het mogelijk in je thema een apart comments.php aan te maken en deze met comments_template("", true); in single.php te halen.
Het eerste argument geeft de plaats van het bestand weer en is standaard 'comments.php'.
Het tweede argument geeft aan of de comments gescheiden moeten worden door het comment-type. Dit staat standaard op false.
Zie: https://developer.wordpress.org/reference/functions/comments_template/ In de comments.php plaatsen we hier slechts 2 opdrachten: comment_form();, die het formulier oplevert, en wp_list_comments(); die de geplaatste reacties weergeeft.

Bovendien is de kop van het enkele bericht nog steeds een link naar het bericht zelf. Dat is voor de gebruiker verwarrend. We halen de link er hier dus af.

Tot slot heeft zijn er functies die het vorige dan wel volgende bericht kunnen oproepen.
Dit zijn get_next_post(); en get_previous_post();
Van het object dat teruggegeven wordt gebruiken we dan de permalink en de title.
Zie: https://codex.wordpress.org/Function_Reference/get_next_post.

WP thema vanaf scratch 22: pagina weergeven (00:03:48)

Ook bij de weergave van een pagina is de kop nog een link.
Om deze link van pagina's te verwijderen, maken slaan we index.php op als page.php.
Hier verwijderen we de link in de kop.

WP thema vanaf scratch 23: placeholder tekst in zoekvenster (00:03:42)

Het zoekvenster bevat geen placeholder tekst en is van het type input.
Een oplossing hiervoor kan dan met JavaScript.
We hebben er al een gekoppeld, en we vullen deze aan. Het zoekvenster blijkt een id met de waarde s te hebben. Die kunnen we dus met document.getElementById(); in een variabele stoppen.
Met .setAttribute(); zetten we dan de waarde van het attribuut.
Deze functie heeft 2 argumenten van het type string: de eerste de naam van het attribuut, de tweede de waarde. Zo zetten we dan placeholder op de tekst die we wensen en type op search.

WP thema vanaf scratch 24: template voor zoekresultaten (00:09:15)

Voor de gebruiker is het prettig als het aangegeven wordt dat een pagina de zoekresultaten weergeeft, als er een zoekopdracht is gegeven. Daarvoor maken we search.php aan. Deze kun je eenvoudig van index.php overnemen.
Het kop-niveau van de posts wordt naar h3 verlaagd. Je kunt dan voor de WordPress-loop een kop2-element invoegen met de opmerking dat het om zoekresultaten gaat. Om de zoekterm wel te geven echo-en we return van get_search_query();
De zoekterm geven we ook weer in de regel die wordt gegeven als er geen resultaten zijn.

WP thema vanaf scratch 25: tags bij bericht weergeven (00:03:23)

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.

WP thema vanaf scratch 26: template hiërarchie (00:09:15)

Een WordPress thema kan met veel templates worden uitgebreid. 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 ook 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/

Bonusopdracht

• 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 helmaal bepalen. Je kunt bijvoorbeeld het aside verwijderen. De inhoud kan zelfs statisch zijn, dus zonder WP-loop, maar de keuze is aan jou.

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.