cURL External API request displays content above other content on page

Question

I've built a plugin to display our customer feedback on our WordPress website. We use an external feedback system called 'Customer Thermometer'. They have a simple API to use a URL to request stats and comments etc. This example is showing total stats but I have a bigger comments block function that shows recent comments in a slider.

Sample URL to get the total responses back: https://app.customerthermometer.com/api.php?apiKey=[apiKey-here]&getMethod=getNumResponsesValue

I can get the responses back fine using the code below but the cURL request and code I implement is always at the top of the page regardless of where I add the shortcode.

Call method in my class 'picts_ct_api_connection':

public function call($call) {

    $url = $this->get_url();
    $apikey = $this->get_api_key();
    $method = $this->build_apicall($call);
    
    $request_url = $url.$apikey.$method;
    
    $curl = curl_init($request_url);

    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($curl, CURLOPT_VERBOSE, 1);
    curl_setopt($curl, CURLOPT_POST, false);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($curl, CURLOPT_HEADER, false);

    $response = curl_exec($curl);

    curl_close($curl);

    return $response;
}

Shortcode function to display response

function picts_ct_responses( $atts = [], $content=null, $tag='' ) {

    $method = array(
        'getMethod' => 'getNumResponsesValue'
    );
 
    $api_call = new picts_ct_api_connection();

    $response = $api_call->call($method);

    echo $response;
}
add_shortcode( 'total_responses', 'picts_ct_responses' );

I've added my shortcode here (shown below) in the middle of some dummy text on my page:

But it shows on my page here:

I also get a JSON responses error when saving the page so I feel it's something to do with the cURL response printing to the page early and not being added to my variable and being used in the correct place.

I've searched online and not found anything to help on this. Any help would be much appreciated.

John

Answer 1

Excerpt from the Shortcode API handbook (italic formatting added by me):

The return value of a shortcode handler function is inserted into the post content output in place of the shortcode macro. Remember to use return and not echo – anything that is echoed will be output to the browser, but it won’t appear in the correct place on the page.

So the issues in question (misplaced output and JSON responses error) happened because you used echo $response; instead of return $response; in your shortcode handler function, i.e. picts_ct_responses().

And to fix the issues, all you need to do is simply replace that echo with return and the error would be gone.

---

Additionally, WordPress provides various helper functions like wp_remote_get() for making HTTP requests to an external service/API/website, so you should use those helper functions instead of manually calling cURL functions like curl_setopt().

And you'd also would want to cache (e.g. using the Transients API) the responses received from your HTTP requests for performance reasons, particularly in the case of shortcodes which can be automatically called multiple times on the same page.