Hooks zijn één van de belangrijkste tools in het arsenaal van de WordPress ontwikkelaar. Ze vormen de basis van het ontwikkelen van WordPress plugins en thema’s. Je kunt de vele ingebouwde hooks van WordPress gebruiken om je eigen code te “aan te haken” bij de WordPress Core en iets te doen of te bewerken.

Er zijn twee soorten WordPress hooks: actions en filters. Hooks zijn zo veelvoorkomend dat ook de WordPress Core zelf ze veel gebruikt. WordPress bevat een manier om je eigen custom hooks te definiëren zodat andere ontwikkelaars weer kunnen aanhaken bij jouw code.

Leer hier hoe het werken met actions, filters en custom hooks essentieel is om een expert te worden in WordPress development.

De eerste helft van dit artikel behandelt de basics van WordPress hooks en legt uit hoe ze werken, aan de hand van praktische voorbeelden. In de tweede helft zul je leren hoe je hooks kunt gebruiken om WordPress te customizen, je eigen custom hooks te maken en ze te gebruiken om je eigen, uitbreidbare plugins te bouwen.

Klinkt spannend, toch? Laten er dan meteen induiken!

Wat zijn WordPress hooks?

Een WordPress pagina is opgebouwd uit busladingen functions en database-query’s. De WordPress kern, plugins en het thema werken allemaal samen om de elementen op een pagina te produceren, zoals de tekst, afbeeldingen, scripts en styling. Als alles is opgebouwd, stelt de browser alles samen en geeft de pagina weer.

WordPress hooks maken het mogelijk om op specifieke punten “aan te haken” bij dit bouwproces en daarin je eigen custom code te draaien. De voornaamste functie van hooks is om het mogelijk te maken om features aan WordPress toe te voegen of te bewerken, zonder dat je de kernbestanden hoeft aan te passen.

Hooks kunnen je zodoende helpen om WordPress uit te breiden met je eigen code.
Hooks kunnen je zodoende helpen om WordPress uit te breiden met je eigen code.

De WordPress Plugin API maakt de functionaliteit van WordPress hooks mogelijk. Je kunt hooks gebruiken door specifieke WordPress functions aan te roepen (te callen), die hook functions worden genoemd, binnen specifieke instances tijdens de WordPress runtime.

Door hook functions te gebruiken kun je je eigen custom code bundelen met een callback function en dat registeren met elke hook die je wilt. Als die eenmaal geregistreerd is, zal deze callback function altijd gaan draaien waar de hook is, waardoor je de standaard features van WordPress kunt vervangen of veranderen.

De positie van de hook binnen het uitvoeringsproces van de code is een belangrijke factor. In de komende secties zul je hier meer over leren.

Twee typen WordPress hooks: Actions en Filters

WordPress heeft twee verschillende typen hooks, die actions en filters genoemd worden. Actions laten je iets doen op bepaalde vooraf gedefinieerde punten in de WordPress runtime. Filters bewerken de data die door WordPress worden verwerkt en returndeze.

Actions worden zo gedefinieerd binnen de WordPress code:

do_action( 'action_name', [optional_arguments] );

De string action_name is de naam van de action. Je kunt de variabele [optional_arguments] specificeren om extra arguments naar de callback function te sturen. Als je dit veld niet specificeert, zal de default value deze leeg laten.

Voorbeeld: De do_action('wp_head') action kan gehookt worden om custom code uit te laten voeren elke keer dat WordPress de site header verwerkt. Deze action heeft geen andere arguments.

Filters worden zo gedefinieerd binnen de WordPress code:

apply_filters( 'filter_name', 'value_to_be_filtered', [optional_arguments] );

De string filter_name is de naam van het filter, de variable value_to_be_filtered is de value waarop gefilterd wordt en die geretourneerd wordt en de variable [optional_arguments] kan net als bij actions extra arguments doorgeven.

Voorbeeld: Het filter apply_filters( 'admin_footer_text' , string $text ) kan gehookt worden aan de tekst die in de admin footer wordt weergegeven om de footer te bewerken. Sinds WordPress 5.4 zal de default value de zin Thank you for creating with WordPress. weergeven in de footer van het admin-gebied.

Je zult verderop leren hoe je actions en filters kun aanhaken met allerlei voorbeelden uit de WordPress kern.

Als je code eenmaal gehookt is, kun je je code iets laten doen of bewerken op je site. Zo kun je bijvoorbeeld hooks gebruiken om een automatische mail te versturen nadat je een artikel hebt gepubliceerd, of custom stylesheets te laden om de weergave van je site te veranderen.

WordPress hooks helpen je om je website te bewerken of iets te laten doen
WordPress hooks helpen je om je website te bewerken of iets te laten doen

De eenvoudigste manier om hooks te begrijpen is door je WordPress website voor te stellen als het bouwen van een huis.

Hooks lijken dan op een hijskraan waarmee onderdelen worden verplaatst. De items die verplaatst worden zijn de callback functions, waaronder jouw custom code. Deze items (of functions) kunnen je helpen bij het bouwen of veranderen van je huis.

Voorbeeld van aanhaken bij de 'wp_head' action in WordPress
Voorbeeld van aanhaken bij de ‘wp_head’ action in WordPress

Callback functions kunnen normale PHP functions zijn, standaard WordPress functions of custom functions die je zelf gedefinieerd hebt.

We kunnen alleen de bijpassende items hangen aan dragers die bij specifieke hooks horen. Zo kunnen actions alleen gehookt worden met action functions. En kunnen filters alleen gehookt worden aan filter functions.

Bij een hijskraan is het een hoop gedoe om dragers te veranderen, maar WordPress maakt dit gelukkig supersimpel doordat het meer dan 2200 types standaard hooks bevat.

WordPress 5.1 heeft 2200+ native hooks (bron: Adam Brown)
WordPress 5.1 heeft 2200+ native hooks (bron: Adam Brown)

Je kunt hooks door de hele WordPress kern vinden, waardoor je aan kunt haken op de positie waar jij dat wilt, en precies op die plek je custom code kunt uitvoeren.

Hooks vs actions vs filters

Het WordPress Plugin Handbook zegt het volgende:

Hooks zijn een manier waarop een stukje code een ander stukje code kan bewerken… Er zijn twee soorten hooks: Actions en Filters.

Er bestaat veel verwarring over hoe de termen hook, action en filter gebruikt moeten worden. Een aantal tutorials en gidsen verwarren ze namelijk met de bijbehorende functions. Een belangrijke oorzaak van deze verwarring is de complexe werking van hooks.

Wanneer je goed in de WordPress kern kijkt, zul je zien dat er weinig verschil zit in het toevoegen van een action of een filter. Dit is bijvoorbeeld de broncode voor de add_action() function van het bestand wp-includes/plugin.php:

function add_action( $tag, $function_to_add, $priority = 10, $accepted_args = 1 ) {      
    return add_filter( $tag, $function_to_add, $priority, $accepted_args );
}

De add_action() function vraagt de add_filter() function op en retourneert die value. Waarom? Omdat ze fundamenteel gezien op dezelfde manier werken, op één belangrijk verschil na.

De apply_filters() function retourneert een value die bestaande data types kan veranderen, terwijl de do_action() function niks retourneert (NULL value binnen PHP).

Als je het nog niet begrijpt, geen zorgen! Als je eenmaal de eerste helft van dit artikel gelezen hebt zal het helemaal duidelijk zijn. Wij zullen ons in dit artikel houden aan de officiële WordPress Codex terminologie, aangezien die duidelijk, precies en universeel is. Zoals je waarschijnlijk gemerkt hebt, gebruiken we vaktermen als value (waarde), function (functie) in het Engels. Dit doen we om verwarring te voorkomen, aangezien verreweg de meeste ontwikkelaars (uitsluitend) bekend zijn met de Engelse terminologie.

Voor nu is vooral belangrijk om vertrouwd te raken met de hook-routine hieronder.

De hook routine: hooks, hook functions en callback functions
De hook routine: hooks, hook functions en callback functions

Laten we eerst het verschil bekijken tussen actions en hooks.

WordPress Hooks
Actions Filters
Actions worden gebruikt om custom functions uit te voeren op een specifiek punt tijdens de uitvoering van de WordPress kern. Filters worden gebruikt om data te bewerken of customizen die door andere functions worden gebruikt.
Actions worden gedefinieerd/gemaakt via de function do_action('action_name') in de WordPress kern. Filters worden gedefinieerd/gemaakt via de function apply_filters('filter_name','value_to_be_filtered; ) in de WordPress kern.
Actions worden ook wel action hooks genoemd. Filters worden ook wel filter hooks genoemd.
Actions kunnen alleen gehookt worden aan action functions. Bijv. add_action()remove_action(). Filters kunnen alleen gehookt worden aan filter functions. Bijv.  add_filter()remove_filter().
Action functions hoeven niet per se arguments door te geven aan hun callback functions. Filter functions moeten tenminste één argument doorgeven aan hun callback functions.
Action functions kunnen allerlei soorten taken uitvoeren, waaronder het gedrag van hoe WordPress werkt. Filter functions bestaan alleen om de data die ze krijgen door hun filters te laten gaan.
Actions functions moeten niks return. Maar ze kunnen wel de output echo‘en of met de database werken. Filter functions moeten hun veranderingen return als output. Zelf als een filter niks verandert, moet de niet-aangepaste input nog altijd return worden.
Actions kunnen bijna alles uitvoeren, zolang de code maar logisch is. Filters moeten op een geïsoleerde manier werken, waardoor ze bijna nooit onbedoelde bijeffecten hebben.
Samenvatting: Een action onderbreekt de normale uitvoering van de code om iets te doen met de informatie die de function krijgt, maar retourneert verder niks, en sluit dan af. Samenvatting: Een filter verandert de informatie die het krijgt en stuurt deze terug naar de calling hook function, en eventuele andere functions kunnen deze value ook gebruiken.

Soms kun je zowel een action als een filter gebruiken om een bepaald doel te bereiken. Als je bijvoorbeeld de tekst van een artikel wilt aanpassen, kun je een callback function registreren bij de publish_post action en de inhoud van het artikelen veranderen op het moment dat het opgeslagen wordt in de database.

// definieer de callback function om de tekst te veranderen
function change_text_callback() { 
    // voeg de code hier toe om de tekst te veranderen
}

// haak hier aan bij de 'publish_post' action met de add_action() function
add_action( 'publish_post', 'change_text_callback' );

Of je kunt een andere callback function registreren met de the_content filter om de inhoud van het artikel aan te passen voor het wordt weergegeven in de browser.

// definieer de callback function om de tekst te veranderen
function change_text_another_callback( $content ) { 
    // voeg code toe om de tekst te veranderen en het vervolgens te retourneren
    return $filtered_content;
}

// haak aan bij de 'the_content' filter met de add_filter() function
add_filter( 'the_content', 'change_text_another_callback');

De twee verschillende manieren geven uiteindelijk hetzelfde resultaat. Weten wanneer je beter de ene en wanneer beter de andere kunt gebruiken is de sleutel om een echt goede WordPress ontwikkelaar te worden.

Hoe werken WordPress hooks?

Het eerdere voorbeeld van het huis legt een beetje uit hoe je de basis van hooks kunt zien, maar geeft nog niet de complexiteit weer van hóe ze precies functioneren. De belangrijkste concepten daarbij zijn hook position en hook specificity, oftewel de plek van een hook en hoe specifiek een hoek is.

Een beter voorbeeld is door je het proces van het samenstellen van een WordPress webpagina voor te stellen als het productieproces van een auto. Maar anders dan bij het produceren van een auto, dat een tijdje kan duren, is het in elkaar zetten van een webpagina nagenoeg onmiddellijk gedaan.

Het in elkaar zetten van een webpagina lijkt op het assembleren van een auto
Het in elkaar zetten van een webpagina lijkt op het assembleren van een auto

Net zoals er steeds een onderdeel toegevoegd wordt aan een auto in een moderne assemblagelijn, wordt een WordPress webpagina ook per element opgebouwd door de server en client samen.

De WordPress kern is te vergelijken met de motor, het chassis en de andere essentiële onderdelen, die de “kern”-functionaliteit mogelijk maken.

Je kunt wel een functionele website maken met alleen maar de WordPress kern, maar dat zou vrij saai zijn. Je hebt daarnaast gave features nodig. En dat is waarbij WordPress plugins en thema’s om de hoek komen kijken, die trouwens allebei veel hooks gebruiken.

In het voorbeeld hierboven kun je elk genummerd station binnen de productielijn zien als een hook binnen de WordPress kern. Er zijn twee soorten stations, net zoals de actions en filters. Elk station bevat een specifiek type sleuf waar alleen bepaalde tools in passen, te vergelijken met de action functions en filter functions.

Al deze stations worden op regelmatige intervallen neergezet om zo efficiënt en modulair mogelijk te zijn.

Afhankelijk van de benodigdheden op een specifieke plek, kunnen we het meest geschikte stuk gereedschap aanhaken op dat specifieke stations. Deze tools zijn de callback functions die gebruikt worden om met WordPress te communiceren.

Sommige tools kunnen de werking van een auto aanzienlijk veranderen, net zoals callback die bij actions geregistreerd zijn. Andere tools zijn er alleen maar om het uiterlijk van een auto te veranderen, zoals callbacks van filters.

Het is cruciaal om op het juiste station het juiste gereedschap te gebruiken als je een functionele auto wilt maken. Op dezelfde manieren helpen hooks ons om WordPress aan te passen aan onze unieke behoeften.

Als je deze vergelijking verder doortrekt, kun je plugins vergelijken met het toevoegen van handige features aan de auto, zoals airbags, een radio, sleutelloos beveiligingssysteem, etc (zoals bijvoorbeeld deze om de functionaliteit van WordPress uit te breiden). Thema’s kun je dan vergelijken met het aanpassen van het uiterlijk van de auto, zoals het algehele design, de kleur, wieldoppen, etc (hier lees je hoe je het WordPress thema kunt customizen).

Waar registreer je hooks en hun functions?

Er zijn twee aanbevolen manieren om hooks toe te voegen binnen WordPress:

Voor deze tutorial beginnen we met het maken van een plugin. Om dat te doen maak je een nieuwe map aan binnen /wp-content/plugins/.

Ik noem mijn plugin salhooks, maar je kunt het zo noemen als je zelf wilt. Volgens de WordPress richtlijnen moet je een PHP bestand met dezelfde naam (salhooks.php) hebben binnen je plugin directory.

Voeg de volgende headervelden toe aan je pluginbestand om het te registreren bij WordPress. Je kunt meer info krijgen over plugin header-eisen in de WordPress-Codex

<?php

/*
Plugin Name:  Salhooks
Version    :  1.0
Description:  Demonstrating WordPress Hooks (Actions and Filters) with multiple examples.
Author     :  Salman Ravoof
Author URI :  https://www.salmanravoof.com/
License    :  GPLv2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  salhooks
*/

//=================================================
// Security: Abort if this file is called directly
//=================================================
if ( !defined('ABSPATH') ) { 
    die;
}

Sla dit bestand op en activeer de plugin vervolgens binnen je WordPress dashboard. Ik zal deze plugin gebruiken binnen een lokale WordPress installatie om te demonstreren hoe hooks werken.

Je kunt trouwens ook bestanden van de WordPress kern direct bewerken om hooks te registreren. Maar dit is niet aanbevolen omdat al je eigen code wordt overschreven zodra je WordPress updatet. Hierdoor heeft het ook weinig zin om hooks toe te voegen binnen je parent-thema.

WordPress hooks gebruiken

Een WordPress-hook alleen doet helemaal niks. Deze is in feite aan het wachten binnen de code, totdat deze gecalld wordt door een hook function. Om een hook te gebruiken, moet je nog tenminste twee andere functions callen.

Allereerst moet je de hook registreren met een hook function en een callback function erheen laten refereren. Vervolgens moet je de callback function die je eerder in de hook function gebruikte definiëren. WordPress zal deze callback function vervolgens elke keer uitvoeren als de hook geactiveerd wordt.

De volgorde waarin je deze functions definieert maakt niet uit, maar het is wel uit praktisch oogpunt slim om ze dicht bij elkaar te zetten.

Actions en filters hebben specifieke hook functions. Vanaf hier zullen we daar dan ook aan refereren als action functions en filter functions. Zoals je ziet hebben ze allebei hun eigen syntax en eisen qua parameters.

Hooken van een action

Actions bieden een manier om je eigen custom code uit te voeren op een specifiek punt tijdens het uitvoeren van de WordPress kern, plugins of thema’s.

De add_action() action function

Je kunt een callback function met een action registreren door de volgende stappen te volgen:

  1. Definieer een callback function met daarbinnen je eigen code. Deze callback function zal uitgevoerd worden wanneer de action waarmee het is geregistreerd wordt geactiveerd binnen de uitvoering van WordPress.
  2. Hook je callback function aan de action die je wilt via de add_action() function. Volgens de WordPress Codex moet de add_action() function tenminste twee parameters doorgeven:
  • Naam van de action waaraan het moet hooken.
  • Naam van de callback function die uitgevoerd wordt wanneer de action getriggerd wordt.
  1. De add_action() function accepteert daarnaast ook nog twee optionele parameters voor het instellen van priority en het number of arguments. Hier zullen we het later over hebben.

Het is good practice om de parameters van je callback function te benoemen, zo dicht mogelijk bij de parameters die door de hook function doorgegeven worden.

Laten we eens kijken naar een voorbeeld hoe je de add_action() function kunt gebruiken.

// definieer de callback function, de arguments zijn optioneel
function example_callback( $arg1, $arg2 ) {
    // laat je code iets doen met de arguments
}

// haak de callback function aan de 'example_action'
add_action( 'example_action', 'example_callback', [priority], [no_of_args] );

// 'priority' en 'number of arguments' zijn optionele parameters

Voorbeeld van “hooking” van een action

WordPress heeft een ingebouwde action die init heet. Deze wordt geactiveerd nadat WordPress klaar is met laden en de gebruiker geverifieerd heeft, nog voordat er headers worden verstuurd. Veel plugins gebruiken deze hook als startpunt om hun code te initialiseren aangezien bijna alle grotere WordPress features geladen zijn tegen de tijd dat WordPress deze action uitvoert.

WordPress heeft nog een soortgelijke action die admin_init heet. Deze activeert wanneer het adminscherm geïnitialiseerd wordt, terwijl de init action pas geactiveerd wordt als WordPress helemaal klaar is met laden.

Laten we onze eigen code uitvoeren om een eenvoudig bericht te echo-en tijdens de uitvoering van de init action. Dat doen we zo:

function custom_callback_function(){
    // voeg je custom code toe om iets te doen
    echo 'I will be fired on WordPress initialization';
}
add_action( 'init', 'custom_callback_function' );

Je kunt het bericht zien bovenin links binnen mijn lokale WordPress installatie.

Het ziet er verder niet uit, maar het gaat om het idee.
Het ziet er verder niet uit, maar het gaat om het idee.

Actions vinden die ondersteund worden door WordPress

WordPress bevat actions voor elk moment dat het iets doet, zoals wanneer een gebruiker inlogt of een nieuw artikel publiceert. Je kunt een volledige lijst met actions die WordPress ondersteunt, vinden in de Plugin API/Action Reference pagina.

Er is een action voor elk moment
Er is een action voor elk moment

De Codex heeft alle actions die hier genoemd worden opgesplitst in diverse categorieën en op volgorde gerangschikt waarin ze binnen WordPress uitgevoerd worden.

In de meeste gevallen zullen deze actions niks doen, omdat er niks aan gehookt is. Maar indien nodig, kan je er dus iets aan hooken.

Krijg je keuzestress van zoveel actions? Dat is normaal. Naarmate je hier meer ervaring in krijgt en vaker de broncode van de WordPress kern doorneemt, wordt het steeds makkelijker om de perfecte hook voor je toepassing te vinden. Zoek op de term “do_action” en je zal allerlei actions vinden waarop je kunt hooken.

Additionele parameters voor add_action()

De add_action() function kan nog twee parameters verwerken: één voor priority en de andere voor het number of arguments. Alhoewel ze slechts optioneel zijn, kun ze superhandig zijn, als je ze goed gebruikt.

Priority

De eerste extra parameter die add_action() ondersteunt, steltpriority in. Deze parameter kan alleen een positieve integer (geheel getal) zijn. Hoe lager het getal, hoe hoger priority (zie het als een ranglijst) en hoe eerder de function uitgevoerd wordt. De standaard value is 10 als je deze niet verder definieert.

Om te zien hoe dit werkt, registreren we drie callback functions met de init action, maar elk met verschillen priorityen.

// priority is ingesteld op 9, wat lager is dan 10, waardoor het hoger is gerankt
add_action( 'init', 'i_am_high_priority', 9 );

// als er geen priority is ingesteld, dan wordt de standaard value 10 gebruikt
add_action( 'init', 'i_am_default_priority');

// priority is ingesteld op 11, wat lager is dan 10, waardoor het lager is gerankt
add_action( 'init', 'i_am_low_priority', 11 );

In de voorbeelden hierboven zal de callback function met het laagste getal (dus hoogste prioriteit) als eerste uitgevoerd worden, en die met het hoogste getal als laatste. Als priorityen gelijk zijn (bijvoorbeeld wanneer je ze niet gespecificeerd hebt), worden ze uitgevoerd in de volgorde waarin je ze registreert.

Prioriteit is vooral erg belangrijk wanneer een enkele hook geregistreerd is met diverse callback functions. Om onverwachte resultaten te voorkomen, kun je het beste een prioriteit voor elke callback function instellen, zodat ze in een gecontroleerde volgorde draaien.

Number of Arguments

Standaard krijgt elke callback function die je registreert via de add_action() function slechts één argument. Maar soms wil je extra data doorgeven aan de callback function.

Daarom accepteert de add_action() function een optionele parameter voor het instellen van het number of arguments.

Een goed voorbeeld om dit te illustreren is de comment_post action. Deze action wordt direct uitgevoerd nadat WordPress een reactie (comment) toevoegt aan de database. Als je de parameter voor het number of arguments niet instelt, zal deze slechts één value doorgeven aan de callback function, wat in dit geval het comment_ID zou zijn.

// registreer de hook met 'priority' en 'number of arguments' parameters
add_action( 'comment_post', 'show_message_function', 10, 3 );

// definieer de callback function
function show_message_function( $comment_ID, $comment_approved, $commentdata ) {
    // checkt met de tweede parameter of een reactie is goedgekeurd
    if( 1 === $comment_approved ){
        // runt de code alleen als de reactie is goedgekeurd
    }
}

Als je de parameter voor het number of arguments op 3 instelt zoals in het voorbeeld hierboven, zal de action function drie values doorgeven: comment_ID, comment_approved, en commentdata.

WordPress zet de value van comment_approved op 1 voor goedgekeurde reacties, op 0 als ze niet goedgekeurd zijn, en op ‘spam‘ als de reactie gemarkeerd is als spam.

De variabele commentdata is een array die alle data over de reactie bevat, zoals de naam van de auteur, e-mailadres, website en de daadwerkelijke inhoud van de reactie. Je kunt in de WordPress Codex alle key-value pairs vinden die in de ‘commentdata’ array zitten.

Je kunt zoveel arguments toevoegen als je wilt, maar de callback function en de add_action() function moeten hetzelfde number of arguments specificeren.

Door meer parameters door te geven aan de callback function kun je meer doen met je code. Zo kun je bijvoorbeeld controleren of een reaction is goedgekeurd en automatisch de tekst van de reactie naar een admin mailen als dat zo is. Dat kun je niet doen zonder extra arguments te specificeren, aangezien je callback function dan geen toegang heeft tot de comment_content data.

Als je priority niet wilt instellen, maar alleen het number of arguments wilt veranderen, zul je nog steeds priority moeten instellen. Gebruik dan gewoon de standaard value (10).

Zo gebruikt de WordPress kern actions

De WordPress kern gebruikt zelf ook veel ingebouwde actions om bepaalde functionaliteit uit te voeren.

Neem bijvoorbeeld de wp_head action. Deze wordt uitgevoerd wanneer WordPress de header van de webpagina’s maakt (de code die gaat tussen <head> en </head>.

Je kunt de meeste action function van de WordPress Core die met de wp_head hook te maken hebben, vinden in het bestand  wp-includes/default-filters.php. Ik heb de code doorzocht en heb een lijst gemaakt met alle add_action() functions die de wp_head action activeren.

add_action( 'wp_head', 'rest_output_link_wp_head', 10, 0 );
add_action( 'wp_head', '_wp_render_title_tag', 1 );
add_action( 'wp_head', 'wp_enqueue_scripts', 1 );
add_action( 'wp_head', 'wp_resource_hints', 2 );
add_action( 'wp_head', 'feed_links', 2 );
add_action( 'wp_head', 'feed_links_extra', 3 );
add_action( 'wp_head', 'rsd_link' );
add_action( 'wp_head', 'wlwmanifest_link' );
add_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 );
add_action( 'wp_head', 'locale_stylesheet' );
add_action( 'wp_head', 'noindex', 1 );
add_action( 'wp_head', 'print_emoji_detection_script', 7 );
add_action( 'wp_head', 'wp_print_styles', 8 );
add_action( 'wp_head', 'wp_print_head_scripts', 9 );
add_action( 'wp_head', 'wp_generator' );
add_action( 'wp_head', 'rel_canonical' );
add_action( 'wp_head', 'wp_shortlink_wp_head', 10, 0 );
add_action( 'wp_head', 'wp_custom_css_cb', 101 );
add_action( 'wp_head', 'wp_site_icon', 99 );
add_action( 'wp_head', 'wp_no_robots' );

Zoals je ziet, zijn dit een hoop callback functions die gehookt zijn aan slechts één action. Hierbij is het instellen van de priority van cruciaal belang zodat de belangrijkste functions eerst uitgevoerd worden.

In het voorbeeld hierboven is het laden van de scripts met de wp_enqueue_scripts() callback function belangrijker (priority=1) dan het laden van de meta tags van het site-icoon met de wp_site_icon() callback function (priority=99).

Andere Action Functions

Alhoewel add_action() de meest gebruikte action function is, zijn er nog allerlei andere die net zo handig kunnen zijn. Laten we eens kijken hoe die allemaal werken.

Deze action function kijkt of er een action aan gehookt is. Het accepteert twee parameters. De eerste is de naam van de action. De tweede parameter is optioneel en is de naam van de callback function.

has_action( 'action_name', 'function_to_check' );

Als je alleen de eerste parameter specificeert, zal het true teruggeven als er welke function dan ook gehookt is aan de action_name parameter.

Maar als je ook de tweede parameter specificeert, zal het false retourneren als de gespecificeerde callback function niet geregistreerd is met de action die genoemd wordt.

Maar als het de gespecificeerde callback function bij de action hook vindt, zal het de priority (integer) terugsturen die voor deze function aan deze hook is ingesteld.

We hebben deze action function al eerder gezien. WordPress gebruikt deze om alle standaard actions te definiëren, waardoor je andere functions daaraan vast kan haken. Net als WordPress kan ook jij de do_action() function gebruiken om een nieuwe custom action te maken door een nieuwe action naam te specificeren als de parameter.

do_action( 'action_name', [argument1], [argument2] );

Door deze function te definiëren, gebeurt er verder niks. Maar het zal in de code zitten wachten tot het geactiveerd wordt door andere action functions. Het is optioneel om extra arguments door te geven, maar dat is wel belangrijk als je wilt dat jouw callback functions die gebruiken.

Deze action function is identiek aan do_action(), op één verschil na. Alle arguments die het ontvangt moeten arrays zijn. Wanneer je veel arguments door moeten geven, of deze arguments van zichzelf al arrays zijn, is dit een superhandige function.

// dit is een voorbeeld-array
$arguments_array = array( 'arg_1', 'foo', true, 'arg_4' );

do_action_ref_array( 'example_action', $arguments_array );

Aangezien PHP-arrays een ordered map zijn, moet je ervoor zorgen dat de arguments die je doorgeeft dus ook in de juiste volgorde staan.

Een voorbeeld van het gebruik van deze action function is de admin_bar_menu action. Deze kan gehookt worden om verschillende items in de admin-toolbar te veranderen, toe te voegen of te verwijderen. Alle items van de toolbar zijn gedefinieerd als elements van een array.

Als je wilt tellen hoe vaak een action is geactiveerd, kun je deze action function gebruiken.

did_action( 'action_name' );

Deze function geeft een geheel getal (integer) terug.

De did_action() function is superhandig als je bijvoorbeeld wil dat een callback function alleen loopt de eerste keer dat een action wordt uitgevoerd, en daarna nooit weer.

function example_callback_function() {
    if( did_action( 'example_action' ) === 1 ) {
    // checkt of de 'example_action' hook eenmaal is geactiveerd, en runt alleen dan en nooit meer erna!
    }
}
add_action('example_action', 'example_callback_function');

Deze action function verwijdert een callback function die gehookt is aan de gespecificeerde action. Je kunt deze function bijvoorbeeld gebruiken om de standaard WordPress functions die aan ingebouwde actions gehookt zijn, te verwijderen en te vervangen met je eigen functions.

remove_action( 'action_name', 'function_to_be_removed', [priority] );

Er zijn een paar voorwaarden voordat je de remove_action() function kunt callen:

  1. De function_to_be_removed en priority parameters moeten hetzelfde zijn als die gebruikt werden in de originele add_action() function.
  2. Je kunt de remove_action() function niet direct callen. Je moet deze vanuit een andere function callen.
  3. Als de callback function geregistreerd is met een class, dan zijn er nog meer voorwaarden om deze te kunnen verwijderen. Je kunt de documentatie in de WordPress Codex bekijken voor meer details.
  4. Je kunt de callback function niet verwijderen voordat deze überhaupt geregistreerd is, of nadat deze al uitgevoerd is.

Hier een voorbeeld van hoe WooCommerce deze action function gebruikt om de standaard productthumbnail te verwijderen op de hoofdpagina van een webshop.

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );

Deze action function verwijdert alles dat gehookt is aan een action. De priority parameter is optioneel.

remove_all_actions( 'action_name', [priority] );

Onthoud dat deze function niet aangeroepen kan worden vanuit de action van waaruit je graag de callback functions wilt verwijderen. Dat zou een oneindige loop veroorzaken. Je kunt aanhaken bij een action die eerder uitgevoerd wordt om deze function zonder fouten uit te voeren.

Deze function checkt of een bepaalde action uitgevoerd wordt of niet. Het retourneert vervolgens een boolean value (true of false).

// check of de 'action_name' action wordt uitgevoerd
if ( doing_action( 'action_name' ) ) {
    // voer je code hier uit
}

Je kunt de action_name parameter leeg laten om te checken of er überhaupt een action uitgevoerd wordt. Dit zal true retourneren elke keer dat er een action geactiveerd wordt.

// check of welke code dan ook runt en iets doet
if ( doing_action() ) {
    // de code hier wordt uitgevoerd wanneer elke action dan ook wordt geactiveerd
}

Actions voorbeeld 1: toon je bezoekers een onderhoudsmededeling

Soms is het nodig om je website tijdelijk offline te halen en een Under Maintenance pagina te activeren. Gelukkig biedt WordPress daarvoor een eenvoudige manier.

// laat een onderhoudsmedeling zien voor alle sitebezoekers
add_action( 'get_header', 'maintenance_message' );
function maintenance_message() {
    if (current_user_can( 'edit_posts' )) return;
    wp_die( '<h1>Stay Pawsitive!</h1><br>Sorry, we\'re temporarily down for maintenance right meow.' );
}

Laten we deze code stap-voor-stap bekijken.

  • get_header is een action die geactiveerd wordt voordat het header templatebestand van de website geladen wordt. Dit is een perfecte action om aan te hooken, als je wilt voorkomen dat de hoofdsite geladen wordt.
  • Hook aan de get_header action door middel van de add_action() function met de maintenance_message() callback function.
  • Definieer de maintenance_message() callback function.
  • current_user_can('edit_posts') is een user capability test function, die dus controleert of de huidige gebruiker ingelogd is en artikelen kan bewerken. Elke gebruiker die op een WordPress website geregistreerd is, heeft die mogelijkheid, behalve gebruikers met “Subscriber”-rol. Er zijn ook andere, meer robuuste manieren om deze check uit te voeren, maar we houden het even bij deze simpelere methode.
  • Gebruik de standaard wp_die() function om de WordPress uitvoering netjes te stoppen, en een HTML-pagina met een foutmelding weer te geven. Je kunt HTML syntax binnen de parameter met de foutmelding gebruiken om de melding te stylen.

Nadat ik de code heb opgeslagen in mijn custom plugin, laad ik mijn lokale WordPress installatie in private browsing modus. De Under Maintenance pagina werkt!

Een foutmelding aan je bezoekers tonen
Een foutmelding aan je bezoekers tonen

De website laadt, als ik ingelogd ben en aan de user capability test voldoe, normaal. Je kunt nu rustig doorwerken aan je website terwijl je bezoekers alleen de onderhoudspagina zien.

Actions voorbeeld 2: Verberg dashboard menu-items voor niet-admin gebruikers

Als je een blog met meerdere auteurs beheert of een website voor klanten beheert, kan het zijn dat je bepaalde admin-menu’s van het WordPress dashboard wilt verbergen voor gebruikers die geen admin zijn. Dat kun je doen door aan de admin_menu action te hooken.

// verwijder specifieke dashboard menu-items voor niet-admin gebruikers
add_action( 'admin_menu', 'hide_admin_menus' );
function hide_admin_menus() {
    if (current_user_can( 'create_users' )) return;
    if (wp_get_current_user()->display_name == "Salman") return; 
    remove_menu_page( 'plugins.php' ); 
    remove_menu_page( 'themes.php' ); 
    remove_menu_page( 'tools.php' ); 
    remove_menu_page( 'users.php' ); 
    remove_menu_page( 'edit.php?post_type=page' ); 
    remove_menu_page( 'options-general.php' );
}

Laten we ook dit stukje code stap-voor-stap doornemen.

  • admin_menu is een action die getriggerd wordt voordat het adminmenu laadt binnen het WordPress dashboard.
  • Hook aan de admin_menu action door middel van de add_action() function met de hide_admin_menus() callback function.
  • De hide_admin_menus() callback function definieert de logica van de code. Dit draait elke keer dat de admin_menu action geactiveerd wordt.
  • Binnen de callback function controleert de current_user_can('create_users') function of de ingelogde gebruiker inderdaad een admin is. Aangezien alleen site-admins de create_user mogelijkheid hebben, eindigt de function met een return statement als de gebruiker inderdaad een admin is.
  • De wp_get_current_user() WordPress function haalt het huidige user object op. Met deze function kunnen we controleren of de ingelogde gebruiker een bepaalde display_name set heeft. Dit is een optionele regel code, voor wanneer je wilt voorkomen dat sommige non-admins ook buitengesloten worden door deze callback function.
  • De remove_menu_page()WordPress function verwijdert top-level admin-menu’s. In het voorbeeld hierboven verwijder ik de volgende admin menu’s: Plugins, Themes, Tools, Users, Pages en Options.

Nadat we het pluginbestand opslaan, zie je in dezehoe het WordPress dashboard er voor de admin uitziet.

Het standaard WordPress admin dashboard
Het standaard WordPress admin dashboard

En hier een screenshot van hoe het WordPress dashboard er nu uitziet voor een non-admin-gebruiker.

Verbergen van gevoelige admin menu-items voor non-admins
Verbergen van gevoelige admin menu-items voor non-admins

Deze oplossing verbergt alleen specifieke menu-items binnen het WordPress dashboard. Maar alle gebruikers hebben nog steeds toegang als ze de menu URL’s gewoon invoeren in hun browser.

Om te voorkomen dat bepaalde gebruikersrollen toegang hebben tot specifieke menu-items, moet je hun rechten aanpassen.

Hooken van een filter

Filters bieden de mogelijkheid om data die andere WordPress-functions gebruiken, te veranderen. Anders dan bij actions, moeten functions die aan filters gehookt zijn, een bepaalde value retourneren.

De add_filter() filter function

Je kunt een callback function aan een filter hooken middels de volgende stappen:

  1. Definieer een callback function die draait wanneer WordPress het filter activeert. Callback functions voor filters moeten minimaal één argument gespecificeerd hebben, aangezien alle filters tenminste één value aan hun callback functions doorgeven.
  2. Registreer de callback function met een filter via de add_filter() function. Het filter zal nu de callback function aanroepen. Volgens de WordPress Codex, moet de add_filter() function tenminste twee parameters doorgeven.
    1. Naam van het filter waaraan het moet hooken.
    2. Naam van de callback function die uitgevoerd wordt wanneer de filter getriggerd wordt.
  1. De add_filter() function accepteert ook twee additionele optionele parameters voor het instellen van priority en het number of arguments. Deze parameters werken op dezelfde manier als bij de add_action() function.

Hier een voorbeeld voor hoe je de add_filter() function kunt gebruiken om een callback function aan een filter te hooken.

// definieer de filter callback function met tenminste een ge-passed-e arguments
// het aantal arguments die je kan passen hangt af van hoe de filter is gedefinieerd
function filter_callback_function( $arg1, $arg2 ) {
    // laat je code iets doen met de arguments en retourneert iets
    return $something;
}

// haak nu de callback function aan bij de 'example_filter'
add_filter( 'example_filter', 'filter_callback_function', [priority], [no_of_args] );

// '10' is de standaard prioriteit die is ingesteld voor de callback function
// en '1' is het standaard getal of ge-passed-e arguments

Voorbeeld voor het hooken van een filter

WordPress biedt een filter dat login_message heet om het bericht te filteren dat bovenaan de inlogpagina wordt weergegeven. De value die dit filter retourneert kan HTML markup bevatten.

Laten we hooken aan het login_message filter en het inlogbericht veranderen.

// laat een custom loginbericht zien boven het loginformulier
function custom_login_message( $message ) {
    if ( empty( $message ) ) {
        return "<h2>Welcome to Let's Develop by Salman Ravoof! Please log in to start learning.</h2>";
    } 
    else {
        return $message;
    }
}
add_filter( 'login_message', 'custom_login_message' );

Het if-else statement binnen de callback function checkt of er al een inlogbericht is ingesteld, meestal door een andere plugin of thema. In die gevallen stuurt de callback function de originele value terug zonder veranderingen. Op die manier ontstaan er geen conflicten met andere plugins of thema’s.

Je kunt het bericht boven het inlogformulier zien binnen de WordPress inlogpagina.

Tonen van een eigen inlogbericht boven het inlogformulier
Tonen van een eigen inlogbericht boven het inlogformulier

Je kunt alle elementen van de inlogpagina stylen door custom stylesheets in de rij voor het laden te plaatsen. Door dat te doen kun je helemaal je standaard WordPress inlogpagina naar eigen smaak inrichten.

Je leert hoe je custom stylesheets kunt laden via actions, in het gedeelte “Customize de WordPress inlogpagina met hooks”.

Filters vinden die ondersteund worden door WordPress

Haast overal waar WordPress data verwerkt of bewerkt, kun je een filter vinden waar je een hook op kunt plaatsen en de data kunt bewerken. Zie filters als een interface tussen de WordPress database en de browser.

Je kunt een volledige lijst met ondersteunde filters vinden op de Plugin API/Filter Reference pagina.

WordPress biedt allerlei filters voor je hook
WordPress biedt allerlei filters voor je hook

Alle filters die je daar vindt zijn opgesplitst in verschillende categorieën en gerangschikt op volgorde van uitvoering door WordPress.

Als je filters zoekt om in de WordPress broncode te hooken, zoek op de term “apply_filters“, en dan krijg je direct een hele lading resultaten. De WordPress Code Reference is ook een goede plek om te zoeken naar alles wat er in WordPress te vinden is, waaronder dus ook actions en filters.

Zo gebruikt de WordPress kern filters

WordPress Core gebruikt zelf ook allerlei ingebouwde filters om de data die de verschillende functions gebruiken te veranderen.

Neem het the_content filter als voorbeeld. Het filtert de content van een artikel nadat deze is geladen uit de database en vóórdat deze weergegeven wordt in de browser.

Net als met actions, kun je de meeste filter functions van de WordPress kern die met de the_content hook te maken hebben vinden in het bestand wp-includes/default-filters.php.

Hier is een lijst met alle kern add_filter() functions die hooken aan het the_content filter:

add_filter( 'the_content', 'do_blocks', 9 );
add_filter( 'the_content', 'wptexturize' );
add_filter( 'the_content', 'convert_smilies', 20 );
add_filter( 'the_content', 'wpautop' );
add_filter( 'the_content', 'shortcode_unautop' );
add_filter( 'the_content', 'prepend_attachment' );
add_filter( 'the_content', 'wp_make_content_images_responsive' );
add_filter( 'the_content', 'do_shortcode', 11 ); // AFTER wpautop(). 

Let op de verschillen priorityen die voor sommige callback functions gedefinieerd zijn.

De do_blocks() function verwerkt bijvoorbeeld alle dynamische blocks in de content van een artikel en rendert ze weer zodat ze compatibel zijn met de nieuwe blockeditor van WordPress. Deze krijgt een hogere prioriteit mee dan de standaard (10) om er zeker van te zijn dat de content klaar is voor de blockeditor, voordat andere functions gaan draaien.

De convert_smilies() function daarentegen krijgt een veel lagere prioriteit aangezien het alleen tekst smilies omzet naar afbeeldingen. Het is dus logisch deze function pas op het einde te draaien nadat alle andere benodigde functions door de inhoud zijn gegaan.

Leuk weetje: shortcodes zijn een subset van filters. Ze gebruiken de input van een shortcode, verwerken deze, en retourneren dan de output naar dezelfde plek. Leer meer over shortcodes in deze ultieme WordPress shortcodes uitleg.

Andere filter functions

Alhoewel add_filter() de meest gebruikte filter function is, zijn er nog andere die ook handig zijn. Laten we deze kort bij langs gaan.

Deze function controleert of een bepaald filter aan een function is gehookt. Het accepteert twee parameters. De eerste parameter is voor de naam van het filter. De tweede parameter is optioneel en is voor de naam van de callback function.

has_filter( 'filter_name', 'function_to_check' );

Als je alleen de eerste parameter specificeert, zal het true teruggeven als de filter_name inderdaad gehookt is aan enige andere function (welke dan ook).

Maar als je beide parameters specificeert, zal het false terugsturen als de specifieke callback function niet geregistreerd is bij het gegeven filter. Als het de gespecificeerde callback function vindt die geregistreerd is met het filter, zal het de priority (integer) terugsturen die voor deze function aan dit filter is ingesteld.

Een mogelijke toepassing van de has_filter() function is om te kijken of een filter al gehookt is en op basis daarvan verder te gaan met de uitvoering van de code.

// check om te zien of 'the_content' filter is gehookt
if ( ! has_filter( 'the_content' ) {
    // hook het filter alleen als deze nog niet eerder is gehookt
    add_filter( 'the_content', 'modify_the_content' );
}

Deze filter function lijkt op de do_action() action function. Callback functions die gehookt worden aan dit filter zullen uitgevoerd worden – waar deze function zich ook maar bevindt binnen de WordPress code.

Je kunt deze function ook gebruiken om een nieuw custom filter te maken door de filter naam en value te specificeren als parameters.

apply_filters( 'filter_name', 'value_to_filter', [argument1], [argument2] );

Vergeet niet om extra parameters te specificeren als je wilt dat ze doorgegeven worden aan je callback functions. De meeste filters gebruiken slechts één argument, dus het definiëren van extra arguments is snel vergeten.

Deze function lijkt sterk op de apply_filters() function, behalve dat alle arguments die het accepteert in een array verzameld moeten zijn.

// een voorbeeld-array
$arguments_array = array( 'some_value', 'foo', false, 'another_value' );

apply_filters_ref_array( 'example_filter', $arguments_array );

Deze filter function kan vooral erg handig zijn als je veel arguments wilt doorgeven, of als deze al in een array zitten. Let erop dat de arguments in de array in de goede volgorde zitten.

Deze filter function haalt de naam op van de filter of action die op dit moment uitgevoerd wordt. Je hoeft hierbij geen parameters te specificeren aangezien het uitgevoerd wordt binnen de callback function.

Een praktijkvoorbeeld:

function example_callback() {
    echo current_filter(); // 'the_title' will be echoed
    return
}
add_filter( 'the_title', 'example_callback' );

Ondanks de wat misleidende naam kan deze function de naam van zowel actions als filters ophalen.

Deze filter function verwijdert de callback function die bij het gespecificeerde filter hoort. Het werkt op precies dezelfde manier als de remove_action() function, maar dan voor filters. Je kunt dit gebruiken om de standaard WordPress-functions die geregistreerd zijn met een bepaald filter te verwijderen, en vervolgens indien nodig te vervangen met je eigen functions.

remove_filter( 'filter_name', 'function_to_be_removed', [priority] );

Om een callback function die gehookt is aan een filter los te maken, moeten de parameters function_to_be_removed en priority precies gelijk zijn aan de arguments die gebruikt zijn bij het hooken van de callback function.

Als het filter toegevoegd is vanuit een class, wat meestal het geval is als plugins dit hebben gedaan, dan zul je de class variable in moeten om het filter te kunnen verwijderen.

// eerst access krijgen tot de class variable, en vervolgens vanuit hier het filter verwijderen
global $some_class;

remove_filter( 'the_content', array($some_class, 'class_filter_callback') );

Laten we een goed voorbeeld van remove_filter() in de praktijk bekijken.

De WooCommerce plugin gebruikt de wc_lostpassword_url() call function die gehookt is aan hun lostpassword_url filter om “Lost your Password?” verzoeken van gebruikers te redirecten.

Het brengt een gebruiker die op die link klikt naar een custom front-end pagina met de URL /my-account/lost-password. Zonder dit filter zouden gebruikers naar de standaard WordPress login pagina gestuurd worden op /wp-login.php.

Stel dat je deze functionaliteit wilt resetten en je gebruikers juist wel naar de standaardpagina voor wachtwoordherstel wilt sturen, of naar een compleet andere pagina. Dan kun je deze callback function zo verwijderen:

remove_filter( 'lostpassword_url', 'wc_lostpassword_url', 10 ); 

Deze filter function verwijdert alle callback functions die bij een filter geregistreerd zijn.

remove_all_filters( 'filter_name', [priority] );

Het lijkt sterk op de remove_all_actions() function, maar dan weer voor filters.

De populaire Advanced Excerpts plugin gebruikt deze function om alle standaard functions die gehookt zijn aan de the_excerpt en get_the_excerpt filters te verwijderen. Nadat dit gelukt is, hookt het de eigen callback function aan het filter.

// Zorg dat het filter is gehookt, ongeacht het page type
if ( ! has_filter( 'get_the_excerpt', array( $advanced_excerpt, 'filter_excerpt' ) ) ) {
    remove_all_filters( 'get_the_excerpt' ); 
    remove_all_filters( 'the_excerpt' ); 
    add_filter( 'get_the_excerpt', array( $advanced_excerpt, 'filter_excerpt' ) );
}

Deze filter function checkt of het gespecificeerde filter op dit moment wordt uitgevoerd.

if ( doing_filter( 'save_post' ) ) {
    // run hier je code
}

Het retourneert vervolgens een boolean value (true of false).

Let op het verschil tussen deze function en de current_filter() function, die alleen de naam van een filter of action die momenteel uitgevoerd wordt retourneert, in de vorm van een string tekens.

Filters voorbeeld 1: Toevoegen van een filter voor grove taal in de reactions

Het kan een forse klus zijn om de reacties op je WordPress website te beheren. Het comment_text filter maakt het mogelijk om regels op te stellen om reacties aan te passen voordat ze weergegeven worden.

Ongefilterde reacties met gemarkeerde scheldwoorden
Ongefilterde reacties met gemarkeerde scheldwoorden

Je kunt WordPress zo de opdracht geven om automatisch scheldwoorden te verwijderen voordat ze weergegeven worden aan je bezoekers. Laten we dat eens doen.

// haak aan bij 'comment_text' filter met de callback function
add_filter( 'comment_text', 'the_profanity_filter' );

// definieer een callback function om scheldwoorden te filteren uit de reacties
function the_profanity_filter( $comment_text ) {
    // definieert een array met scheldwoorden telt hoeveel er zijn
    $profaneWords = array('fudge', 'darn', 'pickles', 'blows', 'dangit');
    $profaneWordsCount = sizeof($profaneWords);
    
    // loop door de scheldwoorden in $comment_text en vervang ze met '*'
    for($i=0; $i < $profaneWordsCount; $i++) {
        $comment_text = str_ireplace( $profaneWords[$i], str_repeat('*', strlen( $profaneWords[$i]) ), $comment_text );
    } 
    
    return $comment_text;
}

Laten we ook deze code regel-voor-regel doornemen:

  • comment_text is een filter hook die je de mogelijkheid geeft de tekst van een reactie aan te passen voordat de browser het weergeeft. Je kunt je callback function daarmee registreren om de output te gaan filteren.
  • De add_filter() function zorgt voor de daadwerkelijke hook aan de comment_text filter zodat je er een callback function aan kunt hangen.
  • the_profanity_filter() is de naam van de gekozen callback function. Deze accepteert slechts één parameter, namelijk de string met daarin de tekst van de reactie. Definieer deze custom function volgens de gewenste logica.
  • Sla alle scheldwoorden of ongewenste taal op in een PHP array met de naam profaneWords. Je kunt zoveel woorden als je wilt toevoegen aan deze array. Ik sla ook de grootte van deze array op in de profaneWordsCount variabele door middel van de sizeof() PHP function.
  • Loop door alle scheldwoorden en gebruik de standaard str_ireplace function van PHP om gematchte scheldwoorden te vervangen door * symbolen. Aangezien deze string replacement function case-insensitive is, hoef je dus niet op hoofdletters te letten. Bekijk verschillende manieren om zoeken-en-vervangen uit te voeren.
  • Gebruik uiteindelijk return om de nu gefilterde tekst terug te sturen.

Sla de veranderingen op in je custom pluginbestand en laad een artikel met reacties opnieuw. Alle woorden die je in de profaneWords array had opgenomen zouden nu vervangen moeten zijn door * symbolen.

Grove taal wegfilteren in reacties met '*' symbolen
Grove taal wegfilteren in reacties met ‘*’ symbolen

De originele reacties blijven gewoon beschikbaar in de database. Dit filter verandert namelijk alleen de inhoud van de reactie voordat deze wordt weergegeven op de front-end.

De originele reactie in de site back-end
De originele reactie in de site back-end

Als je eenmaal gehookt bent aan het juiste filter, kun je er allerlei handige dingen mee doen.

Zo kun je bijvoorbeeld ook de comment_text filter gebruiken om alle URL’s uit de reacties te halen (lees ook deze gedetailleerde uitleg over het stoppen van spamreacties in WordPress).

Je kunt ook hooken aan de pre_comment_approved filter en reacties als goedgekeurd, spam of troep markeren, gebaseerd op vooraf gedefinieerde criteria.

Filters voorbeeld 2: content toevoegen na een artikel

Zoals je al gezien hebt, gebruikt WordPress het the_content filter om de content van een artikel of pagina aan te passen. Laten we datzelfde filter gebruiken om wat toe te voegen aan het einde van elk artikel.

// haak aan bij 'the_content' filter met een callback function
add_filter( 'the_content', 'insert_content_below' );

// definieer de callback function om iets onder het bericht toe te voegen
function insert_content_below( $content ) {
    // check om te zien of we binnen de main loop zijn binnen een single post
    if ( is_single() && in_the_loop() && is_main_query() ) {
        return $content . "<h3 style=\"text-align: center;\">Let me insert myself here</h3><p style=\"text-align: center;border: 3px solid #5333ed;\">I'll appear after the post. You can insert anything here. Even HTML. Headers, links, images, scripts, I'll take them all and append it to the end of the post content. You can also give me a class, so you can style me easily with CSS style sheets.</p>" ;
    } 
    
    return $content;
}

Laten we zorgen dat we de logica van de code hierboven begrijpen:

  • the_content filter hook helpt je om de content van het huidige artikel te pakken zodat je deze kunt gaan aanpassen.
  • Gebruik daarna de add_filter() function om te hooken aan de the_content filter met de insert_content_below() callback function.
  • Definieer de callback function waarbij je de content van het huidige artikel doorgeeft als parameter ($content).
  • Binnen de callback function controleer je dat je alleen de content in de belangrijkste query filtert, wat dus in dit geval de content van het artikel is. Als je dit niet eerst verifieert, kan de code soms onbedoeld content filteren vanuit andere plekken, bijvoorbeeld een zijbalk of footer.
  • De voorwaardelijke statements is_main_query() en in_the_loop() bepalen of de query inderdaad de hoofd-query is en voortkomen uit de belangrijkste WordPress loop.
  • is_single() is een voorwaardelijk statement dat controleert dat de query een enkel artikel is.
  • Gebruik de string concatenation operator van PHP ($content . “your additions”), waarmee je strings kunt samenvoegen, om extra tekst aan de content toe te voegen.
  • return de gefilterde reaction als alle bovenstaande voorwaardelijke statements waar zijn. Als dat niet zo is, stuur de content dan terug zonder veranderingen.

Sla je pluginbestand op, laad een artikel op je website, en scrol naar het einde.

Iets toevoegen aan het einde van de content van een artikel
Iets toevoegen aan het einde van de content van een artikel

Je kunt dezelfde logica toepassen om iets toe te voegen aan het begin van al je artikelen door de positie van de string concatenation parameters om te draaien (“your additions” . $content).

Aanpassen van de WordPress inlogpagina met hooks

Laten we zowel actions als filters gebruiken om de standaard inlogpagina van WordPress aan te passen. Ik maak een nieuwe plugin met de naam Sal Custom Login Page om dit te doen. Je kunt de volledige broncode van deze plugin vinden aan het einde van dit stuk.

Het uiteindelijke resultaat: een aangepast WordPress inlogvenster
Het uiteindelijke resultaat: een aangepast WordPress inlogvenster

Laten we beginnen door de standaard plugin headervelden toe te voegen en te registreren bij WordPress.

<?php

/*
Plugin Name:  Sal Custom Login Page
Version:  1.0
Description:  Demonstrating WordPress Hooks (Actions and Filters) by customizing the WordPress login page.
Author:  Salman Ravoof
Author URI:  https://www.salmanravoof.com/License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  sal-custom-login-page
*/

// de custom stylesheet van de WordPress login page klaarzetten
add_action( 'login_enqueue_scripts', 'salhooks_login_stylesheet');
function salhooks_login_stylesheet() {
    // Laad de stylesheet van de pluginmap
    wp_enqueue_style( 'sal-custom-login-page', plugin_dir_url( __FILE__ ).'sal-custom-login-page-styles.css' );
}

Eerst hooken we aan de login_enqueue_scripts action om de custom stylesheet in de rij voor het laden te plaatsen. Elke script of style die je hier in de rij plaatst worden opgenomen in de header van je inlogpagina.

Als je ook custom scripts en stylesheets wilt laden aan de frond-end van je site (dus niet alleen aan de admin back-end of de inlogpagina) moet je hooken aan de wp_enqueue_scripts action in plaats van de login. Je kunt hier meer over lezen in de WordPress Codex en het artikel van Kinsta hoe je wp_enqueue_scripts kunt gebruiken.

Binnen de salhooks_login_stylesheet() callback function gebruiken we de wp_enqueue_style() function om het custom stylesheet te laden (sal-custom-login-page-styles.css) die we in dezelfde map als de plugin geplaatst hebben. De ingebouwde WordPress function plugin_dir_url(__FILE__ ) maakt het makkelijk om het URL pad te krijgen (inclusief de afsluitende slash) van de map van de huidige plugin.

Ik zal de CSS styling hier niet uitleggen, maar je kunt ze vinden in de broncode aan het eind.

// Custom login ERROR bericht om je site beter te beveiligen
add_filter( 'login_errors', 'salhooks_remove_login_errors', 10 );
function salhooks_remove_login_errors() {
    return 'Incorrect credentials. Please try again!';
}

Vervolgens hooken we aan het login_errors filter om de foutmelding te veranderen die een bezoeker ziet als er verkeerde gegevens ingevoerd worden. Door de foutmelding te filteren voorkom je dat aanvallers je gebruikersnaam kunnen achterhalen.

// Verwijder de box shake-animatie van de loginbox bij onjuiste logingegevens
add_action( 'login_head', 'remove_login_error_shake' );
function remove_login_error_shake() {
    remove_action( 'login_head', 'wp_shake_js', 12 );
}

Elk keer dat iemand nu de verkeerde gegevens invoert, schudt de inlogbox flink heen en weer. Dit is een optionele stap die ik vooral heb toegevoegd zodat je ook bepaalde features van de inlogpagina kunt verwijderen.

Je leert meer over de remove_action() en remove_filter() functions in het laatste deel van dit artikel.

// Verander het logo en headerlink boven het loginformulier
add_filter( 'login_headerurl', 'salhooks_login_headerurl');
function salhooks_login_headerurl( $url ) {
    $url = 'https://salmanravoof.com';
    return $url;
}

add_filter( 'login_headertext', 'salhooks_login_headertext');
function salhooks_login_headertext( $text ) {
    $text = 'Salman Ravoof';
    return $text;
}

De laatste stap is het aanpassen van de URL en tekst van de loginheader. Je kunt aan de login_headerurl en login_headertext hooken om ze aan te passen.

Als je verder wilt bouwen met deze plugin en meer wilt experimenteren, kun je de broncode van de plugin downloaden en meteen bezig gaan.

Lijsten en resources voor WordPress hooks

Het is erg lastig om alle hooks die WordPress biedt uit je hoofd te leren. Er zijn letterlijk duizenden ingebouwde actions en filters waaraan je kunt hooken. Dus het zoeken naar precies de juiste hook voor jouw toepassing kan soms als een enorme zoektocht voelen.

Gelukkig zijn er verschillende resources die je kunnen helpen om de goede hook te vinden.

De eerste plek waar je meer over hooks kunt lezen is de WordPress Codex, en dan vooral het gedeelte Hooks binnen het Plugin Handbook. Hier kun je essentiële informatie vinden over hooks, en links naar de complete documentatie van alle actions en filters.

Begin met de informatie over Hooks in het WordPress Plugin Handbook
Begin met de informatie over Hooks in het WordPress Plugin Handbook

Sla deze handige links van het Plugin Handbook op als favoriet om het zoeken sneller te maken:

Deze referentiepagina’s voor actions en filters geven je een lijst met alle hooks die meestal draaien bij bepaalde WordPress-verzoeken.

Zo kun je bijvoorbeeld alle hooks vinden die geactiveerd worden wanneer je naar een admin-pagina gaat, wanneer je bijlagen bij een artikel gebruikt, of bij categorieën.

De WordPress Codex bevat ook een handige zoektool om alle function hooks, methods en classes te vinden. Deze pagina biedt ook een lijst met nieuwe en bijgewerkte componenten in de meest recente WordPress versie. Kijk hier dus als je wilt weten wat er precies onder de motorkap van WordPress gebeurt.

Zoek hier op alles binnen WordPress
Zoek hier op alles binnen WordPress

Deze index van WordPress hooks sorteert alle hooks per type, WordPress-versie waar ze eerst in kwamen, en of ze nog actionf zijn.

Adam R Brown’s WordPress Hooks Index
Adam R Brown’s WordPress Hooks Index

Als je de hooks sorteert op basis van hoe vaak ze voorkomen dan zul je zien dat de oudste WordPress hooks ook nog altijd het meest gebruikt worden. Als je net begint met WordPress development is de snelste manier om alles in te halen het leren omgaan met deze populaire actions en filters.

Alhoewel deze index helaas niet bijgewerkt is sinds WordPress 5.1, kan het nog steeds erg handig zijn om alle grotere hooks door te nemen.

Nog altijd moeite de juiste hook te vinden? Het is altijd een goed idee om te beginnen met online te zoeken op de juiste keywords. En als zelfs dat niet lukt, kun je ook gewoon zelf in de WordPress code gaan graven.

Geregistreerde hooks op een WordPress pagina vinden

Zoals we eerder zagen heeft WordPress ladingen hooks beschikbaar, maar niet elke hook wordt op elke pagina geactiveerd. Als je erachter kunt komen welke actions en filters je op een bepaalde pagina kunt hooken, ben je al halverwege.

Alhoewel je geavanceerde PHP debugging tools zoals xdebug en PHPCS hiervoor kunt zijn gebruiken, zijn er ook eenvoudigere tools zoals Debug Bar en Query Monitor die je binnen WordPress kunt gebruiken.

Debug Bar met Actions en Filters Add-On

Debug Bar is een officiële WordPress plugin die een Debug menu toevoegt aan je adminbalk. Het toont PHP waarschuwingen en meldingen, cache requests, MySQL query’s en andere handige debug informatie.

De WordPress Debug Bar WordPress plugin
De WordPress Debug Bar WordPress plugin

Nadat je de plugin geïnstalleerd hebt, moet je het stukje code hieronder toevoegen aan het wp-config.php bestand van je website om de debug features in te schakelen.

define( 'WP_DEBUG', true ); // trackt PHP fouten en mededelingen
define( 'SAVEQUERIES', true ); // trackt and toont MySQL query's

Nu zou je de Debug menu optie moeten zien in je adminbalk. Als je erop klikt ga je naar het dashboard waar je de verschillende query’s en caches kunt zien die aan de pagina zitten waarvandaan je kwam.

Het ‘Debug’ menu in de WordPress adminbalk
Het ‘Debug’ menu in de WordPress adminbalk

Daarna moet je de Debug Bar Actions and Filters Addon plugin installeren. Dit is een handige uitbreiding die nog twee extra tabbladen toevoegt aan je Debug Bar dashboard, en die de actions en filters toont die geactiveerd zijn door het huidige verzoek.

Actions op volgorde van laden voor de huidige pagina
Actions op volgorde van laden voor de huidige pagina

Het geeft ook alle functions weer die eraan gehookt zitten, inclusief prioriteit.

Filters met prioriteit en geregistreerde callback functions
Filters met prioriteit en geregistreerde callback functions

Je kunt op het Debug menu klikken binnen elke pagina op je website om erachter te komen welke actions en filters je kunt hooken op die pagina.

Query Monitor

Query Monitor is een krachtig toolpanel voor developers van WordPress. Je kunt het gebruiken om de beschikbare hooks op een pagina te bekijken en de volgorde waarin ze laden.

Query Monitor WordPress plugin
Query Monitor WordPress plugin

Anders dan bij Debug Bar, hoef je verder geen addons te installeren om de actions en filters te zien.

Je kunt Query Monitor vinden vanaf de adminbalk
Je kunt Query Monitor vinden vanaf de adminbalk

Query Monitor geeft je ook meer informatie over waar precies een hook geactiveerd wordt.

Het Hooks & Actions panel in Query Monitor
Het Hooks & Actions panel in Query Monitor

Binnen de componentenkolom, kun je zien dat de meeste hooks geregistreerd worden vanuit de kern. Maar sommige hooks worden ook geregistreerd vanuit een thema of plugin. Enkele hooks kunnen geregistreerd worden vanuit meerdere componenten.

Je kunt de hook en component dropdown-menu’s gebruiken om alleen die hooks te bekijken die interessant zijn voor jou.

Let op: Query Monitor gebruikt “Hooks” als algemene term voor actions en filters samen, maar noemt de geregistreerde callback functions “Actions”. Dat is technisch gezien dus fout, en kan nogal verwarrend zijn, dus wees gewaarschuwd.

Je kunt binnen Query Monitor nog meer doen dan alleen de query’s en requests bekijken. Het bevat ook geavanceerde features zoals listing styles, scripts, talen, Ajax calls, user capability checks en REST API calls.

De “all” hook

WordPress heeft een speciale hook die “all” heet, waar je aan kunt hooken om een callback function uit te voeren voor elke hook die je wilt, onafhankelijk of die geregistreerd is met de callback function. Dit is vooral handig om een gecrashte pagina te debuggen of als je wilt weten wanneer een bepaalde gebeurtenis plaatsvindt.

Zo kun je de all hook bijvoorbeeld gebruiken zoals in het voorbeeld hieronder om alle actions die uitgevoerd worden te echo‘en.

// echo alle actions die worden uitgevoerd
function debug_helper_function(){
    echo '<p>' . current_action() . '</p>';
}
add_action( 'all', 'debug_helper_function' );

De debug_helper_function() die hierboven gedefinieerd is, zal uitgevoerd worden wanneer er een action geactiveerd wordt. Weten wat de laatst uitgevoerde action was kan je helpen bij erachter komen wat er gebeurt binnen je pagina.

Waar worden WordPress hooks opgeslagen?

WordPress gebruikt de WP_Hook class om hooks te implementeren. Deze core class wordt gebruikt om alle ingebouwde actions en filters van WordPress af te handelen. Je kunt bijna alle code die gerelateerd is aan deze class vinden in het wp-includes/class-wp-hook.php bestand.

Technisch gezien is de WP_Hook class een array van objecten met attritubes zoals callbacks, iterations, current_priority, nesting_level, en doing_action. Het definieert ook veel andere handige hook functions die gebruikt kunnen worden via de WP_Hook methods.

De meeste WordPress developers hoeven niet na te denken over waar WordPress hooks precies opslaat, zolang ze zich maar houden aan de Plugin API richtlijnen.

Zo maak je je eigen custom WordPress hooks

Je hebt nu allerlei hooks gezien die WordPress aanbiedt via de Plugin API. Je hebt ook gezien hoe je de standaard hooks kunt gebruiken om je eigen code in de WordPress runtime te injecteren.

Als je een plugin of thema developer bent, is het good practice om andere developers een soortgelijke manier te geven om met jouw code te werken. Custom hooks doen precies dat. Ze bieden andere developers de mogelijkheid om de functionaliteit van je plugins en thema’s uit te breiden of aan te passen.

Het maken van je eigen actions en filters is vrij eenvoudig. Je kunt dezelfde functions gebruiken waarmee de WordPress Core hooks maakt. Laten we enkele voorbeeld bekijken

Zo maak je custom actions in WordPress

Gebruik de do_action() function om een custom action hook aan te maken. Dat doe je zo:

// de positie waar je je actie invoert, bepaalt wanneer deze gecalld wordt
do_action( ' my_unique_custom_action' );
// ga verder met de rest van de code

Nu kunnen andere developers in je plugin of thema hooken zonder de broncode te veranderen. Het enige dat ze moeten doen is hun callback functions registreren met de custom action van je plugin via de add_action() function.

add_action( 'my_unique_custom_action', 'some_callback_function' );

// definieer de callback function die je in de bovenstaande action function noemde
some_callback_function() {
     // deze code runt op elke plek waar je custom action hook ook is
}

Let erop dat je custom hooks goed documenteert en in detail uitlegt wat ze precies doen. Uiteindelijk is het belangrijkste doel van het maken van custom hooks het helpen van andere developers om met jouw code te werken.

Zo maak je een custom filter in WordPress

Gebruik de apply_filters() function om een custom filter hook aan te maken. Dat doe je zo:

$value_to_filter = "I'm a string, but this can be any PHP data type";

// filters veranderen een value en zijn doorgaans gekoppeld aan een predefined variable
apply_filters( 'my_custom_filter', $value_to_filter );

De parameters van je custom filter moeten een unieke identifier en een value om op te filteren bevatten. Andere developers kunnen een hook voor jouw custom filter aanbrengen via de add_filter() function en de doorgegeven value aanpassen.

add_filter( 'my_custom_filter', 'some_callback_function' );

// definieer de callback function die je in de filter function hierboven noemde
function some_callback_function( $value_to_filter ) {
    // wijzig de ge-passed-e value (of niet) 
    return $value_to_filter; // retourneren van een value is een must voor filters
}

Bij het definiëren van je custom filter moet je er op letten dat het zich niet bevindt voor de value die het zou moeten filteren. Als je het filter niet op de goede plek zet, kan de gefilterde value daarna weer overschreven worden door de standaardvalue.

Gewoonten voor het benoemen van custom hooks

Het is belangrijk om een unieke naam voor al je custom hooks te kiezen. Aangezien elke plugin en thema zijn eigen custom hooks kan hebben, kun je conflicten krijgen als de namen van hooks hetzelfde zijn.

Als je bijvoorbeeld je action send_email noemt, is er een grote kans dat een andere plugin developer dezelfde naam gebruikt, aangezien het niet erg uniek is. Wanneer een website vervolgens jouw plugin en die van de andere developer installeert, kunnen ze fouten krijgen die moeilijk op te lossen zijn.

Het is daarom verstandig al je eigen custom hooks vooraf te laten gaan door een algemene identifier, zodat ze duidelijk en toch uniek zijn. In plaats van send_email noem je het dus bijvoorbeeld plugin_name_send_email, waarbij plugin_name_ dan het unieke voorvoegsel is.

Custom hooks demo met een uitbreidbare plugin

Laten we een uitbreidbare plugin maken (oftewel een plugin waarin mensen kunnen inpluggen) waarbij andere developers gebruik kunnen maken van de custom hooks.

Ik noem deze plugin Custom Hooks Demo. De belangrijkste function is een citatenbox te plaats op de plek waar je een shortcode neerzet. Het zal ook custom actions en filters bevatten op de juiste plekken om het voor andere developers mogelijk te maken de functionaliteit uit te breiden of aan te passen.

Je kunt naar mijn WordPress shortcodes guide kijken om meer te leren over shortcodes.

Laten we snel beginnen met de uitbreidbare plugin.

<?php

/*
Plugin Name :  Custom Hooks Demo
Description :  Demonstrating how to create an extensible WordPress plugin using custom hooks.
Author      :  Salman Ravoof
Author URI  :  https://salmanravoof.com/
License     :  GPLv2 or later
License URI :  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain :  custom-hooks-demo
*/

/** 
 * the [custom_hooks_demo] shortcode returns the HTML code for a quote box.
 * @return string HTML code for a quote box
*/
add_shortcode( 'custom_hooks_demo', 'my_shortcode_callback' );

function my_shortcode_callback ( $arguments ) {
    ob_start(); // start object buffering to collect all output before sending it to the browser
    
    // stelt een action hook in om te runnen voordat je wat dan ook output
    do_action( 'the_topmost_custom_action' );
    
    // definieer je variables waarvan je wil toestaan dat ze worden gefilterd
    $quote_content = "Z.E.R.O. That's the number of people who'd like to have any website autoplay music on their browsers.";
    $quote_author = "John Doenuts";
    
    // maak je custom filters aan nadat je de variables hebt opgesteld
    $quote_content = apply_filters( 'custom_quote_content', $quote_content );
    $quote_author = apply_filters( 'custom_quote_author', $quote_author );
    
    // bouw de shortcode output template
    echo "<div style=\"border:3px solid #5333ed;\"><blockquote style=\"margin:20px;border-color:#5333ed;\">";
    echo $quote_content;
    echo "<br><br>";
    echo "― <strong>" . $quote_author . "</strong>";
    echo "</blockquote></div>";
    
    // stelt een action hook in om te runnen nadat je wat dan ook output
    do_action( 'the_ending_custom_action' );
    
    return ob_get_clean(); // krijg buffer contents, verwijder buffer en stop met bufferen
}
  • De add_shortcode() function wordt gebruikt om een custom shortcode te maken. Vervolgens wordt de callback function van de shortcode gedefinieerd met alle functionaliteit van deze plugin.
  • ob_start() is een PHP function die output buffering mogelijk maakt. Dat is erg handig omdat het PHP vertelt om alle output in het buffer geheugen van de server te bewaren, in plaats van meteen uit te voeren. Hierdoor kun je met deze function complexe, leesbare HTML code maken binnen PHP.
  • do_action( 'the_topmost_custom_action' ) definieert de eerste custom action. Om het nuttig te maken, moet je het definiëren voordat de plugin output produceert. Andere developers kunnen dan hooken aan deze custom action om hun eigen code uit te voeren net voordat deze custom shortcode iets print.
  • Maak de variabelen aan die je wilt filteren. In deze plugin zijn dat $quote_content en $quote_author. In dit voorbeeld zijn het allebei strings, maar je kunt ze instellen op elk PHP data-type (integer, boolean, array).
  • Gebruik de apply_filters() function om je eigen custom filters te maken. Aangezien alle filters een value teruggeven, kun je de eerder gedefinieerde variabele toewijzen aan de value die dit filter teruggeeft. Andere developers kunnen nu ook een hook aan dit filter maken om de standaard values van de vooraf gedefinieerde variabelen te veranderen.
  • Gebruik echo statements om de output van de shortcode regel-voor-regel op te bouwen. Aangezien we output buffering ingeschakeld hebben, zal er geen output direct naar de browser gaan.
  • do_action( 'the_ending_custom_action' ) definieert je laatste custom action. Je moet het helemaal als laatste definiëren, maar nog wel voordat je alle inhoud van de buffer retourneert.
  • ob_get_clean() is een standaard 3-in-1 PHP function. Het haalt de inhoud van de buffer op, verwijdert alle buffer data en stop vervolgens met output buffering. Het stuurt de verzamelde buffer inhoud return als een enkele samengestelde string.

Als dit eenmaal is opgeslagen en geactiveerd, zal het plaatsen van de [custom_hooks_demo] shortcode ervoor zorgen dat je content een citatebox plaatst met de standaardvalues.

De originele citatenbox met de Custom Hooks Demo plugin
De originele citatenbox met de Custom Hooks Demo plugin

Laten we nog een andere plugin maken met de naam Custom Hooks Demo Extension. Deze zal aanhaken bij de custom hooks die we in de vorige plugin hebben gemaakt, en vervolgens iets doen of aanpassen.

<?php

/*
Plugin Name :  Custom Hooks Demo Extension
Description :  Demonstrating how you can extend WordPress plugin functionality with its custom hooks.
Author      :  Salman Ravoof
Author URI  :  https://salmanravoof.com/
License     :  GPLv2 or later
License URI :  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain :  custom-hooks-demo-extension
*/

/**
 * vervang de quote content door aan te haken bij 'custom_quote_content' filter
*/
add_filter( 'custom_quote_content', 'new_quote_content_callback' );
function new_quote_content_callback( $content ) {
    $content = "There are no bugs in programming. Only unexpected features.";
    return $content;
}

/**
 * vervang de auteur van de quote door aan te haken bij 'custom_quote_author'
*/
add_filter( 'custom_quote_author', 'new_quote_author_callback' );
function new_quote_author_callback( $author ) {
    $author = "Jane Doodle";
    return $author;
}

/**
 * voeg een afbeelding toe aan de top van de shortcode door aan te haken bij 'the_topmost_custom_action'
*/
add_action( 'the_topmost_custom_action', 'quote_image_callback' );
function quote_image_callback() {
    $url = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Quote-right-cs.svg/75px-Quote-right-cs.svg.png";
    echo '<div><img class="aligncenter" src="'.$url.'"></div>';
}

/**
 * voeg een knop toe onder de shortcut output door aan te haken bij 'the_ending_custom_action'
*/
add_action( 'the_ending_custom_action', 'add_button_callback' );
function add_button_callback() {
    echo '<div style="text-align:center;"><button name="nice">Nice Quote!</button></div>';
}

Zoals je kunt zien bevat deze extension plugin niks anders dan action en filter functions die hooken aan de originele plugin, op de juiste plekken, om vervolgens dingen aan te passen.

Het gebruikt de add_action() en add_filter() functions om de callback functions te registreren met de custom actions en filters die we gemaakt hebben met de originele plugin (bv the_topmost_custom_actioncustom_quote_author).

De extension plugin verandert de originele citaat box
De extension plugin verandert de originele citaat box

Custom action hooks maken het mogelijk om je code op de juiste plekken in de originele plugin te plaatsen en vervolgens je eigen script uit te voeren. Hier voegen we een afbeelding toe bovenaan en een knop onderaan.

Op dezelfde manier maken custom filter hooks het mogelijk om de inhoud van de quote en de naam van de auteur aan te passen. De uiteindelijke uitkomst is een plugin die volledig uit te breiden is door anderen, zonder dat de broncode veranderd moet worden.

Werken met custom hooks van externe developers

Custom hooks maken het mogelijk dat individuele WordPress plugins en thema’s hun eigen ecosysteem aan uitbreidingen hebben. Denk bijvoorbeeld aan de WooCommerce plugin. Het voegt de functionaliteit van ecommerce toe aan WordPress, maar er zitten ook allerlei hooks in de code.

WooCommerce Action en Filter Hook Reference
WooCommerce Action en Filter Hook Reference

WooCommerce heeft honderden uitbreidingen en plugins die de hooks in de kern plugin gebruiken waardoor het nog beter wordt.

Je kunt deze extensies gebruiken om WooCommerce te integreren met bijvoorbeeld Stripe, MailChimp, Salesforce, Zapier en nog veel meer.

Extensions breiden de functionaliteit van WooCommerce uit
Extensions breiden de functionaliteit van WooCommerce uit

Het is een goede gewoonte om de documentatie van populaire WordPress plugins te bekijken om te zien hoe zij custom hooks implementeren. Enkele van de naar mijn mening beste om te bekijken zijn Easy Digital DownloadsBuddyPressQuiz and Survey Master, en Gravity Forms.

Wanneer kun je custom hooks gebruiken?

Afhankelijk van het thema of de plugin die je maakt en voor wie deze bedoeld is, kan het al dan niet handig zijn om custom hooks toe te voegen.

Een goede vuistregel hiervoor is om te kijken of er voordelen zijn voor andere developers als je product uitbreidbaar zou zijn. Zo niet, dan kun je het beter niet doen, tot je erom gevraagd wordt.

Je moet echt goed weten wat je doet voordat je custom hooks aan je plugin of thema toevoegt. Nadat je je product hebt gepubliceerd en andere developers dergelijke hooks zijn gaan gebruiken, kun je dit nooit meer veranderen zonder backward compatibility te verliezen.

Verwijderen van callback functions van WordPress hooks

Je hebt al gezien hoe je callback functions kunt verwijderen die met bepaalde hooks zijn geregistreerd. Deze callbacks kunnen geregistreerd zijn door plugins, thema’s of zelfs de WordPress kern zelf. Laten we nog beter kijken hoe je gehookte callback functions kunt verwijderen met nog wat extra voorbeelden.

Om een callback function te verwijderen van een hook kun je de remove_action() of remove_filter function gebruiken, afhankelijk van of het een action of filter is.

Een nadeel is dat je deze functions moet callen met precies dezelfde parameters als die gebruikt werden om de callback function aan het begin te registreren. Je kan dus het beste die parameters gewoon kopiëren en plakken van hun add_action() of add_filter() function.

Verder kan je callback functions alleen verwijderen nádat ze geregistreerd zijn. Als je dit omdraait, zal het verwijderen niet lukken. In het algemeen is het belangrijk dat je de volgorde van uitvoering van hooks goed gebruikt.

Laten we bijvoorbeeld zeggen dat je een callback function wilt verwijderen die geregistreerd is door een thema, dat onnodige bloat toevoegt aan je website (en iedereen wil een snelle site, toch?).

function wp_bloated_callback_function() {    
// code die veel bloat toevoegt aan de site
}
add_action( 'template_redirect', 'wp_bloated_callback_function', 5 );

De callback function hierboven laadt bijvoorbeeld allerlei zinloze scripts en stylesheets. En als je dat kunt verwijderen, wordt je website een stuk sneller.

Maar je moet er dan wel voor zorgen dat de remove_action() function pas uitgevoerd wordt na de template_redirect action. Dit kun je doen door te hooken aan de after_setup_theme action nadat deze is getriggerd door de template_redirect action.

function wp_remove_bloat() {
    // zorg dat alle parameters identiek zijn aan de original add_action() function
    remove_action( 'template_redirect', 'wp_bloated_callback_function', 5 );
}

// zorg dat remove_action() pas na add_action() wordt gecalld
add_action( 'after_setup_theme', 'wp_remove_bloat' );

De wp_bloated_callback_function() zal zichzelf nu verwijderen van de  template_redirect action.

Speciale gevallen voor het verwijderen van callback functions

Bij het verwijderen van callback functions komt meer kijken dan ze alleen uitschakelen. Soms wil je ze bijvoorbeeld tijdelijk uitschakelen, je eigen code draaien, en weer toevoegen.

De save_post action wordt bijvoorbeeld elke keer geactiveerd dat de wp_insert_post() en wp_publish_post() functions gebruikt worden. Ze worden allebei gedefinieerd in het wp-includes/post.php bestand.

Als je dus een callback function gehookt hebt aan de save_post action, en je wilt de  wp_insert_post() of wp_publish_post() functions callen binnen je callback function, zal de save_post action meerdere keren geactiveerd worden.

function some_callback_function( $post_id, $post ) {
    // do iets hier
    wp_insert_post( [some_array] ); // this function also calls the 'save_post' action
    // doe misschien hier ook iets
}
add_action( 'save_post', 'some_callback_function', 10, 2 );

Een function die een action oproept, terwijl die action de function oproept, kan onverwachte resultaten opleveren. Je kunt dit probleem oplossen door de remove_action() function binnen je callback function te gebruiken voordat je wp_insert_post() gebruikt.

function some_callback_function( $post_id, $post ) {
    // doe hier iets
    
    // verwijder de callback function van de ‘save_post’ action
    remove_action( 'save_post', 'some_callback_function', 10, 2 );
    
    // run nu de wp_insert_post() function
    wp_insert_post( [some_array] );
    
    // voeg de callback function nu weer terug toe aan de ‘save_post’ action
    add_action( 'save_post', 'some_callback_function', 10, 2 );
    
    // doe misschien hier ook iets 
}
add_action( 'save_post', 'some_callback_function', 10, 2 );

Dit is nog een handige manier om remove_action() of remove_filter() te gebruiken. Door verder in de WordPress kern te kijken leer je beter begrijpen hoe je deze situaties kunt voorkomen.

Bonus WordPress hooks tutorials

Samenvatting

Er zijn verschillende voordelen aan WordPress hooks als je een WordPress developer bent.

Hooks kunnen je de kernfunctionaliteit van WordPress helpen veranderen of uitbreiden. Maar je kunt ze ook gebruiken om plugins of thema’s te veranderen of andere developers de mogelijkheid geven met jouw plugins of thema’s te werken.

Kortom, hoog tijd om ook aan te haken bij WordPress hooks!

Salman Ravoof

Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.