De magie van AI: Bouw je eigen WordPress Shortcode met AI!

Zin om iets ongelofelijks te doen? Want in dit blogartikel nodig ik je uit voor een experiment wat je leven kan veranderen. We gaan samen een WordPress shortcode met AI maken.

Ben je er voor in? Indien je ook maar een beetje twijfelt, voel vrij om ‘nee’ te zeggen. Maar ben je avontuurlijk ingesteld, dan nodig je uit om iets avontuurlijks met mij te gaan doen, zonder uiteindelijk te weten waar we uitkomen.

Op veel manieren ben ik niet echt onder de indruk van AI. Ondanks dat af en toe mij letterlijk de ‘bek open valt’ (excusez le mot) van wat er met AI mogelijk is, doen AI geschreven teksten mij toch wel heel onpersoonlijk aan. Of je nu van mijn stijl van schrijven houdt of niet… AI teksten missen letterlijk iedere stijl. En AI afbeeldingen? Alsjeblieft, is het zo moeilijk te begrijpen dat de meeste mensen niet meer dan vijf vingers hebben? En echt maar maximaal twee armen? En dat mensen met neuzen op de wang echt heel zeldzaam zijn?

De dingen waar ik echter wel van onder de indruk ben zijn de AI hulpmiddelen bij het programmeren. En hier is de ontwikkeling echt super snel gegaan. En in dit blogartikel wil ik samen met jou een wordpress shortcode met AI ondersteuning ontwikkelen, om jou te laten zien, dat ook jij kan programmeren!

Tenminste als je weet wat je wilt.

Programmeren is definiëren!

Tot en met 2001 (ja, ik ben echt zo oud) ben ik in diverse projecten bij verschillende top 500 bedrijven technisch projectleider geweest bij grote- en kleine projecten. De meeste projecten die ik in die dagen deed had alles te maken met de integratie tussen systemen. En hoewel ik nog niet echt een echte ‘oude’ rot in het vak was (reken maar uit, ik ben van 1964), had ik meer ervaring dan de meeste programmeurs (vergeet niet, we spreken over de tijd van zo’n 5 jaar voor, tot een jaar na 2000… door het ‘Y2K’ probleem waren ervaren programmeurs schaars). En dat ‘jonge grut’ begon het liefst direct toetsenborden te mishandelen, als er iets geprogrammeerd moest worden.

In die jaren heb ik mijn motto ontwikkeld ‘Programmeren is definiëren’. Je moet eerst goed weten wat je wilt, voor je dit ook in code om kan zetten.

Dat was toen waar, en dat is nu nog steeds zo. En vandaag de dag is dat nog steeds zo.

ChatGPT, het jonge grut anno 2025

ChatGPT is in veel opzichten gelijk aan de net-opgeleide programmeurs waar ik in de midden tot laat 90-er jaren mee mocht moest werken. Wanneer je ChatGPT vertelt wat er gedaan moet worden, wordt het gedaan. Zonder enige verdere vragen.

Om je een voorbeeld te geven. Ik heb op mijn tweede scherm zojuist ingetikt in een ChatGPT venster

Schrijf een blogpost over WordPress

En dat doet ChatGPT maar al te graag voor je:

Wat is WordPress en waarom is het zo populair?

WordPress is het meest gebruikte contentmanagementsysteem (CMS) ter wereld en vormt de ruggengraat van miljoenen websites. Of je nu een blogger, ondernemer of ontwikkelaar bent, WordPress biedt een gebruiksvriendelijke en flexibele oplossing voor het bouwen van een website. Maar wat maakt WordPress zo bijzonder en waarom kiezen zoveel mensen ervoor? Laten we dat onderzoeken.

Wat is WordPress?

Oorspronkelijk gelanceerd in 2003 als een platform voor bloggers, is WordPress uitgegroeid tot een compleet CMS waarmee je alles kunt maken, van eenvoudige blogs tot complexe e-commercewebsites. WordPress is open source, wat betekent dat iedereen de code kan downloaden, aanpassen en verbeteren. Dit draagt bij aan de enorme gemeenschap van ontwikkelaars en gebruikers die voortdurend bijdragen aan de groei van het platform.

De Voordelen van WordPress

Gebruiksvriendelijk
WordPress is ontworpen met het oog op eenvoud. De intuïtieve interface maakt het gemakkelijk voor beginners om een website te bouwen en te beheren zonder technische kennis.

Flexibiliteit
Met duizenden thema’s en plug-ins kun je WordPress aanpassen aan jouw behoeften. Of je nu een blog, portfolio of webshop wilt opzetten, er is altijd een oplossing beschikbaar.

SEO-vriendelijk
Zoekmachineoptimalisatie is essentieel voor online succes, en WordPress biedt ingebouwde tools en plug-ins zoals Yoast SEO om je website beter vindbaar te maken.

Gemeenschap en Ondersteuning
Dankzij de enorme gemeenschap kun je altijd rekenen op hulp, tutorials en forums. Daarnaast zijn er talloze ontwikkelaars die premium ondersteuning en aangepaste oplossingen aanbieden.

Schalen naar behoefte
Of je nu een kleine persoonlijke website hebt of een grote e-commerce site met duizenden bezoekers per dag, WordPress kan meegroeien met jouw bedrijf.

Voor Wie is WordPress Geschikt?

WordPress is geschikt voor vrijwel iedereen die online aanwezig wil zijn.

Blogger: Een eenvoudige manier om je verhalen, ideeën en kennis te delen.

Ondernemer: Bouw een professionele website of webshop zonder een groot budget.

Ontwikkelaar: Dankzij de open source-code kun je geavanceerde functies en maatwerk implementeren.

Hoe Begin Je met WordPress?

Domeinnaam en Hosting: Kies een betrouwbare hostingprovider die WordPress ondersteunt en registreer een domeinnaam.

Installatie: De meeste hostingproviders bieden een een-klik-installatie van WordPress.

Thema en Plug-ins: Kies een thema dat bij jouw merk past en installeer plug-ins om extra functionaliteiten toe te voegen.

Content Creëren: Begin met het toevoegen van pagina’s, berichten en media.

Publiceren: Maak je website live en begin met het aantrekken van bezoekers.

WordPress vs. Andere CMS-opties

Hoewel er veel CMS-opties beschikbaar zijn, zoals Wix, Squarespace en Joomla, blijft WordPress de populairste keuze vanwege de combinatie van gebruiksvriendelijkheid, flexibiliteit en een enorme gemeenschap. Waar andere platforms vaak beperkingen hebben, biedt WordPress de vrijheid om je website volledig naar wens te bouwen.

Conclusie

WordPress is een krachtig platform dat geschikt is voor beginners en experts. Of je nu een eenvoudige blog of een complexe e-commercewebsite wilt maken, WordPress biedt de tools en ondersteuning die je nodig hebt. Begin vandaag nog met WordPress en ontdek de eindeloze mogelijkheden voor jouw online succes!

Wat je ook vraagt aan ChatGPT, zonder verdere vragen wordt het uitgevoerd. En in dit geval heb je een compleet betekenisloos blogartikel over WordPress.

Wanneer ik ChatGPT vraag

Schrijf de code voor een WordPress Plugin

dan gaat onze overijverige kunstmatig-intelligente leerlingprogrammeur direct voor ons aan de slag. En het leuke is, dat ik dezelfde vraag viermaal heb gesteld, en ik viermaal een totaal andere, compleet nutteloze plugin kreeg.

Eén van de voorbeelden:

<?php
/**
 * Plugin Name: Simple Greeting Plugin
 * Plugin URI: https://example.com
 * Description: Een eenvoudige WordPress-plugin die een groet toont op de voorkant van de website.
 * Version: 1.0
 * Author: Jouw Naam
 * Author URI: https://example.com
 * License: GPL2
 */

// Voorkom directe toegang tot het bestand
defined('ABSPATH') or die('Direct access is not allowed.');

// Voeg een actie toe om een groet weer te geven
function simple_greeting_shortcode($atts) {
    // Haal attributen op en stel standaardwaarden in
    $attributes = shortcode_atts([
        'name' => 'bezoeker',
    ], $atts);

    // Genereer de groet
    $greeting = "<p>Hallo, " . esc_html($attributes['name']) . "! Welkom op onze website.</p>";
    return $greeting;
}

// Registreer de shortcode [greeting]
add_shortcode('greeting', 'simple_greeting_shortcode');

// Voeg een instellingspagina toe aan het adminmenu
function simple_greeting_plugin_menu() {
    add_options_page(
        'Simple Greeting Settings',
        'Greeting Plugin',
        'manage_options',
        'simple-greeting-plugin',
        'simple_greeting_settings_page'
    );
}
add_action('admin_menu', 'simple_greeting_plugin_menu');

// Creëer de inhoud van de instellingspagina
function simple_greeting_settings_page() {
    ?>
    <div class="wrap">
        <h1>Simple Greeting Plugin Instellingen</h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('simple_greeting_settings_group');
            do_settings_sections('simple-greeting-plugin');
            submit_button();
            ?>
        </form>
    </div>
    <?php
}

// Registreer instellingen
function simple_greeting_register_settings() {
    register_setting('simple_greeting_settings_group', 'simple_greeting_default_name');

    add_settings_section(
        'simple_greeting_main_section',
        'Standaardwaarden',
        null,
        'simple-greeting-plugin'
    );

    add_settings_field(
        'simple_greeting_default_name_field',
        'Standaardnaam',
        'simple_greeting_default_name_field_callback',
        'simple-greeting-plugin',
        'simple_greeting_main_section'
    );
}
add_action('admin_init', 'simple_greeting_register_settings');

function simple_greeting_default_name_field_callback() {
    $default_name = get_option('simple_greeting_default_name', 'bezoeker');
    echo '<input type="text" name="simple_greeting_default_name" value="' . esc_attr($default_name) . '" />';
}

// Gebruik de standaardnaam in de shortcode indien geen naam is opgegeven
function simple_greeting_shortcode_with_default($atts) {
    $default_name = get_option('simple_greeting_default_name', 'bezoeker');
    $attributes = shortcode_atts([
        'name' => $default_name,
    ], $atts);

    $greeting = "<p>Hallo, " . esc_html($attributes['name']) . "! Welkom op onze website.</p>";
    return $greeting;
}
remove_shortcode('greeting');
add_shortcode('greeting', 'simple_greeting_shortcode_with_default');

De code is overigens helemaal correct. Je kan er echter niet zoveel mee.

Nogmaals. Programmeren is definiëren

Heel, heel lang geleden, toen beeldschermen nog maar nauwelijks op het bureau pasten en een zwart/wit – zwart/groen beeldscherm nog de standaard was leerde ik voor systeemontwerper. En tijdens een workshop deden we een paar speelse dingen om duidelijk te maken hoe moeilijk het geven van goede specificaties eigenlijk is.

Schoenen strikken is moeilijker dan je denkt!

Er is toch bijna niets eenvoudiger dan schoenen strikken? Voor de meeste mensen gaat dit helemaal vanzelf. Maar tijdens de workshop waren er twee deelnemers uitgenodigd (ik was daar één van) om, gescheiden door een kamerscherm de ‘functionele specificaties’ voor het strikken van je schoen door te geven aan de ‘andere kant van het scherm’. Alleen, ik mocht het niet doen, terwijl ik zelf mijn schoen strikte (dat zou ook niet lukken, omdat ik destijds een enorme fan van instappers was), ik moest het ‘by memory’ doen.

De persoon aan de andere kant van het scherm moest mijn instructies letterlijk opvolgen.

Hoewel ik mijn schoenen in seconden kan strikken, lukte het mij niet om ‘uit mijn geheugen’ op te diepen wat ik doe om dat te doen. De ontvanger van mijn instructies zag na iedere poging hem te vertellen hoe het te doen zijn veters opnieuw slap uit elkaar vallen.

Bouw een Lego huisje

Voor een tweede experiment gingen twee mensen het lokaal uit. Twee andere mensen werden aangewezen als vrijwilliger voor een experiment. Opnieuw aan beide kanten van het kamerscherm. De ene persoon kreeg een bak lego stenen, de andere een huisje van lego gemaakt. En je raadt het al, zonder elkaar te zien moest de man met het huisje uitleggen hoe het huisje te bouwen.

Dat lukte beperkt.

Daarna waren de twee mensen op de gang aan de beurt voor hetzelfde experiment. Het bouwsel leek op van alles behalve een huisje.

En het derde deel van het experiment was nog veel interessanter. Twee vrijwilligers uit de zaal deden hetzelfde opnieuw en de bouwer bouwde een perfect huisje.

Alleen de bouwtekening was niet voor een huisje. Omdat de persoon dacht te weten wat de bedoeling was, luisterde hij niet naar de feitelijke instructies, maar bouwde wat hij dacht te moeten bouwen.

Specificeren moet je leren

Uit bovenstaand verhaal wordt in ieder geval een beetje duidelijk hoe lastig het eigenlijk is iets goed te specificeren. En wanneer je met AI werkt, zijn de juiste specificaties cruciaal. Want ChatGPT zal je geen vragen stellen.

Programmeren met AI

Mijn eerste kennismaking met AI en programmeren was toen Elementor AI integreerde. Vanaf dat moment kon je JavaScript en CSS code laten genereren door op een prompt het gewenste effect in te tikken. Mijn meer serieuze kennismaking kwam pas toen ik eind 2023 begon met Laravel te werken. Mijn code editor –Visual Studio Code– had een integratiemogelijkheid met Codium (nu Qodo.ai).

Eén heel leuke mogelijkheid met Codium was dat de editor probeerde te raden wat je bedoeling met de code was. Dus wanneer ik bijvoorbeeld een ‘Model’ (in Laravel is dat de definitie van een data object) Country zou noemen, begon Codium suggesties te doen met betrekking tot mogelijke properties. Een enorme tijdsbesparing dus.

Ik schrijf dit bewust in de verleden tijd, omdat met de ‘overname’ van Codium door Qodo.ai een groot deel van deze functionaliteiten alleen betaald beschikbaar zijn. En ik codeer te weinig op dit moment om de kosten hiervoor lonend te maken, vooral niet, omdat er inmiddels een nieuwe optie beschikbaar is voor het genereren van code.

Ik gebruik Qodo overigens nog steeds voor een aantal andere intelligente functies.

Sinds eind 2023 zijn de mogelijkheden van coderen met AI explosief gegroeid. In 2023 was het nog steeds een intelligente ondersteuning bij het ontwikkelen van code. Vandaag de dag is het mogelijk om je complete code door AI te laten genereren. Maar daar zitten wel een aantal haken en ogen aan.

AI is niet zo intelligent als je denkt.

ChatGPT is een taalmodel dat is getraind met enorme hoeveelheden tekstdata. Door patronen te analyseren kan het tekst ‘begrijpen’ en genereert nieuwe tekstpatronen die een mogelijk antwoord op jouw vraag kunnen zijn.

Behalve ‘gewone tekst’ heeft ChatGPT ook geleerd de tekst van veel programmeertalen op een dergelijke manier te ‘begrijpen’.

Wanneer ik -zoals hierboven- vraag om een WordPress plugin, zonder verdere specificaties, zal ChatGPT een willekeurige hoeveelheid code genereren die op de één of andere manier aan de definitie ‘plugin’ voldoet.

Maar net zoals je ChatGPT niet snel op een grammaticale of spelfout zal betrappen, zal ChatGPT ook geen foute code genereren. De code zal altijd ‘goed’ zijn. Hij hoeft echter niet precies te doen wat je wilt.

Dit is één reden waarom ChatGPT (nog) niet geschikt is voor grote projecten. En tot voor kort ook niet geschikt was voor grotere stukken code. Want zoals we hebben gezien met de voorbeelden van het veterstrikken en lego bouwen, wij mensen vinden het heel moeilijk om in één keer een goede definitie te geven.

Het ChatGPT Canvas, iteratief werken met AI

Gelukkig kan het nu ook anders. Wanneer je met ChatGPT 4 modellen werkt, is er een functionaliteit beschikbaar, die ‘het canvas’ wordt genoemd.

In plaats van het oude vertrouwde ‘chat model’ waar op een vraag een antwoord wordt gegeven, krijgt je ChatGPT een wat ander uiterlijk.

Je ziet hier twee dingen in beeld. Aan de linkerkant de ‘prompt’ die ik heb gebruikt om code te genereren, aan de rechterkant de gegenereerde code.

De prompt, die we straks stap voor stap gaan bekijken, is relatief ‘eenvoudig’, maar ik zou hier nog altijd van alles in gemist kunnen hebben. De gegenereerde code is -in tegenstelling tot een ‘gewone’ chat, bewerkbaar. Wanneer ik zou zien, dat de code niet voldoet aan mijn wensen, kan ik ChatGPT vragen de code aan te passen, maar wat ik ook kan doen is de code zelf aan passen op de manier waarop ik de code beter acht.

Of met andere woorden, ik werk samen met ChatGPT aan de ontwikkeling van de code.

Voor relatief kleine toepassingen hoef je niet eens de code te begrijpen. Omdat je weet wat je wilt, kun je in een lokale ontwikkelomgeving gewoon testen of de code doet wat je vraagt.

Wat wilde ik hebben?

Ik ben op dit moment bezig met het bouwen van een nieuwe functionaliteit op de WordXPression website. Of eigenlijk, een oude functionaliteit die ik ooit had, en heb verwijderd, op een nieuwe manier in aan het bouwen.

Wat ik wil is in een shortcode een aantal blogposts laten zien, die allemaal eenzelfde tag delen. Om een heel eenvoudige reden. Binnenkort komt er op de WordXPression site -of op het moment, dat je dit leest is het er misschien al- een aantal pagina’s over producten en diensten waar ik in geloof en die ik aan jou aan zou durven bevelen. Een mooi voorbeeld is hier bijvoorbeeld Elementor.

Bij de pagina met de informatie over dat product, wil ik ook een verwijzing opnemen naar een aantal blogartikelen, waarin ik dat product bespreek.

Natuurlijk is dit een eenvoudige functionaliteit, zelfs een functionaliteit die ik in mijn leven meer dan eens gebouwd heb, maar het leek mij leuk om eens te proberen hoe goed dit zou gaan met het nieuwe canvas van ChatGPT. En in hoeverre ChatGPT een mogelijk goede oplossing is om ook iemand die totaal niets van programmeren weet zelf eenvoudige code te laten generen.

Doe je met mij mee? Ik kan je overigens bijna garanderen, dat jij andere resultaten zal krijgen dan ik. Zelfs wanneer je met dezelfde prompt begint als ik. Het kan dat wanneer je met de gratis versie werkt, je de boodschap krijgt, dat je jouw ’tokens’ op hebt gebruikt en je een aantal uren moet wachten voor je verder kan met een opdracht van deze complexiteit. Heb je net als ik een betaald account, dan zal je in één ‘run’ de hele code generatie van begin tot einde uit kunnen voeren.

De specificaties

• Het moet een shortcode worden. Of dit nu wel of niet in een plugin wordt opgenomen, of in the functions.php geplaatst gaat worden is op dit moment nog niet relevant. Wanneer ik deze code op meerdere sites zou willen plaatsen zou ik er een plugin van maken, omdat dit makkelijker te onderhouden is, anders een code fragment voor in de functions.php
• Hoewel ik in mijn opzet vooral denk aan het tonen van blogposts, wil ik het toch wat algemener houden, wanneer ik de naam van een ander post type meegeef in de parameters, dan moet het ook voor die andere post types werken.
• Hetzelfde voor taxonomieën.
• Ik wil kunnen bepalen wat het header type van de titel is. (h1… h6)
• Ik wil aan kunnen geven hoeveel kolommen ik wil hebben.
• Ik moet op kunnen geven hoeveel tekst er in de samenvatting mag staan.

Op basis van deze specs, kwam ik uit op de volgende prompt:

schrijf de code voor een shortcode die op grond van een taxonomie de gerelateerde blogartikelen ophaalt in een tabel met in iedere cel de volgende gegevens van de post:
- links de uitgelichte afbeelding in het formaat van 100x100 pixels met een link naar de URL van het blogartikel
- Rechts boven de titel van de blogpost, Een parameter 'title_type' geeft de tag aan die gebruikt wordt voor de titel.
- Onder de titel de samenvatting (excerpt) of indien er geen samenvatting is de eerste x woorden van de tekst (HTML weg gefilterd) van de post zelf. Indien er geen parameter 'words' is, is x 20, anders het aantal woorden in de parameter words. 
- De samenvatting staat tussen HTML p-tags. Indien er een parameter desc_class wordt meegegeven, krijgt de HTML p-tag de class die is meegegeven.
- Indien de parameter 'new_tab' trueish is, wordt de link in een nieuwe tab geopend, anders in dezelfde tab. 
- Een parameter post_type geeft aan wat het post type is. Indien geen post_type meegegeven, is het per default 'post'. 
- Een parameter post_tax geeft aan op welke taxonomie gefilterd moet worden. Indien niets is meegegeven, is het per definitie 'category'. 
- Er kan een parameter tax_id of tax_slug worden meegegeven. Indien tax_id is meegegeven, wordt tax_slug genegeerd. tax_id of tax_slug geven aan op welke waarde de taxonomie gefilterd moet worden. 
- Een parameter 'cols' geeft aan hoeveel kolommen er in de tabel voor mogen komen. 

Dat is dus al aardig gedetailleerd, nietwaar? Daar kan ChatGPT dan ook wat mee, ik krijg daardoor de volgende code :

function related_posts_shortcode($atts) {
    // Shortcode attributes
    $atts = shortcode_atts(
        [
            'title_type' => 'h2',
            'words' => 20,
            'desc_class' => '',
            'new_tab' => false,
            'post_type' => 'post',
            'post_tax' => 'category',
            'tax_id' => '',
            'tax_slug' => '',
            'cols' => 3
        ],
        $atts
    );

    // Determine target attribute for links
    $target = $atts['new_tab'] ? ' target="_blank"' : '';

    // Query arguments
    $query_args = [
        'post_type' => $atts['post_type'],
        'posts_per_page' => -1,
        'tax_query' => []
    ];

    if (!empty($atts['tax_id'])) {
        $query_args['tax_query'][] = [
            'taxonomy' => $atts['post_tax'],
            'field' => 'term_id',
            'terms' => $atts['tax_id']
        ];
    } elseif (!empty($atts['tax_slug'])) {
        $query_args['tax_query'][] = [
            'taxonomy' => $atts['post_tax'],
            'field' => 'slug',
            'terms' => $atts['tax_slug']
        ];
    }

    $query = new WP_Query($query_args);

    if (!$query->have_posts()) {
        return '<p>No related posts found.</p>';
    }

    // Begin table
    $output = '<table class="related-posts-table">';

    $col_count = 0;
    $cols = max(1, (int) $atts['cols']);

    while ($query->have_posts()) {
        $query->the_post();

        // Open a new row if necessary
        if ($col_count % $cols === 0) {
            $output .= '<tr>';
        }

        // Featured image and link
        $thumbnail = get_the_post_thumbnail_url(get_the_ID(), [100, 100]);
        $thumbnail = $thumbnail ?: 'https://via.placeholder.com/100'; // Placeholder image

        $permalink = get_permalink();
        $title = get_the_title();
        $excerpt = get_the_excerpt();

        if (empty($excerpt)) {
            $content = wp_strip_all_tags(get_the_content(), true);
            $words = explode(' ', $content);
            $excerpt = implode(' ', array_slice($words, 0, $atts['words'])) . '...';
        }

        $desc_class = $atts['desc_class'] ? " class=\"{$atts['desc_class']}\"" : '';

        $output .= '<td>';
        $output .= "<a href=\"$permalink\"$target><img src=\"$thumbnail\" alt=\"$title\" style=\"width:100px;height:100px;\"></a>";
        $output .= "<div><{$atts['title_type']}><a href=\"$permalink\"$target>$title</a></{$atts['title_type']}><p$desc_class>$excerpt</p></div>";
        $output .= '</td>';

        $col_count++;

        // Close the row if necessary
        if ($col_count % $cols === 0) {
            $output .= '</tr>';
        }
    }

    // Close the last row if it's incomplete
    if ($col_count % $cols !== 0) {
        $output .= '</tr>';
    }

    $output .= '</table>';

    wp_reset_postdata();

    return $output;
}

add_shortcode('related_posts', 'related_posts_shortcode');

En nu komt het aardige. Tijdens het schrijven van de specificaties gaf ik aan, dat ik de afmetingen van de afbeelding 100×100 pixels wil hebben. Ik bedenk mij echter, omdat voor deze ene specifieke toepassing will ik 100×100 hebben, maar wie zegt, dat ik in de toekomst niet wat anders wil?

Dus ik geen een nieuwe prompt in.

pas de code aan zodat er ook een parameter 'height' en 'width' meegegeven kunnen worden die de grootte van de uitgelichte afbeelding bepalen. Als beide parameters geen waarde hebben, is de default 100, indien slechts één van de twee een waarde heeft, krijgt de andere parameter de waarde van de parameter met een waarde.

En voilà, de code wordt netjes aangepast. hier niet de hele code opnieuw laten zien, want we willen nog een paar kleine veranderingen. Eén van die veranderingen is dat ik er eigenlijk toch een plugin van wil maken, omdat ik de code op een groot aantal sites wil kunnen gebruiken en updaten, dus ik geef opnieuw een prompt in:

Maak van deze code een plugin

En het uiteindelijke resultaat wat we hier krijgen wordt:

<?php
/*
Plugin Name: Related Posts Shortcode
Description: A plugin to display related posts in a customizable table using a shortcode.
Version: 1.0
Author: Your Name
*/

if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly
}

function related_posts_shortcode($atts) {
    // Shortcode attributes
    $atts = shortcode_atts(
        [
            'title_type' => 'h2',
            'words' => 20,
            'desc_class' => '',
            'new_tab' => false,
            'post_type' => 'post',
            'post_tax' => 'category',
            'tax_id' => '',
            'tax_slug' => '',
            'cols' => 3,
            'width' => 100,
            'height' => 100
        ],
        $atts
    );

    // Adjust width and height
    $atts['width'] = $atts['width'] ?: ($atts['height'] ?: 100);
    $atts['height'] = $atts['height'] ?: $atts['width'];

    // Determine target attribute for links
    $target = $atts['new_tab'] ? ' target="_blank"' : '';

    // Query arguments
    $query_args = [
        'post_type' => $atts['post_type'],
        'posts_per_page' => -1,
        'tax_query' => []
    ];

    if (!empty($atts['tax_id'])) {
        $query_args['tax_query'][] = [
            'taxonomy' => $atts['post_tax'],
            'field' => 'term_id',
            'terms' => $atts['tax_id']
        ];
    } elseif (!empty($atts['tax_slug'])) {
        $query_args['tax_query'][] = [
            'taxonomy' => $atts['post_tax'],
            'field' => 'slug',
            'terms' => $atts['tax_slug']
        ];
    }

    $query = new WP_Query($query_args);

    if (!$query->have_posts()) {
        return '<p>No related posts found.</p>';
    }

    // Begin table
    $output = '<table class="related-posts-table">';

    $col_count = 0;
    $cols = max(1, (int) $atts['cols']);

    while ($query->have_posts()) {
        $query->the_post();

        // Open a new row if necessary
        if ($col_count % $cols === 0) {
            $output .= '<tr>';
        }

        // Featured image and link
        $thumbnail = get_the_post_thumbnail_url(get_the_ID(), 'full');
        $thumbnail = $thumbnail ?: 'https://via.placeholder.com/' . $atts['width'] . 'x' . $atts['height']; // Placeholder image

        $permalink = get_permalink();
        $title = get_the_title();
        $excerpt = get_the_excerpt();

        if (empty($excerpt)) {
            $content = wp_strip_all_tags(get_the_content(), true);
            $words = explode(' ', $content);
            $excerpt = implode(' ', array_slice($words, 0, $atts['words'])) . '...';
        }

        $desc_class = $atts['desc_class'] ? " class=\"{$atts['desc_class']}\"" : '';

        $output .= '<td>';
        $output .= "<a href=\"$permalink\"$target><img src=\"$thumbnail\" alt=\"$title\" style=\"width:{$atts['width']}px;height:{$atts['height']}px;\"></a>";
        $output .= "<div><{$atts['title_type']}><a href=\"$permalink\"$target>$title</a></{$atts['title_type']}><p$desc_class>$excerpt</p></div>";
        $output .= '</td>';

        $col_count++;

        // Close the row if necessary
        if ($col_count % $cols === 0) {
            $output .= '</tr>';
        }
    }

    // Close the last row if it's incomplete
    if ($col_count % $cols !== 0) {
        $output .= '</tr>';
    }

    $output .= '</table>';

    wp_reset_postdata();

    return $output;
}

add_shortcode('related_posts', 'related_posts_shortcode');

En ChatGPT is gelijk zo vriendelijk instructies te geven hoe je de plugin kan installeren:

De code is aangepast om als een volledig functionele WordPress-plugin te werken. Kopieer en plak de bijgewerkte code in een nieuw bestand met de naam related-posts-shortcode.php en plaats dit bestand in een map genaamd related-posts-shortcode binnen de map wp-content/plugins van je WordPress-installatie. Activeer de plugin vervolgens via het WordPress-dashboard onder “Plugins”.

Kan ik zo ook een complete plugin als WooCommerce maken?

En voor je nu denkt, dat je een software development bedrijf kan beginnen om op deze manier plugins te gaan ontwikkelen, even een paar waarschuwingen.

Wat je hier ziet is een eigenlijk heel eenvoudige plugin, die weinig interferentie met de API van WordPress zelf heeft. Jouw wens is eigenlijk heel eenvoudig: Je wilt een shortcode, die een bepaalde output zal bieden.

Wanneer je kijkt in de code snippets in mijn snippet base, zal je opvallen dat een groot aantal codevoorbeelden gebruik maken van de ‘hooks’ van WordPress. Op dit moment is het ChatGPT niet altijd even duidelijk welke hooks er gebruikt moeten worden om welk effect te bereiken.

Ook is de hoeveelheid informatie die ChatGPT in één project kan verwerken beperkt. Zelf maak ik niet zo intensief gebruik van ChatGPT op deze manier, dat ik tegen de grenzen ben aangelopen, maar er zijn beperkingen aan.

Bovendien is het belangrijk ook ‘de juiste taal’ te gebruiken. Om grotere plugins op deze wijze te maken, zal je gebruik moeten maken van de juiste benamingen voor de verschillende onderdelen van WordPress.

Het begrijpen van de code -ook al had je hem misschien zelf nooit kunnen bedenken- is ook belangrijk. Zoals we al hadden gezien bij de prompt ‘Schrijf de code voor een WordPress plugin’, ChatGPT vraagt niet om verduidelijking. Vertel je iets niet, dan zal hij van eigen ‘veronderstellingen’ uitgaan. Het is dus handig, wanneer je in een vroeg stadium kunt constateren, dat de code niet helemaal klopt met het verzoek.

En als ik nu toch zelf een plugin wil schrijven met AI?

Voor grotere projecten dan shortcodes etc is enige kennis van PHP en kennis van de interne werking van WordPress noodzakelijk. Het ontwikkelen wordt dan een iteratief proces, waarbij je eerst de meest eenvoudige functies door ChatGPT laat ontwikkelen en je deze later via het ChatGPT canvas uitbreidt tot een volwaardige plugin.

Natuurlijk heb ik dat ook geprobeerd. En dat kan heel goed. Wil jij ook leren hoe je zelf een plugin via AI kan ontwikkelen? Kijk dan nog eens goed naar de PHP code op deze pagina. Wanneer jij het idee hebt, ‘dat je het begrijpt’, dat is dus iets anders dan ‘dat je het zelf uit zou kunnen voeren’, dan is de cursus ‘Ontwikkel je eerste WordPress Plugin met ChatGPT‘ waarschijnlijk iets voor jou!

Voetnoot:

Zoals ik al mijn verhaal begon: Het draait allemaal om de juiste definities. En in mijn enthousiasme ben ik één heel belangrijke parameter voor de shortcode vergeten. Het aantal blogposts wat opgehaald moet worden. En ik kan er nog een aantal andere handige parameters bij bedenken.

Wanneer je samen met mij het genereren van de code hebt meegedaan, dan zal dat voor jou een kleine moeite zijn om deze extra gegevens via ChatGPT aan het eindresultaat toe te voegen!

Dit blogartikel geeft een antwoord op onder meer de volgende vragen:

• Wat is een WordPress-shortcode en hoe werkt het?
• Hoe kan AI, zoals ChatGPT, worden ingezet bij het ontwikkelen van WordPress-shortcodes?
• Welke stappen zijn nodig om een shortcode te maken die een willekeurige quote weergeeft?
• Hoe kun je een ontwikkelomgeving opzetten met LocalWP en Visual Studio Code voor het bouwen van shortcodes?
• Wat zijn de voordelen en beperkingen van het gebruik van AI bij het programmeren van WordPress-functionaliteiten?