Endpoints

WordPress endpoints are PHP functions or REST routes that handle requests from the frontend and return dynamic content.
They allow us to fetch posts, modules, or resources and update the page dynamically, without relying solely on full page reloads.

---

Why we use them?

• Enable dynamic content loading for a better user experience.
• Keep frontend code clean by separating data fetching from rendering.
• Reuse existing templates for consistent markup.

---

General Interaction Flow

Before diving into specific concepts, it’s important to understand the overall flow of how data moves through the system:

1. PHP renders the initial markup and outputs configuration data (via HTML or data attributes).
2. The frontend (JavaScript) reads those values and decides when and how to request more data.
3. A service is called from the frontend to communicate with WordPress.
4. The endpoint (AJAX or REST) processes the request in PHP and returns data (JSON or HTML).
5. The frontend/JS receives the response and is fully responsible for updating the DOM or executing UI logic.

This flow makes data movement explicit:

PHP → JavaScript → Endpoint → JavaScript → DOM

---

What is a Service

A service is a JavaScript layer responsible for communicating with WordPress.
It acts as a bridge between frontend components and backend endpoints.

Its responsibilities are:

• Calling the correct endpoint (AJAX or REST).
• Passing parameters received from the frontend.
• Handling errors and responses.
• Returning processed data back to the JavaScript that invoked it.

A service does not manipulate the DOM directly.
All DOM updates are handled by the frontend code that calls the service.

---

What is a WordPress AJAX Endpoint

An AJAX endpoint is a PHP function that receives requests from JavaScript without reloading the page.
It allows querying posts, filtering content, or generating dynamic HTML and returning it to the browser.

Example use cases:

• A “Load More” button that fetches additional posts.
• Filtering results by categories or tags in real time.
• Returning rendered HTML snippets for dynamic insertion.

Endpoints are registered in WordPress using:

• add_action('wp_ajax_...')
• add_action('wp_ajax_nopriv_...')

---

What is a Custom REST Endpoint

A custom REST endpoint is a personalized route within the WordPress REST API.
It can receive parameters via the URL and return structured data (usually JSON).

Example use cases:

• Fetching customized results based on user input.
• Retrieving filtered information from ACF options or site settings.
• Exposing WordPress data to external consumers.

---

Data Flow: PHP → JavaScript → Endpoint

A key concept in our architecture is understanding how data travels across layers.

PHP to JavaScript

PHP renders the initial HTML and embeds configuration values using data attributes.
These values are not meant for PHP anymore—they are passed forward to JavaScript.

<button
    class="js--load-more"
    data-post-type="resources"
    data-posts-per-page="3">
    Load More
</button>

JavaScript to Endpoint

JavaScript reads these attributes at runtime and builds the request payload.
This is how the frontend knows:

• What content to fetch
• How many items to request
• Which endpoint to call

---

Minimal PHP & AJAX Endpoint Example

Below is a minimal example showing how an endpoint generates HTML and returns it to the frontend.

functions/project/endpoints/get-resources-search.php

add_action('wp_ajax_nopriv_load_resources', 'load_resources');
add_action('wp_ajax_load_resources', 'load_resources');

function load_resources() {
    ob_start();

    $posts = new WP_Query([
        'post_type' => 'resources',
        'posts_per_page' => 3,
    ]);

    while ($posts->have_posts()) : $posts->the_post();
        $title = get_the_title();
        $excerpt = get_field('resource_description') ?: get_the_excerpt();
        include locate_template('components/cards/card-a.php', false, false);
    endwhile;

    wp_reset_postdata();

    echo json_encode([
        'html' => ob_get_clean(),
    ]);

    wp_die();
}

The endpoint:

• Receives a request from JavaScript
• Fetches and renders content using PHP templates
• Returns the generated HTML as JSON

The frontend JavaScript that initiated the request is responsible for inserting that HTML into the DOM.

---

Key Takeaways

• PHP provides initial data and configuration.
• JavaScript orchestrates when and how data is fetched.
• Services abstract communication with WordPress.
• Endpoints focus on data retrieval and rendering.
• The DOM is always managed from the frontend.