WordPress shortcodes gebruiken: Complete gids voor beginners

Shortcodes zijn een van de handigste features van WordPress. Met een simpele code tussen vierkante haken voeg je complexe functionaliteit toe aan je pagina's. Denk aan galerijen, contactformulieren, prijstabellen en meer. In deze gids leer je alles over WordPress shortcodes.

Wat zijn shortcodes?

Shortcodes zijn kleine stukjes code tussen vierkante haken die WordPress vervangt door iets anders. Bijvoorbeeld:

[gallery]

Dit toont automatisch een galerij van afbeeldingen. Je hoeft geen HTML te schrijven - WordPress doet het werk.

Shortcodes zijn populair omdat ze:

Complexe functionaliteit simpel maken: Eén regel code voor iets dat anders tientallen regels HTML/PHP zou kosten
Herbruikbaar zijn: Gebruik dezelfde shortcode op meerdere plaatsen
Consistent blijven: De output blijft hetzelfde, ongeacht waar je de shortcode plaatst
Door iedereen te gebruiken zijn: Geen programmeerkennis nodig

Ingebouwde WordPress shortcodes

WordPress heeft standaard enkele shortcodes ingebouwd:

Gallery shortcode

Toont een galerij van afbeeldingen uit de mediabibliotheek:

[gallery ids="1,2,3,4,5"]

Beschikbare parameters:

ids: Komma-gescheiden lijst van afbeelding IDs
columns: Aantal kolommen (standaard 3)
size: Afbeeldingsgrootte (thumbnail, medium, large, full)
orderby: Sortering (menu_order, title, rand)
link: Link naar attachment page of bestand

Voorbeeld met parameters:

[gallery ids="10,11,12" columns="4" size="medium" link="file"]

Audio shortcode

Embed een audiobestand:

[audio src="http://voorbeeld.nl/audio.mp3"]

Parameters:

src: URL van het audiobestand
loop: Herhaal automatisch (on/off)
autoplay: Start automatisch (niet aanbevolen)
preload: none, auto of metadata

Video shortcode

Embed een videobestand:

[video src="http://voorbeeld.nl/video.mp4" width="640" height="360"]

Parameters vergelijkbaar met audio, plus width en height voor afmetingen.

Playlist shortcode

Maak een audio of video playlist:

[playlist ids="10,11,12" type="audio"]

Caption shortcode

Voeg een bijschrift toe aan een afbeelding:

[caption id="attachment_1" align="aligncenter" width="300"]
<img src="afbeelding.jpg" /> Dit is het bijschrift
[/caption]

Embed shortcode

Embed externe content van ondersteunde platforms:

[embed width="640"]https://www.youtube.com/watch?v=xxxxx[/embed]

WordPress ondersteunt automatische embeds voor YouTube, Vimeo, Twitter, Instagram en meer. Vaak is de URL plakken voldoende zonder shortcode.

Plugin shortcodes

De meeste shortcodes komen van plugins. Populaire voorbeelden:

Contact Form 7

[contact-form-7 id="123" title="Contactformulier"]

WooCommerce

[products limit="4" columns="4" category="kleding"]
[add_to_cart id="99"]
[woocommerce_cart]
[woocommerce_checkout]

Elementor

[elementor-template id="1234"]

TablePress

[table id=1 /]

Elke plugin documenteert zijn eigen shortcodes. Zoek in de plugin instellingen of documentatie naar beschikbare opties.

Shortcodes gebruiken

In de klassieke editor

Typ de shortcode direct in de visuele of tekst editor:

Hier is mijn galerij:

[gallery ids="1,2,3"]

En hier gaat de tekst verder.

In Gutenberg

Gutenberg heeft een speciaal Shortcode blok:

Klik op + om een blok toe te voegen
Zoek naar "Shortcode"
Selecteer het Shortcode blok
Plak je shortcode in het veld

Alternatief: veel plugins bieden eigen Gutenberg blokken die de shortcode vervangen.

In widgets

De meeste widgets ondersteunen shortcodes. Plaats de shortcode in een Tekst widget of het Custom HTML widget.

In thema templates

Shortcodes werken niet automatisch in PHP bestanden. Gebruik de do_shortcode functie:

<?php echo do_shortcode('[gallery ids="1,2,3"]'); ?>

Eigen shortcodes maken

Met basiskennis PHP kun je eigen shortcodes maken. Voeg de code toe aan functions.php of een site-specifieke plugin.

Simpele shortcode

Een shortcode die vaste tekst toont:

function mijn_shortcode() {
    return '<p>Dit is mijn aangepaste content!</p>';
}
add_shortcode('mijn_tekst', 'mijn_shortcode');

Gebruik: [mijn_tekst]

Shortcode met attributen

Een shortcode die parameters accepteert:

function groet_shortcode($atts) {
    $atts = shortcode_atts(array(
        'naam' => 'bezoeker',
        'kleur' => 'blue'
    ), $atts);

    return '<p style="color:' . esc_attr($atts['kleur']) . '">Hallo, ' . esc_html($atts['naam']) . '!</p>';
}
add_shortcode('groet', 'groet_shortcode');

Gebruik: [groet naam="Jan" kleur="red"]

Enclosing shortcode

Een shortcode die content omsluit:

function highlight_shortcode($atts, $content = null) {
    return '<span class="highlight">' . do_shortcode($content) . '</span>';
}
add_shortcode('highlight', 'highlight_shortcode');

Gebruik: [highlight]Deze tekst is gemarkeerd[/highlight]

Let op do_shortcode($content) - dit zorgt dat geneste shortcodes ook werken.

Best practices voor shortcodes

Gebruik beschrijvende namen

Goed: [prijstabel], [teamleden], [testimonial] Slecht: [sc1], [x], [ding]

Documenteer je shortcodes

Maak een overzicht van beschikbare shortcodes en hun parameters. Dit helpt redacteuren de juiste shortcode te gebruiken.

Escape output altijd

Gebruik esc_html(), esc_attr() en vergelijkbare functies om XSS aanvallen te voorkomen:

return '<a href="' . esc_url($atts['link']) . '">' . esc_html($atts['tekst']) . '</a>';

Return, niet echo

Shortcode functies moeten content retourneren, niet echoën:

// Goed
return '<p>Content</p>';

// Fout
echo '<p>Content</p>';

Echo veroorzaakt dat content op de verkeerde plek verschijnt.

Gebruik output buffering voor complexe HTML

Bij veel HTML is output buffering handiger:

function complexe_shortcode($atts) {
    ob_start();
    ?>
    <div class="mijn-component">
        <h2><?php echo esc_html($atts['titel']); ?></h2>
        <p><?php echo esc_html($atts['tekst']); ?></p>
    </div>
    <?php
    return ob_get_clean();
}

Shortcodes en Gutenberg

Met de komst van Gutenberg worden shortcodes minder prominent. Blokken bieden een betere gebruikerservaring met live preview en visuele editing.

Wanneer shortcodes nog nuttig zijn

Legacy content: Bestaande pagina's met shortcodes blijven werken
Widgets: Niet alle widget-gebieden ondersteunen blokken
Templates: Shortcodes in PHP templates blijven handig
Eenvoudige output: Voor simpele tekst-vervangingen zijn shortcodes sneller te maken dan blokken

Shortcode naar blok migreren

Veel plugins bieden nu zowel shortcodes als blokken. Overweeg bij nieuwe implementaties direct een blok te maken met de @wordpress/create-block tool.

Troubleshooting

Shortcode wordt niet uitgevoerd

Als je [shortcode] letterlijk ziet in plaats van de output:

Controleer of de plugin actief is
Verifieer de exacte shortcode naam (hoofdlettergevoelig)
Check op typefouten in parameters
Zorg dat je in een context bent die shortcodes ondersteunt

Shortcode werkt in bericht maar niet in widget

Oudere thema's ondersteunen mogelijk geen shortcodes in widgets. Voeg toe aan functions.php:

[add_filter](/kennisbank/wordpress-hooks-uitleg)('widget_text', 'do_shortcode');

Shortcode breekt layout

De shortcode output kan conflicteren met je thema styling. Inspecteer de HTML output en voeg zo nodig aangepaste CSS toe.

Dubbele output

Als content twee keer verschijnt, gebruikt de shortcode functie waarschijnlijk echo in plaats van return.

Shortcode plugins

Shortcoder

Maak eigen shortcodes via de WordPress interface zonder code:

Installeer Shortcoder
Maak een nieuwe shortcode
Voeg HTML, tekst of andere shortcodes toe
Gebruik je aangepaste shortcode overal

Shortcodes Ultimate

Collectie van 50+ kant-en-klare shortcodes:

Buttons
Tabs en accordeons
Sliders
Pricing tables
Google Maps
En meer

Display Posts

Toon lijsten van berichten met uitgebreide filter opties:

[display-posts category="nieuws" posts_per_page="5"]

Veelgestelde vragen

Is dit geschikt voor beginners? Dit onderwerp kan technisch lijken, maar met de juiste aanpak en tools is het voor iedereen toegankelijk. Begin met de basis en bouw van daaruit verder.

Wat zijn de kosten? De kosten variëren sterk afhankelijk van je behoeften en gekozen oplossingen. Gratis opties bestaan, maar betaalde alternatieven bieden vaak meer features, support en betrouwbaarheid.

Hoe lang duurt implementatie? Van een paar minuten voor eenvoudige setups tot dagen of weken voor complexe implementaties. Plan realistisch en test grondig voordat je live gaat.

Wat als ik hulp nodig heb? De meeste providers bieden support via chat, e-mail of telefoon. Online communities en documentatie zijn ook waardevolle bronnen.

Best practices

Documenteer je configuratie zodat je later weet wat je hebt ingesteld en waarom. Dit versnelt troubleshooting en overdracht.

Test voordat je live gaat in een staging-omgeving. Voorkom onverwachte problemen voor je bezoekers.

Houd alles up-to-date voor de beste beveiliging en performance. Stel herinneringen in voor regelmatig onderhoud.

Maak backups voordat je grote wijzigingen doorvoert. Een goede backup bespaart je uren werk bij problemen.

Monitor je systemen zodat je problemen vroeg ontdekt. Uptime-monitoring en loganalyse zijn essentieel.

Volgende stappen

Na het implementeren van bovenstaande is het verstandig om:

Alles te testen via verschillende apparaten en browsers
Performance te meten met tools zoals GTmetrix of PageSpeed Insights
Documentatie bij te werken met je specifieke configuratie
Team te informeren over wijzigingen en nieuwe procedures
Monitoring in te richten voor proactief onderhoud

Meer informatie: WordPress.org documentatie

WordPress shortcodes gebruiken: handige codes voor je content