You can create a shortcode function to use in your content eg. [data-display]
which you would place in your custom plugin, child theme’s functions.php, or /wp-content/mu-plugins/ folder:
add_shortcode('data-display', 'custom_api_data_display');
function custom_api_data_display($atts) {
// for whatever you API call function is
// you may want check $_REQUEST or shortcode $atts to modify
$args = array('some_key' => 'some_value', 'some_key2' => 'some_value2');
$data = custom_api_data_request($args);
if (count($data) > 0) {
$html="<div class="result-container">";
foreach ($data as $result) {
$html .= '<div class="single-result">';
// output whatever data result keys you like here
// this is just a simple example with image, title and description
$html .= '<img class="result-image" src="'.$result['image_url'].'">';
$html .= '<div class="result-title">'.$result['title'].'</div>';
$html .= '<div class="result-description">'.$result['description'].'</div>';
$html .= '</div>';
}
$html .= '</div>';
} else {
$html="<p>No results found.</p>";
}
return $html;
}
Noting that $atts
are the shortcode attributes passed in the content, eg. [data-display category="cat1"]
will give $atts
as array data of array('category' => 'cat1');
Of course you would need to add further layers to enable search filtering functions, and these parameters could be checked via $_REQUEST