#9 Module 9 – Using the REST API & Fetch Requests

🌐 Module 9: Using the REST API & Fetch Requests

The WordPress REST API lets you send and receive data via HTTP — perfect for dynamic front-end interactions without reloading the page. In this module, you’ll create a custom REST API endpoint and connect it to JavaScript using the fetch() API.

Step 1 – Register a Custom REST API Endpoint

(📋 You can copy or edit directly below)

    

    

function mfp_register_rest_endpoint() {
    register_rest_route('mfp/v1', '/message', array(
        'methods' => 'GET',
        'callback' => 'mfp_get_message'
    ));
}
add_action('rest_api_init', 'mfp_register_rest_endpoint');

function mfp_get_message($data) {
    return array('message' => 'Hello from the REST API 🚀');
}

  

📘 This registers a new API endpoint at https://yourwebsite.com/wp-json/mfp/v1/message Visit it in your browser to see the JSON response.

Step 2 – Create a Front-End Shortcode with JavaScript Fetch

    

    

function mfp_fetch_example_shortcode() {
    ob_start(); ?>
    <div id="mfp-api-output" style="padding:10px;color:#00ffa3;">
        Loading message...
    </div>
    <script>
        fetch('')
            .then(response => response.json())
            .then(data => {
                document.getElementById('mfp-api-output').innerHTML = 
                    '<strong>API Says:</strong> ' + data.message;
            })
            .catch(error => {
                document.getElementById('mfp-api-output').innerHTML = 
                    'Error loading API data 😢';
                console.error(error);
            });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('mfp_api_demo', 'mfp_fetch_example_shortcode');

  

📘 Use the shortcode [mfp_api_demo] in a page or post to see your REST API data displayed live via JavaScript.

Step 3 – Add a POST Endpoint (Send Data from JS)

    

    

function mfp_register_post_endpoint() {
    register_rest_route('mfp/v1', '/submit', array(
        'methods' => 'POST',
        'callback' => 'mfp_submit_data'
    ));
}
add_action('rest_api_init', 'mfp_register_post_endpoint');

function mfp_submit_data($data) {
    $params = $data->get_json_params();
    $name = sanitize_text_field($params['name']);
    return array('response' => 'Hi ' . $name . ', your data was received ✅');
}

  

📘 Now you can POST data to /wp-json/mfp/v1/submit and get a JSON response!

Step 4 – Connect Front-End Form to the POST API

    

    

function mfp_api_post_form_shortcode() {
    ob_start(); ?>
    <form id="mfp-post-form">
        <label>Your Name:</label><br>
        <input type="text" id="mfp_name" required /><br><br>
        <button type="submit">Send via REST API</button>
    </form>
    <div id="mfp_result" style="color:#00ffa3;margin-top:10px;"></div>

    <script>
    document.getElementById('mfp-post-form').addEventListener('submit', function(e) {
        e.preventDefault();
        const name = document.getElementById('mfp_name').value;

        fetch('', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ name: name })
        })
        .then(response => response.json())
        .then(data => {
            document.getElementById('mfp_result').innerHTML = data.response;
        })
        .catch(err => {
            document.getElementById('mfp_result').innerHTML = '❌ Error sending data.';
            console.error(err);
        });
    });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('mfp_api_form', 'mfp_api_post_form_shortcode');

  

📘 Use [mfp_api_form] in a page — it sends data to the REST API and displays the result instantly.

✅ Code copied to clipboard!

© 2025 WordPress Plugin Tutorial | Module 9 – Using the REST API & Fetch Requests