Ajax WordPress

Vamos a implementar llamadas ajax en WordPress para cargar de forma dinámica contenido con un «load more».

Hay que definir una serie de variables:

wp_localize_script( 'my-theme-js', 'ajax_var', array(
        'url'    => admin_url( 'admin-ajax.php' ),
        'nonce'  => wp_create_nonce( 'my-ajax-nonce' ),
        'action' => 'event-old-list'
    ) );

En la parte javascript:

// Eventos - carga por ajax
function loadEventosPasadosAjax(num) {
	var offset = $('#button-load_more').data('offset');
	
	jQuery.ajax({
        type: "post",
        url: ajax_var.url,
        data: "action=" + ajax_var.action + "&nonce=" + ajax_var.nonce + "&offset=" + offset + "&num=" + num,
        success: function(result){
        	if (result.length == 0) { // No hay resultados
        		$('#button-load_more').hide();
        	} else {
        		$('#eventos-pasados').append(result);
        	}
        }
    });
	
	$('#button-load_more').data('offset', offset + num);
}

Y desde la parte PHP, basándonos en nuestro action «event-old-list»

add_action( 'wp_ajax_nopriv_event-old-list', 'my_getOldEventsAjax' );
add_action( 'wp_ajax_event-old-list','my_getOldEventsAjax' );
function my_getOldEventsAjax( $num = 9, $offset = 0 ) {
        
       // .....
        
        echo $output;
        wp_die();
    }