Your First API Connection

What you’ll build#

In this tutorial you connect your WordPress site to DummyJSON, a free demo API that requires no signup and no credentials. You’ll add the API, create one endpoint that fetches a list of products, and run a live test — ending with real JSON data on your screen. Everything happens inside the HuxxConnect admin screens; you won’t write any code.

New to APIs? Read this first

An API is a way for one site to ask another site for data over the web. If the whole idea is fuzzy, read What is an API? first — this tutorial makes more sense afterward.

HuxxConnect also ships an interactive version of this exact walkthrough: the Setup Guide link at the top of the APIs screen launches a step-by-step tour using the same DummyJSON demo. This page covers the same ground in a form you can read at your own pace.

Before you start#

You need:

• HuxxConnect installed and activated.
• A WordPress account that can see the HuxxConnect menu in the admin sidebar (administrators have this by default).
• Nothing else. DummyJSON is public — no account, no API key, no credentials.

Step 1: Open the APIs screen#

In the WordPress admin sidebar, go to HuxxConnect (the top-level menu item — its first submenu is APIs).

If this is a fresh install, you’ll see an empty state that reads “No APIs configured yet” with an Add Your First API button. If you already have APIs, you’ll see them as cards, with an Add API button in the top-right corner.

Step 2: Add the API#

Click Add API (or Add Your First API). The Add New API modal opens. Fill it in:

Two things worth noticing as you type:

• The API ID (slug) is generated from the name — lowercase letters, numbers, and underscores only. You’ll use this ID later in shortcodes and PHP, so keep it short.
• The Base URL is the root of the API. Every endpoint path gets appended to it, and trailing slashes are removed automatically.

Click Create API.

You land on the API detail page for Demo API. The breadcrumb at the top reads APIs / Demo API, and the API Configuration card shows the name, ID, Base URL, and Auth Type you just entered. Since DummyJSON needs no authentication, there’s nothing more to configure here.

Step 3: Add an endpoint#

An endpoint is one specific request the API answers — one URL path, one HTTP method. Your Demo API doesn’t do anything until it has at least one.

In the Endpoints card, click Add Endpoint. The Add New Endpoint modal opens. Fill it in:

Leave Cache TTL (seconds) at 0 and Results Format on PHP Array (decoded JSON) — the defaults are right for this tutorial.

Click Create Endpoint.

The endpoint appears as a row in the Endpoints card: a GET method badge, the name Get Products, and the path /products. HuxxConnect will combine the Base URL and this path into the full request URL: https://dummyjson.com/products.

Step 4: Limit the results with a query parameter#

The /products endpoint returns a lot of products by default. Let’s ask for just three, so the response is small enough to read.

1. Click the Get Products row to expand it.
2. Click Query Parameters to expand that section.
3. Click + Add Parameter and enter — Key: limit, Value: 3.
4. Click Save.

The parameter is now part of the endpoint’s saved configuration: every request will go to https://dummyjson.com/products?limit=3.

Step 5: Run a live test#

Still inside the expanded endpoint, scroll to the Testing section at the bottom and click Run Test.

While the request runs you’ll see Sending request…, and then the Response tab activates with a success status dot. The panel fills with the JSON DummyJSON sent back:

{
  "products": [
    { "id": 1, "title": "Essence Mascara Lash Princess", "price": 9.99 },
    { "id": 2, "title": "Eyeshadow Palette with Mirror", "price": 19.99 },
    { "id": 3, "title": "Powder Canister", "price": 14.99 }
  ],
  "total": 194,
  "skip": 0,
  "limit": 3
}

(Each product carries many more fields — description, images, ratings — trimmed here for readability. Exact titles and totals may differ as DummyJSON updates its demo data.)

Notice the structure: the product list lives under the products key, wrapped alongside total, skip, and limit. You’ll use that products key in the next tutorial to pull values out of the response.

Click the Request tab to see exactly what was sent: the method, the full URL with ?limit=3, and the headers. The Test Variables panel above the tabs lets you try temporary overrides — they’re merged into the test request but never saved.

That’s it — your site just made a real API request and got real data back. Back on the APIs screen, the Demo API card’s status dot now shows Enabled: it’s active, has an endpoint, and its auth setup is complete.

What just happened#

You configured two layers, and that split is the core of how HuxxConnect works:

• The API (Demo API) holds what’s shared across every request: the Base URL, the auth type, timeouts, and default parameters.
• The endpoint (Get Products) holds one specific request: method, path, and its own parameters.

When you clicked Run Test, HuxxConnect joined the Base URL and path, appended your query parameter, sent a GET request, and decoded the JSON response into the panel. The same engine powers shortcodes and PHP calls on your site’s front end — the test panel is just the fastest way to watch it work. For the full request lifecycle, read How HuxxConnect works. When you connect a real API that needs credentials, start with Understanding authentication.

If it didn’t work#

The Response tab shows an error status. Open the Request tab and check the URL — it should be exactly https://dummyjson.com/products?limit=3. The two usual culprits: a typo in the Base URL, or a typo in the Path (/product instead of /products). Fix the field, click Save, and run the test again. If you tested with unsaved edits, note the warning: tests use the last saved configuration.

The test hangs and then fails with a timeout or connection error. Your server couldn’t reach dummyjson.com. Some hosts block outgoing HTTP requests — check with your host, and try raising Timeout (seconds) in the API Configuration card. The Debug API requests guide shows how to read the request log for details.

You can’t see the HuxxConnect menu at all. Your account lacks the manage_huxx_connect capability. Log in as an administrator, or ask one to grant access.

Where next#

• New to APIs? Continue to Displaying API Data on Your Site — the natural next step, using this same Demo API to put products on a page.
• Developer? Jump straight to the template functions reference and the shortcodes reference for the complete call signatures and attributes.