jQuery code to fetch HTML content from the WordPress REST API.


1.1.43 years ago3 years agoMinified + gzip package size for @markhowellsmead/wp-html-from-rest-api in KB


Fetch HTML from the WordPress REST API

jQuery script which looks for one or more HTML element/s with the attributes data-fill-from-api and data-api-validation-code, then fills them with HTML from a custom WordPress REST API endpoint.

  • data-fill-from-api: Partial path to the REST API endpoint which delivers the required HTML. This will be prefixed with the usual REST API path.
  • data-api-validation-code: The result of the API request should only be placed inline if the returned code matches the one specified on the element.


Use the custom events which are triggered when the response completes. Each event corresponds to the appropriate jQuery.ajax result.

Following events are triggered

$(window).trigger('wp-html-from-rest-api/success', data, textStatus, jqXHR);
$(window).trigger('wp-html-from-rest-api/error', jqXHR, textStatus, errorThrown);
$(window).trigger('wp-html-from-rest-api/complete', jqXHR, textStatus);

Example of responding to a custom event

$(window).on('wp-html-from-rest-api/success', function(event, results){


<div class="my-api-html-wrapper" data-fill-from-api="markhowellsmead/v1/demo/html/" data-api-validation-code="demo_html_content"></div>

Suggested data response from your custom endpoint

$response = array(
    'code' => 'demo_html_content',
    'data' => array(
        'format' => 'html',
        'result' => $html,
        'status' => 200


1.1.4 2018-11-09

  • Rename erroneous error trigger to wp-html-from-rest-api/error

1.1.3 2018-09-05

  • Add varto define JavaScript variable $api_link.

1.1.2 2018-07-30

  • Updated README with example of how to use the JavaScript events.

1.1.1 2018-07-30

  • Updated README with the JavaScript events which will be triggered when the server has responded.

1.0.0 2018-07-30

  • Revised package name to @markhowellsmead/wp-html-from-rest-api.

1.0.0 2018-07-30

  • Initial version

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.