Introduction to Fetching API in Bricks

In this tutorial, we’ll create a dynamic Chuck Norris quote picked from a public API to understand the basics of API fetching in Bricks.

Create a custom function
Get the API response
Convert the JSON Object into a PHP array
Return the desired value

Create a custom function

Let’s open the functions.php file of our child theme and create a function called get_random_chuck_norris_quote and return some dummy text:

function get_random_chuck_norris_quote(){
   return 'This function works';
}

Now let’s open the Bricks builder, and paste the function inside our desired element using the bricks echo function. In this example, I’m using a Testimonial element:

Let’s check if everything is working on the frontend:

The function is working! Let’s connect the API!

Get the API response

First of all, let’s save the URL where the API is hosted inside a variable $random_url_api. Checking the https://api.chucknorris.io/ website, they clearly point to the following random API URL: https://api.chucknorris.io/jokes/random.

Now we need to perform an HTTP request using the GET method and return its response inside a new variable $response. We’ll use the wp_safe_remote_get() function to do that and will var_dump the $response variable to check what is being returned from the API:

function get_random_chuck_norris_quote(){

  $random_url_api = 'https://api.chucknorris.io/jokes/random';
  $response = wp_safe_remote_get($random_url_api);

  // Stop the function if the response returns an error
  if ( is_wp_error( $response ) ) {
	return false;
  }

  // Let's check the response content
  var_dump($response);

}

Now let’s check the frontend, you should see the following output:

As you can see, it returns an array with a bunch of information we don’t need. In our case, we just need the quoted text which is located in [body].

To get the body part only, let’s use a really handy function: wp_remote_retrieve_body();

So let’s var_dump the body part only:

function get_random_chuck_norris_quote(){

  $random_url_api = 'https://api.chucknorris.io/jokes/random';
  $response = wp_safe_remote_get($random_url_api);

  // Stop the function if the response returns an error
  if ( is_wp_error( $response ) ) {
	return false;
  }

  // Get the body part
  $response_body = wp_remote_retrieve_body( $response );

  // Let's check the response body content
  var_dump($response_body);

}

The output is a JSON object that includes categories, id, url… and the value which is the data we’re looking for:

{
   "categories":[
      
   ],
   "created_at":"2020-01-05 13:42:26.447675",
   "icon_url":"https://assets.chucknorris.host/img/avatar/chuck-norris.png",
   "id":"wOgZCCWDReOnr3ws_Sqw2g",
   "updated_at":"2020-01-05 13:42:26.447675",
   "url":"https://api.chucknorris.io/jokes/wOgZCCWDReOnr3ws_Sqw2g",
   "value":"No matter how manly and hetro you claim to be, if you are given a nude photo of Chuck Norris, you will be dead from carpal tunnel syndrome within 4 hours."
}

Convert the JSON Object into a PHP array

We’re getting closer! We now return a JSON object that contains the quoted text as a value.

To extract the data from the JSON object, we need to use the json_decode() function and return a PHP array. Let’s var_dump the result:

function get_random_chuck_norris_quote(){

  $random_url_api = 'https://api.chucknorris.io/jokes/random';
  $response = wp_safe_remote_get($random_url_api);

  // Stop the function if the response returns an error
  if ( is_wp_error( $response ) ) {
	return false;
  }

  // Get the body part
  $response_body = wp_remote_retrieve_body( $response );

  // Decode the JSON object into a PHP array
  $response_body_decoded = json_decode( $response_body, true );

  // Let's check the response body content
  var_dump($response_body_decoded);

}

which output the following array:

Array
(
    [categories] => Array
        (
        )

    [created_at] => 2020-01-05 13:42:28.984661
    [icon_url] => https://assets.chucknorris.host/img/avatar/chuck-norris.png
    [id] => nYj4tJQ-T4ioHrzbr8rFMg
    [updated_at] => 2020-01-05 13:42:28.984661
    [url] => https://api.chucknorris.io/jokes/nYj4tJQ-T4ioHrzbr8rFMg
    [value] => By the time you see Chuck Norris in your rearview mirror, he's already kicked you in the face and is 10 car lengths ahead of you.
)

Return the desired value

Almost done! We now need to pick the value from the array and return it inside our function:

function get_random_chuck_norris_quote(){

  $random_url_api = 'https://api.chucknorris.io/jokes/random';
  $response = wp_safe_remote_get($random_url_api);

  // Stop the function if the response returns an error
  if ( is_wp_error( $response ) ) {
	return false;
  }
  
  // Get the body part 
  $response_body = wp_remote_retrieve_body( $response );

  // Decode the JSON object into a PHP array
  $response_body_decoded = json_decode( $response_body, true );

  // Return the quoted text
  return $response_body_decoded['value'];

}

And boom! Now we have successfully created a totally useless dynamic quote of Chuck Norris based on a public API! Congrats!

Table of Contents

Create a custom function

Get the API response

Convert the JSON Object into a PHP array

Return the desired value