Не просто понять сходу все зависимости Ajax в WordPress.

Краткая инструкция которая должна помочь расставить все на свои места.

Шаблон Ajax 1

Предположим есть некий шаблон Ajax 1, в котором есть кнопка и поле input. Создаем новую страницу с этим шаблоном.

<?php
/*
Template Name: Ajax 1
*/
get_header();?>
<main id="site-content" role="main">
<?php
    the_post();
    get_template_part( 'template-parts/content', get_post_type() );
?>
    <div class="container">
        <div class="content">
        <input type="text" name="text" value="" id="text">
        <button id="vbutton" type="button" name="button">TEST</button>
        </div> <!-- content -->
    </div> <!-- container -->
</main>
<?php
?>
<?php
get_footer();

functions.php

Чтобы не бегать по всему файлу functions.php и не искать нужную строчку буду писать код в файле functions_ajax_1.php, который подключен в functions.php  — require_once

ajax_1.js

Скрипты js тоже буду писать в отдельном файле, чтобы был порядок 🙂

Условие подключения

Чтобы скрипт не подключался на каждой странице в functions_ajax_1.php я добавлю условие которе будет выполняться если пользователь находится на странице шаблона ajax_1.php.   В момент подключения скриптов вызывается функция ‘my_ajax‘ в которой находится условие проверки является ли текущая страница шаблоном ajax_1.php. [‘jquery’] — означает, что скрипт будет подключен только после подключения основного jquery скрипта на сайте, true в конце — означает подключить данный скрипт в конце страницы.

function my_ajax(){
  if (is_page_template('templates/ajax_1.php')) {
            wp_enqueue_script( 'ajax_1', get_theme_file_uri() . '/js/ajax_1.js', ['jquery'], '', true );
        }
}
add_action( 'wp_enqueue_scripts', 'my_ajax' );

wp_localize_script

Добавляет дополнительные данные перед поключаемым скриптом, в данном случае — ajax_1.js

function my_ajax(){
  if (is_page_template('templates/ajax_1.php')) {
        wp_enqueue_script( 'ajax_1', get_theme_file_uri() . '/js/ajax_1.js', ['jquery'], '', true );
        wp_localize_script(
            'ajax_1',
            'vScriptAjax',
            [
                'ajaxurl' => admin_url( 'admin-ajax.php'),
                'name'  => wp_get_current_user()->display_name,
                'post_ID' => get_the_ID(),
                'prev_post' => get_previous_post()->post_title
            ]
        );
    }
}
add_action( 'wp_enqueue_scripts', 'my_ajax' );

wp_ajax_{action_name}

Теперь надо подключить в этом же файле functions_ajax_1.php хуки обработки запроса

add_action( ‘wp_ajax_vajax‘, ‘vajax_function’ ); // для авторизованных пользователе
add_action( ‘wp_ajax_nopriv_vajax‘, ‘vajax_function’ ); // для не авторизованных пользователей
function vajax_function() {
    sleep(3); //для паузы, необязательный параметр
    print_r($_POST); //распечатать, что приходит в $_POST
    wp_die();
}
add_action( 'wp_ajax_vajax', 'vajax_function' );
add_action( 'wp_ajax_nopriv_vajax', 'vajax_function' );

В этой функции обработчике я просто распечатаю массив $_POST, чтобы узнать, что приходит в него.

Последний шаг — это написать функцию в самом файле ajax_1.js

По клику на кнопку функция отправляет в функцию vajax_function

jQuery(document).ready(function($){
    $('#vbutton').on('click', function(){
        $.ajax({
            url: vScriptAjax.ajaxurl,
      type: 'POST',
      data: {
                action: 'vajax',
                param1: 2,
                param2: 3,
                name: vScriptAjax.name,
                text: $('#text').val(),
                post_id: vScriptAjax.post_ID,
                prev_post_title: vScriptAjax.prev_post
            },
      beforeSend: function() {
        $('#vbutton').text('Загрузка, 5 сек...');
      },
      success: function( data ) {
        $('#vbutton').text('Отправить');
        console.log( data );
                console.log(vScriptAjax);
      }
    });
    });
});

Проверим как это все работает все вместе на фронте.
Скрипт через console.log() выводит данные из функции 

 vajax_function (print_r($_POST))

и еще в

console.log() 

я отправил название объекта из 

wp_localize_script — vScriptAjax 

чтобы посмотреть какие данные там хранятся.

Таким образом происходит передача данных из php в скрипт js и обратно js выводит полученные данные.

Если с английским более или менее, то рекомендую это видео, тут довольно подробно поясняется, как работает Ajax в WordPress