Datum laatste wijziging toevoegen in een Elementor Post info widget.

Ik wil in Elementor op mijn blogpagina zowel de datum waarop een blog is geschreven, als de datum laatste wijziging toevoegen. En in het voorbijgaan leer je ook nog eens hoe je kan goochelen met datumformaten

Wil je direct een mail ontvangen wanneer nieuwe snippets zijn toegevoegd?

Vul dan onderstaand formulier in en je krijgt direct na het toevoegen van nieuwe snippets een email. Zo blijf je altijd bij!

Ik kreeg onlangs het commentaar van een regelmatige bezoeker aan mijn snippet base dat de laatste tijd mijn code snippets kleine projectjes beginnen te worden.

Dus we gaan weer even terug naar de oorsprong met kleine code fragmenten, waarmee je bepaalde functies uit kan voeren.

Omdat ik de laatste tijd nogal eens mijn blogposts bijwerk, kan het interessant zijn voor de bezoeker om te weten hoe actueel de informatie eigenlijk is. Dus ik wilde aan de meta-gegevens van mijn blogpost een datum laatste wijziging meegeven.

Op zich is dat natuurlijk helemaal niet zo moeilijk. WordPress heeft daar een standaard functie voor. En die standaard functie kan ik vervolgens in een shortcode aanroepen en die code kan ik dan via welke pagebuilder dan ook op de gewenste plaats neerzetten. Een kind kan de was doen.

Maar op het moment, dat ik een parameter mee wil kunnen geven aan de shortcode, gaat er iets goed mis. Gelukkig was ik ook in staat deze uitdaging op te lossen.

Tenslotte hebben we er nog één kleine uitdaging bij. En dat is deze keer geen uitdaging in de code zelf, maar hoe je deze op wil nemen in de pagina. Tenminste, hoe ik hem op wilde nemen in de pagina. Ik wilde namelijk gebruik blijven maken van de widget die ook categorie, datum aanmaak en tags toont.

Maar ik ben niet voor één gat te vangen, en ook dat lossen we op.

Maar laten we eerst beginnen met de shortcode zelf. Die is eigenlijk heel makkelijk:

<?php
function wxp_last_modified_date() {
   if (is_single()) {
       return get_the_modified_type('j F Y');
   }
}

add_shortcode('dtmodified', 'wxp_last_modified_date'); 

Deze code levert echter één probleem op. Indien ik nu of in de toekomst het datumformaat zou willen wijzigen, moet ik de code aanpassen. Nu heeft WordPress al een datum formaat wat je standaard in kan stellen, in de Algemene Instellingen.

Ga in het Dashboard naar Instellingen -> Algemeen, en je ziet het daar. Laten we daar het datumformaat ophalen.

| Datum laatste wijziging toevoegen in een Elementor Post info widget.

Met de functie ‘get_option’ kan ik diverse systeeminstellingen ophalen, met get_option(‘date_format’) haal ik het formaat voor de datum op. Dus onze aangepaste code zal er als volgt uitzien:

<?php
function wxp_last_modified_date() {
    if (is_single()) {
        $modified_time = get_the_modified_time(get_option('date_format')); // Haalt het datumformaat op uit de WordPress-instellingen
        return $modified_time;
    }
}
add_shortcode('dtmodified', 'wxp_last_modified_date');

Dit kan nog mooier. Want wat nu, als ik bijvoorbeeld niet alleen de datum, maar ook de tijd van wijziging zou willen tonen? Voor een blog over WordPress is dit niet zo van belang, maar wanneer je een nieuwsblog hebt, is het mogelijk dat het nieuws een paar keer per dag aangepast moet worden.

En dat is natuurlijk geen enkel probleem. We zorgen gewoon, dat we ook een parameter aan de shortcode mee kunnen geven. In de PHP handleiding staat welke waarden we voor datum en tijd kunnen gebruiken.

Dus wanneer ik de datum tijd op de seconde nauwkeurig weer zou willen geven, zou ik kiezen voor ‘j F y H:i:s’.

Maar dan moeten we natuurlijk wel eerst even de functie vertellen, wat hij met die parameter moet doen. De onderstaande code zou dat in principe moeten doen!

<?php
function wxp_last_modified_date($atts) {
    // Definieer de standaardwaarde voor het datumformaat (WordPress datuminstelling)
    $atts = shortcode_atts(
        array(
            'format' => get_option('date_format'),  // Haalt het standaard datumformaat op uit de WordPress-instellingen
        ),
        $atts,
        'dtmodified'
    );

    // Haal de laatste wijzigingsdatum op
    if (is_single()) {
        $modified_time = get_the_modified_time($atts['format']);
        return $modified_time;
    }
}
add_shortcode('dtmodified', 'wxp_last_modified_date');

maar als je dit nu uit gaat testen, dan ontdek je tot je grote verrassing, dat wat je ook aan parameters meegeeft, je iedere keer het formaat krijgt, wat staat ingesteld onder de WordPress instellingen.

Om de één of andere merkwaardige reden (wat die reden is, werd mij duidelijk na het stap voor stap debuggen van de code, maar daar ga ik nu niet te diep op in), kan de functie ‘get_the_modified_time’ niet werken parameters die met een shortcode worden meegegeven.

Om dat op te lossen, gaan we een truc uithalen. Eerst converteren we de datum van aanpassing naar een Unix timestamp, vervolgens gebruiken we dat resultaat om te tonen in het juiste formaat.

<?php
function wxp_last_modified_date($atts) {
    // Standaardinstelling: gebruik het datumformaat van WordPress
    $atts = shortcode_atts(
        array(
            'format' => get_option('date_format'),  // Standaardformaat is de datuminstelling van WordPress
        ),
        $atts,
        'dtmodified'
    );

    // Haal de laatste wijzigingsdatum op
    if (is_single()) {
        // Haal de tijd van de laatste wijziging op
        $modified_timestamp = get_the_modified_time('U'); // Haal het timestamp op van de laatste wijziging

        // Formatteer de datum volgens het opgegeven of standaard formaat
        $formatted_date = date($atts['format'], $modified_timestamp);

        return $formatted_date;
    }
}
add_shortcode('dtmodified', 'wxp_modified_date');

En wanneer je dacht, dat we er eindelijk zijn, moet ik je nog een keer teleurstellen. Want 12 januari 2025 wordt weergegeven als 12 January 2025. In het Engels dus. En dit komt, omdat we geen rekening hebben gehouden met de taalinstellingen van de site.

Zullen we dit ook direct eens corrigeren?

Depricated functies…

En hier lopen we direct tegen een leuke uitdaging. Want om een datum te krijgen in een ‘lokaal’ formaat (met dus Nederlandse namen voor de dagen van de week, de maanden etc) is er een functie ‘strftime’, kort voor ‘String formatted time’. En wanneer we deze functie gebruiken, zal dit gewoon werken met op dit moment nog iedere versie van PHP.

Ok Wilko, dat is toch wat we willen? Code die altijd werkt?

Sinds PHP 8.1 is deze functie echter ‘depricated’. Dat wil zeggen, dat het nog wel zal werken, maar in een toekomstige versie van PHP deze functie zomaar eens zou kunnen verdwijnen. We moeten hier dus op zoek naar een andere, betere oplossing die meer toekomstvast is.

Gelukkig is die er ook. Sinds PHP 5 punt nogwat is er een class die de IntlDateFormatter heet. Een class. Dus geen functie.

Het voordeel van ‘Date’ classes (waartoe ook de IntlDateFormatter behoort) is dat je, wanneer je in je code datums gebruikt, je vaak dezelfde instellingen voor de weergave zal willen gebruiken. In een functie moet je dit iedere keer weer als parameters in je functie meegeven, met een class stel je dit éénmaal in, en hergebruik je dit datum object voor verschillende data. Eigenlijk dus best makkelijk. Toch hebben we hier een ‘leuke’ andere uitdaging. Het formaat voor de ‘internationale’ datums is anders dan het datumformaat wat we hierboven al besproken hadden. Voor de volledigheid, er zijn voor internationale datums zelfs twee toegestane soorten format-strings.

Laten we eerst de eerste format-string serie bekijken (waar we verder niets mee doen, ik geef het je voor de volledigheid)

AfkortingFunctie
%aAfkorting van de dag van de week (bijv. “Ma” voor maandag in het Nederlands).
%AVolledige naam van de dag van de week (bijv. “Maandag”).
%bAfkorting van de maand (bijv. “Jan” voor januari).
%BVolledige naam van de maand (bijv. “Januari”).
%dDag van de maand (twee cijfers, bijv. “01” tot “31”).
%eDag van de maand (één of twee cijfers, bijv. “1” tot “31”).
%YVolledig jaartal (bijv. “2025”).
%mMaandnummer (twee cijfers, bijv. “01” tot “12”).
%HUur in 24-uurs formaat (bijv. “00” tot “23”).
%IUur in 12-uurs formaat (bijv. “01” tot “12”).
%MMinuten (bijv. “00” tot “59”).
%SSeconden (bijv. “00” tot “59”).

Zoals gezegd, met dit formaat doen we niets, we maken gebruik van het alternatieve formaat wat iets meer op het formaat van de ‘date’ functie lijkt. De ‘vertalingstabel’ zie je hieronder.

<?php 
function wxp_convert_date_format($date_format) {
    // Map PHP date() format to IntlDateFormatter format
    $conversion_map = array(
        'Y' => 'yyyy', // 'Y' (jaar, vier cijfers) -> 'yyyy' (volledig jaar, vier cijfers)
        'm' => 'MM',   // 'm' (maandnummer, 2 cijfers) -> 'MM' (maandnummer, 2 cijfers)
        'd' => 'dd',   // 'd' (dag van de maand, 2 cijfers) -> 'dd' (dag van de maand, 2 cijfers)
        'D' => 'EEE',  // 'D' (afkorting van de dag van de week) -> 'EEE' (afkorting van de dag van de week)
        'l' => 'EEEE', // 'l' (volledige naam van de dag van de week) -> 'EEEE' (volledige naam van de dag van de week)
        'F' => 'MMMM', // 'F' (volledige naam van de maand) -> 'MMMM' (volledige naam van de maand)
        'M' => 'MMM',  // 'M' (afkorting van de maand) -> 'MMM' (afkorting van de maand)
        'j' => 'd',    // 'j' (dag van de maand, 1 of 2 cijfers) -> 'd' (dag van de maand, 1 of 2 cijfers)
        'H' => 'HH',   // 'H' (uur in 24-uurs formaat, 2 cijfers) -> 'HH' (uur in 24-uurs formaat, 2 cijfers)
        'i' => 'mm',   // 'i' (minuten, 2 cijfers) -> 'mm' (minuten, 2 cijfers)
        's' => 'ss',   // 's' (seconden, 2 cijfers) -> 'ss' (seconden, 2 cijfers)
        'a' => 'a',    // 'a' (am/pm) -> 'a' (am/pm, voor kleine letters)
        'A' => 'a'     // 'A' (AM/PM) -> 'a' (am/pm, voor kleine letters)
    );

    // Replace the PHP date format with the IntlDateFormatter format
    $intl_format = strtr($date_format, $conversion_map);

    return $intl_format;
}

Laten we nog even één keer terugkeren naar die IntlDateFormatter. Hoe werkt die?

Het eerste wat we moeten doen is een instantie van die class maken. En dat doen we door aan de constructor een aantal parameters mee te geven. Eén van die parameters is is de zogenaamde ‘locale’… maar wat is die ‘locale’ en hoe komen we eraan.

Nu is WordPress gelukkig vrij recht-toe-recht-aan en als je wat wil hebben, heeft een functie vaak een naam die lijkt op ‘Verkrijg Watikwilhebben’. In ons geval dus ‘get_locale()’ Wanneer jij een Nederlandstalige site hebt, in de Nederlandse variatie van de taal (in tegenstelling tot de Belgische variatie van het Nederlands), dan zal je ‘nl_NL’ als antwoord krijgen. En met die waarde gaan we verder.

De andere twee parameters die de constructor (de functie die de class initialiseert tot een object) verwacht zijn een constante die aangeeft wat het datum type is en wat het tijd type is. Omdat dit allebei later te wijzigen is, geven we hier aan, dat we dat voorlopig nog niet in willen stellen.

Dus het codefragment zou er ongeveer zo uit komen te zien:

<?php 

$locale = get_locale();

$date_formatter = new IntlDateFormatter(
            $locale, // Locale voor de datum, bijv. 'nl_NL'
            IntlDateFormatter::NONE, // Datum-formaat (kan worden aangepast)
            IntlDateFormatter::NONE // Tijd is niet nodig, dus NONE
        );

$intl_format = wxp_convert_date_format($atts['format']);

$date_formatter->setPattern($intl_format);

$date_formatter->format($timestamp);  //$timestamp is een tijd als timestamp geformatteerd 

En laten we het nu eens allemaal samenvoegen in één mooi groot werkend code voorbeeld:

function wxp_convert_date_format($date_format) {
    // Map PHP date() format to IntlDateFormatter format
    $conversion_map = array(
        'Y' => 'yyyy', // 'Y' (jaar, vier cijfers) -> 'yyyy' (volledig jaar, vier cijfers)
        'm' => 'MM',   // 'm' (maandnummer, 2 cijfers) -> 'MM' (maandnummer, 2 cijfers)
        'd' => 'dd',   // 'd' (dag van de maand, 2 cijfers) -> 'dd' (dag van de maand, 2 cijfers)
        'D' => 'EEE',  // 'D' (afkorting van de dag van de week) -> 'EEE' (afkorting van de dag van de week)
        'l' => 'EEEE', // 'l' (volledige naam van de dag van de week) -> 'EEEE' (volledige naam van de dag van de week)
        'F' => 'MMMM', // 'F' (volledige naam van de maand) -> 'MMMM' (volledige naam van de maand)
        'M' => 'MMM',  // 'M' (afkorting van de maand) -> 'MMM' (afkorting van de maand)
        'j' => 'd',    // 'j' (dag van de maand, 1 of 2 cijfers) -> 'd' (dag van de maand, 1 of 2 cijfers)
        'H' => 'HH',   // 'H' (uur in 24-uurs formaat, 2 cijfers) -> 'HH' (uur in 24-uurs formaat, 2 cijfers)
        'i' => 'mm',   // 'i' (minuten, 2 cijfers) -> 'mm' (minuten, 2 cijfers)
        's' => 'ss',   // 's' (seconden, 2 cijfers) -> 'ss' (seconden, 2 cijfers)
        'a' => 'a',    // 'a' (am/pm) -> 'a' (am/pm, voor kleine letters)
        'A' => 'a'     // 'A' (AM/PM) -> 'a' (am/pm, voor kleine letters)
    );

    // Replace the PHP date format with the IntlDateFormatter format
    $intl_format = strtr($date_format, $conversion_map);

    return $intl_format;
}

function wxp_last_modified_date($atts) {
    // Haal de taalinstelling van de site op
    $locale = get_locale(); // Dit geeft de taalinstelling van de site terug, bijv. 'nl_NL'

    // Standaardinstelling: gebruik het datumformaat van WordPress
    $atts = shortcode_atts(
        array(
            'format' => get_option('date_format'),  // Standaardformaat is de datuminstelling van WordPress
        ),
        $atts,
        'last_modified_date'
    );

    // Convert PHP date format to IntlDateFormatter format
    $intl_format = wxp_convert_date_format($atts['format']);

    // Haal de laatste wijzigingsdatum op
    if (is_single()) {
        // Haal de tijd van de laatste wijziging op
        $modified_timestamp = get_the_modified_time('U'); // Haal het timestamp op van de laatste wijziging

        // Maak een nieuwe IntlDateFormatter instantie
        $date_formatter = new IntlDateFormatter(
            $locale, // Locale voor de datum, bijv. 'nl_NL'
            IntlDateFormatter::NONE, // Datum-formaat (kan worden aangepast)
            IntlDateFormatter::NONE // Tijd is niet nodig, dus NONE
        );

        // Format de datum met de opgegeven instelling
        $date_formatter->setPattern($intl_format); // Set the pattern for the formatter
        $formatted_date = $date_formatter->format($modified_timestamp);

        return $formatted_date;
    }
}
add_shortcode('dtmodified', 'wxp_last_modified_date');

De code is nu eenvoudig te gebruiken

[ dtmodified format="F y"] 

zal een datum tonen als ‘januari 2025’

Geef je alleen de shortcode op, zonder parameters zal het WordPress formaat voor datum gebruikt worden.

Maar nu gaan we het leuk maken, want we moeten deze shortcode nog tonen aan de gebruiker. Ik daarom naar de template voor mijn blogpagina’s in mijn site en klik daar op de ‘post data’ widget.

| Datum laatste wijziging toevoegen in een Elementor Post info widget.

Wanneer ik nu op het blokje met meta-gegevens klik, krijg ik het onderstaande te zien:

| Datum laatste wijziging toevoegen in een Elementor Post info widget.

Ik voeg nu een tweede datum toe, maar in plaats van een datum formaat in te vullen, vul ik er een enkele spatie in. Bij het veld ‘Voor’ klik ik op de ‘stapel pannenkoeken’ (eigenlijk een disk-array) en kies uit de lijst voor ‘shortcode’. Vervolgens klik ik aan het begin van het ‘Voor’ veld op de moersleutel en voer hier de shortcode in.

Wat ik hier in het kort gedaan heb is het ‘datum’ metaveld, wat nog een keer de datum van publicatie zou tonen, vervangen door een spatie. En voor die spatie komt een omschrijving te staan, die we hebben vervangen door een shortcode die de datum van laatste wijziging laat zien.

Dus nog steeds binnen dezelfde meta-gegevens, zien we nu ook de datum wijziging verschijnen.

Dan nog even één dingetje om het af te maken. Eigenlijk maakt de exacte dag van publicatie of wijziging helemaal niet uit. Dus ik vervang beide data door een ‘maand / jaar’ indicatie, in plaats van een daadwerkelijke datum.

Succes!

Tenslotte

Zelf vind ik dit artikel een mooi voorbeeld om te laten zien hoe je iets snel kan doen en hoe je iets mooi kan doen. Tijdens de trainingen WordPress Developer en ‘Introductiecursus Plugins Programmeren‘ leer je hoe je WordPress code schrijft die niet alleen werkt op één systeem (zoals de eerste snippet in dit artikel), maar ook code die rekening houdt met taal en de ‘juiste versies’ van PHP. Per slot van rekening, als programmeur wil je dat jouw code ook toekomstvast is nietwaar?

Codesnippet verbeteren

Het doel van deze code snippet is een probleem op te lossen in een specifieke situatie. Daarom zie je regelmatig voorbeelden waar je specifiek tekst moet aanpassen om te krijgen wat je wilt. 

Wil jij leren hoe je complete plugins zelf kunt programmeren inclusief ‘admin’ schermen voor het instellen en de output in de gewenste taal, dan is misschien de cursus ‘Introductiecursus Plugins Programmeren‘ iets voor jou. 

Wil je als ‘full stack’ WordPress programmeur aan de gang gaan, dan biedt WordXPression ook een compleet traject ‘WordPress Developer‘ aan. Dit is een traject wat deels online, deels klassikaal wordt gegeven.

WordPress Developer worden?

Wil je leren hoe je zelf plugins, thema's, shortcodes, widgets, Gutenberg blocks en meer kan maken?
Schrijf je dan in voor de cursus WordPress Developer.

Meer snippets

Pagina redirecten naar aanleiding van een user role
Met deze code kan je afhankelijk van de gebruikersrol waarmee wordt ingelogd je gebruikers naar de juiste...
Custom fields in Elementor gebruiken
Elementor is natuurlijk een prachtige page- en theme builder, maar is toch een aantal kleine uitdagingen...
Cache Warmer automatisch starten na Plugin updates
Cache warmer is een dienst om jouw site cache 'warm te houden. Hoe warm je hem opnieuw op, na een update...
Bestel en ontvang het morgen badge voor WooCommerce
Voer de 'koop druk' een beetje op, door aan te geven hoe snel iemand iets in huis kan krijgen
Checkout velden wel of niet verplicht maken
Hoe kan je checkout velden in WooCommerce wel of niet verplicht stellen?
Een 'Niet op voorraad' knop in WooCommerce
Hoe voorkom je teleurstelling bij je klant wanneer hij zijn favoriete product bij jou vindt, zonder dat...

Veiligheid voor alles!

Met betrekking tot de code die je hier aantreft een aantal waarschuwingen, voordat je deze code snippets toepast op je eigen website.

  1. Voer de code nooit direct uit op je eigen website, maar probeer deze eerst op een staging omgeving of een locale kopie van je website. 
  2. Voor je de geteste code installeert op je website, maak eerst een back up van je website.
  3. Zorg altijd voor alle zekerheid, dat je voor je een aanpassing live zet, je ook de FTP gegevens van je website bij de hand hebt.  
 
Voel je je onvoldoende vertrouwd met het toepassen van een dergelijke code snippet, bedenk dat je dit ook door een professional kan laten doen. De WordXPression support strippenkaart is een voordelige manier om dit soort aanpassingen te laten doen.
Heeft dit artikel je geholpen je probleem op te lossen?
Deel het met je vrienden via je favoriete social media.

Heb je vragen bij, of opmerkingen over deze code snippet, stel deze bij de commentaren hieronder.

Geef een reactie

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

Word je website de baas. Neem vandaag nog contact op!

Contact Informatie

WordXPression 

Aardoliestraat 14-I
7553GT Hengelo

085-8001964 (van 9:00 tot 17:00 van ma-vr)
Let op, gewijzigd telefoonnummer

KVK : 75580152 

Social media
Stuur een bericht

Introductiecursus Plugins Programmeren

wordpress coding Can use php code as background in html

Ontdek de wereld van WordPress Plugin ontwikkeling met WordXPression's introductiecursus