Secure API Integration for a Listing System in WordPress

Overview

This project demonstrates how to securely fetch external API data in WordPress using a custom REST API endpoint. The goal is to prevent exposing API keys on the frontend, ensuring security while keeping the system modular and reusable for future integrations.

For demonstration purposes, this project uses The Cat API to fetch cat breed listings, displaying an image, excerpt, and a “Read More” link—giving the look and feel of a blog post. However, this API source can be easily replaced in the backend without modifying the frontend.

Challenges & Solutions

🔴 Challenge: Exposing API Keys in JavaScript

Problem: If an API key is used directly in JavaScript, it becomes publicly visible in the browser’s developer tools. This is a security risk.

✅ Solution:

Use WordPress’s REST API to create a secure backend endpoint.
Store the API key in PHP (not in JavaScript).
Fetch data server-side using wp_remote_get(), then expose only necessary data to the frontend.

🔴 Challenge: Making API Integration Future-Proof

Problem: If another API needs to be used in the future, modifying JavaScript can be inconvenient.

✅ Solution:

Keep API fetching logic in PHP. Developers can easily change the API URL in wp_remote_get() without touching frontend code.
The JavaScript code remains the same regardless of the data source.

🔴 Challenge: Preventing Theme Updates from Overwriting Code

Problem: Adding custom code in functions.php can be lost when the theme updates.

✅ Solution:

Use the WPCode – Insert Headers and Footers + Custom Code Snippets plugin to insert PHP code.
This way, custom API logic stays intact even after theme updates.

Implementation

1️⃣ Registering a Custom WordPress REST API Endpoint

This registers a custom REST API at /wp-json/magnificenth-listing/v1/listing-data, allowing JavaScript to fetch data without exposing sensitive credentials.

add_action('rest_api_init', function () {
    register_rest_route('magnificenth-listing/v1', '/listing-data', array(
        'methods' => 'GET',
        'callback' => 'fetch_listing_data',
        'permission_callback' => '__return_true', // Public access (can be restricted if needed)
    ));
});

✔ Why this is important

Ensures the frontend gets data without exposing the API key.
Uses WordPress’s built-in REST API structure for easy integration with other plugins or external services.

2️⃣ Fetching Data Securely from an External API

This function retrieves data server-side using wp_remote_get(), ensuring the API key remains hidden from users.

define('THE_LISTING_API_KEY', 'your_api_key_here'); // Store API key securely

function fetch_listing_data() {
    $api_key = defined('THE_LISTING_API_KEY') ? THE_LISTING_API_KEY : '';

    // Fetch data from the external API
    $response = wp_remote_get("https://api.thecatapi.com/v1/breeds?limit=6", array(
        'headers' => array(
            'x-api-key' => $api_key,
        ),
    ));

    if (is_wp_error($response)) {
        return new WP_Error('api_error', 'Unable to fetch listings data', array('status' => 500));
    }

    return rest_ensure_response(json_decode(wp_remote_retrieve_body($response), true));
}

✔ Key Benefits

Keeps the API key hidden (not exposed in the frontend).
Easily switch to another API by updating wp_remote_get().

3️⃣ Fetching Data on the Frontend (JavaScript)

This JavaScript code dynamically retrieves the API data and inserts it into the page.

fetch('/wp-json/magnificenth-listing/v1/listing-data')
    .then(response => response.json())
    .then(data => {
        let content = document.getElementById('listings-container');
        content.innerHTML = data.map(listing => generateListingCard(listing)).join('');
    })
    .catch(error => console.error('Error fetching listing:', error));

✔ Why use JavaScript?

Fetches data dynamically from the WordPress REST API.
Keeps frontend independent from backend API changes.

4️⃣ Displaying Data in a Responsive Grid Layout

To make the UI visually appealing, the data is displayed in a 3-column grid layout using CSS.

CSS for Layout

#listings-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 50px;
}

.listing-card img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 20px;
}

.listing-card h3 {
    margin: 10px 0;
}

✔ Why use auto-fit in grid?

Automatically adjusts the number of columns based on screen size (mobile-friendly).

5️⃣ Dynamically Generating Listing Cards

This function formats each API entry into a structured HTML card.

function generateListingCard(listing) {
    let description = listing.description 
        ? listing.description.split(" ").slice(0, 30).join(" ") + "..." 
        : "No description available.";

    let imageUrl = listing.image?.url 
        ? `<img src="${listing.image.url}" alt="${listing.name}">` 
        : "";

    let wikiLink = listing.wikipedia_url 
        ? `<a href="${listing.wikipedia_url}" target="_blank">More Info</a>` 
        : "";

    return `
        <div class="listing-card">
            ${imageUrl}
            <h3>${listing.name}</h3>
            <p>${description}</p>
            ${wikiLink}
        </div>
    `;
}

✔ Why use .split(" ").slice(0, 30).join(" ")?

Limits the description to 30 words, ensuring consistent design.

Key Takeaways 🚀

✅ Security First – API key is never exposed to the frontend.
✅ Modular & Future-Proof – Just change the API URL in wp_remote_get() to use a different data source.
✅ Mobile-Friendly & Clean UI – Uses CSS Grid for a responsive layout.
✅ WordPress-Friendly – Uses WPCode plugin to prevent theme updates from deleting custom code.