Wordpress plugin development: Ajax gebruiken

08-09-2020

wordpress javascript

Stel dat je een Wordpress plugin hebt ontwikkeld die een eigen beheerpagina heeft in de Wordpress backend. En stel dat je door middel van een button via Ajax een php functie van je plugin wilt laten uitvoeren. Dat doe je in drie simpele stappen!

Stap 1, creëer de button

<button id="trigger"></button>

Stap 2, creëer de (callback) functie en hook deze aan de Wordpress AJAX functionaliteit

In je plugin file plaats je de functie die output genereert.

function mijnQuery($parameter1, $parameter2, $parameter3) {
    ...
    return $output;
}

Door je functie aan de juiste hook te koppelen maak je deze beschikbaar voor een AJAX call.

Deze hook is alleen voor de Wordpress backend:

add_action( 'wp_ajax_mijnQuery', 'mijnQuery' );

Wil je AJAX functionaliteit voor de Wordpress frontend implementeren, gebruik dan deze hook:

add_action( 'wp_ajax_nopriv_mijnQuery', 'mijnQuery' );

Stap 3, maak de call via javascript

jQuery('#trigger').click(function(){
    $.ajax({
        url: ajaxurl, // Sinds WP 2.8 ajaxurl is altijd beschikbaar en verwijst naar adminajax.php
        data: {
            'action':'mijnQuery' // Dit is onze functie uit stap 2
        },
        success:function(data) {
            // Deze geeft de output van de resultaten van onze AJAX request (de callback)
            window.alert(data);
        },
        error: function(errorThrown){
            window.alert(errorThrown);
        }
    });
});
Kom je er alsnog niet uit en heb je hulp nodig? Aarzel niet om contact op te nemen!
About image