Skip to Main
View .mdAsk ClaudeAsk ChatGPT

This page collects the shortcode patterns you reach for most often. Every recipe assumes the standing demo configuration: an API with the id demo_api (base URL https://dummyjson.com) and a GET endpoint with the id get_products (path /products). A few recipes add two more endpoints to that same API — product_detail (GET /products/{0}) and add_product (POST /products/add). Full attribute-by-attribute detail lives in the Shortcode Reference.

Quick version:

                          → full response as JSON
  → one value


      → run, render nothing

HuxxConnect: "api_id" attribute is required. and HuxxConnect: "api_id" attribute is required. are aliases of HuxxConnect: "api_id" attribute is required. with identical attributes.

For one value per item, the [] wildcard is PHP-only: huxx_api( 'demo_api', 'get_products', array( 'keys' => 'products.[].title' ) ). It cannot go in a shortcode attribute — WordPress ends the shortcode at the first ].

Display a full response

The minimal shortcode calls the endpoint and renders the decoded response as pretty-printed JSON inside a <pre class="huxx-connect-response"> block.

Shortcode:

PHP:

<?php
$data = huxx_api( 'demo_api', 'get_products' );
if ( ! huxx_api_is_error( $data ) ) {
    echo '<pre>' . esc_html( wp_json_encode( $data, JSON_PRETTY_PRINT ) ) . '</pre>';
}

Output (truncated):

{
    "products": [
        {
            "id": 1,
            "title": "Essence Mascara Lash Princess",
            "category": "beauty",
            "price": 9.99
        }
    ],
    "total": 194,
    "skip": 0,
    "limit": 30
}

Rendering raw JSON is a diagnostic step, not a finished page — once the connection works, narrow the output with keys (next recipe) or format it with the Pro attributes (last recipe).

An API response usually arrives as JSON — nested lists and labeled values. The recipes below pick individual values out of that structure. The Displaying API Data tutorial walks through this from the beginning.

Display a single value

The keys attribute walks into the response with a dot-separated path. products.0.title means: the products list, its first item (0), that item’s title.

Shortcode:

PHP:

<?php
$title = huxx_api( 'demo_api', 'get_products', array( 'keys' => 'products.0.title' ) );
if ( ! huxx_api_is_error( $title ) ) {
    echo esc_html( $title );
}

Output:

<pre class="huxx-connect-response">Essence Mascara Lash Princess</pre>

To pull several values at once, wrap each path in braces: keys="{products.0.title},{products.0.price}" returns both, keyed by their full paths. The full syntax — including the PHP-only [] wildcard that extracts a value from every list item — is worked through in Extract Values with the keys Syntax.

Pass a path variable at render time

When an endpoint path contains a path variable — for example a product_detail endpoint with the path /products/{0} — supply the value with endpoint_variables.

Shortcode (indexed variables, comma-separated in path order):

For named variables (path /products/{product_id}), use key=value pairs:

PHP:

<?php
$product = huxx_api( 'demo_api', 'product_detail', array(
    'endpoint_variables' => array( 1 ),
) );

Output (truncated):

{
    "id": 1,
    "title": "Essence Mascara Lash Princess",
    "price": 9.99
}

The format is auto-detected: if any segment contains =, the whole string is treated as named pairs; otherwise the values map by position.

Override query and body parameters

query_variables merges key=value pairs on top of the parameters saved in the endpoint configuration — runtime values win.

Output (truncated):

{
    "products": [
        { "id": 11, "title": "Annibale Colombo Bed" },
        { "id": 12, "title": "Annibale Colombo Sofa" }
    ],
    "total": 194,
    "skip": 10,
    "limit": 2
}

Because the parser splits pairs on commas, a value itself cannot contain a comma — use the template function for complex values.

For POST endpoints, body_json accepts a complete JSON object (use single quotes around the attribute so the inner double quotes survive):

Output:

{
    "id": 195,
    "title": "Coffee Mug"
}

body_json takes precedence over body_variables when both are set. See Send Query, Header, and Body Parameters for how runtime values merge with the saved configuration.

Run a request without rendering anything

format="no_display" executes the request and returns an empty string. Use it when the side effect is the point — for example, notifying an external system when a page is viewed.

Output: nothing is rendered. The request still appears in the request log (see Debug API Requests).

Show errors while you build

By default a failed request renders nothing, so a broken page stays clean for site visitors. While building, set debug="true" to render the error details instead. Debug output is capability-gated: it renders only for logged-in users with the manage_huxx_connect capability (administrators, by default). Everyone else still sees nothing, even with debug="true" in place.

Output when the request fails (example — endpoint id misspelled), rendered inside <pre class="huxx-connect-error"> for a logged-in administrator:

{
    "_huxx_connect_error": true,
    "code": 0,
    "message": "Endpoint "get_prodcuts" not found for API "demo_api".",
    "original_response": null,
    "context": {
        "api_id": "demo_api",
        "endpoint_id": "get_prodcuts"
    }
}

One exception to the capability gate: when the HTTP request itself fails (a timeout, an error status from the API server), the executor’s debug mode converts the error to a plain array before the shortcode sees it, and that array renders as JSON for every visitor. Remove debug="true" once the page works.

Format output as HTML (Pro)

With HuxxConnect Pro active, format="html" renders an array response as nested HTML elements instead of JSON, controlled by the html_* and img_* attributes:

Output (whitespace added for readability):

<ul class="huxx-connect-html huxx-connect-outer-wrap">
    <li class="huxx-connect-title"><span class="huxx-connect-label">Title</span> Essence Mascara Lash Princess</li>
    <li class="huxx-connect-price"><span class="huxx-connect-label">Price</span> 9.99</li>
</ul>

Pro also provides format="number_format(2)" to render a numeric result with a fixed number of decimals. The full attribute list is in the Shortcode Reference.

If it didn’t work

  • The page shows HuxxConnect: "api_id" attribute is required. (or the endpoint_id variant) — the attribute is missing or misspelled. Both api_id and endpoint_id are required; check them against the ids shown on the API detail screen.
  • Nothing renders at all. The request failed and debug is off. Add debug="true" and view the page while logged in with the manage_huxx_connect capability to see the error, or open the request log — Debug API Requests shows where to look.
  • keys renders null. The path doesn’t match the response structure. Render the full response first (drop keys), read the real structure, then rebuild the path — Extract Values with the keys Syntax covers the rules.