--- title: Your First API Connection slug: your-first-api-connection type: tutorial plugin: huxx-connect summary: Connect WordPress to a live API in about five minutes — add the DummyJSON demo API, create a products endpoint, and see real JSON in the test panel. keywords: [getting started, first api, dummyjson, add api, test endpoint] version_added: 1.2.5 version_updated: 1.2.5 level: beginner related: [displaying-api-data, what-is-an-api, how-huxxconnect-works] --- # 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. :::novice 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?](/docs/connect/explanation/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: | Field | Value | |---|---| | API Name | `Demo API` | | API ID (slug) | `demo_api` (fills in automatically as you type the name) | | Base URL | `https://dummyjson.com` | | Auth Type | **None** | 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](/docs/connect/explanation/understanding-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: | Field | Value | |---|---| | Endpoint Name | `Get Products` | | Endpoint ID (slug) | `get_products` (fills in automatically) | | Method | **GET** | | Path | `/products` | 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: ```json { "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](/docs/connect/explanation/how-huxxconnect-works/). When you connect a real API that needs credentials, start with [Understanding authentication](/docs/connect/explanation/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](/docs/connect/how-to/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](/docs/connect/tutorial/displaying-api-data/) — the natural next step, using this same Demo API to put products on a page. - **Developer?** Jump straight to the [template functions reference](/docs/connect/reference/template-functions/) and the [shortcodes reference](/docs/connect/reference/shortcodes/) for the complete call signatures and attributes.