Create a WPBakery-compatible Bitcoin Ticker Shortcode

In this post we are going to create a simple WordPress shortcode that displays the current price of Bitcoin in USD, GBP, EUR and JPY, through the use of the free CoinMarketCap API. After we’ve created the shortcode, we will use the WPBakery Shortcode Mapper to make this shortcode available on our Visual Page Builder.

The final code is available on GitHub.

Drawing from the examples provided by the official Codex documentation, we create a simple shortcode with just one attribute and paste the code on our child theme’s functions.php file:

<?php

function cryptotickerCreate( $atts , $content = null ) {

    $atts = shortcode_atts(
        array( 'currency' => 'EUR' ),
        $atts
    );

    return "Bitcoin!";

}
add_shortcode( 'cryptoticker', 'cryptotickerCreate' );

In this simple code, we use the add_shortcode function to create a new shortcode named [[cryptoticker]] (first argument) with an attribute named currency.  We create a function named cryptotickerCreate that will handle the shortcode logic and content, and we pass its name as the second argument to the add_shortcode function. For now, our function just returns (displays) the temporary message “Bitcoin!”.

Our function, also, contains the $content parameter which holds any text data passed by the user, but since we are not going to use any user content we are going to remove it.

Now let’s do a quick test of our shortcode. We are going to add a new Text Block Page Builder Element on our Page, and paste the following shortcode text: [[cryptoticker currency=”EUR”]] 

We save our Page, and if we closely followed each step, we should now see a “Bitcoin!” text on our front page.

Now let’s add some code that will display the latest price of Bitcoin. We are going to use the CoinMarketCap API endpoint for Specific Currencies. In our case, we are passing the number 1 in the endpoint parameter. Number 1 is the Bitcoin’s ID. You can find the IDs of all other currencies in their listing page.

We also provide the query parameter convert in the URL, with the value set to “EUR“, in order for the API to give us the current price in EURO along with US Dollar.

function cryptotickerCreate( $atts ) {

  $atts = shortcode_atts(
    array( 'currency' => 'EUR' ),
    $atts
  );

  $coinmarketcapAPI = "https://api.coinmarketcap.com/v2/ticker/1/?convert=EUR";
  $response = wp_remote_get( $coinmarketcapAPI );
  $body = $response['body'];

  return $body;

}
add_shortcode( 'cryptoticker', 'cryptotickerCreate' );

In the code above, we’ve used the WordPress wp_remote_get helper function to do a simple HTTP GET request to the API Endpoint. You can paste the endpoint’s URL in your browser and see the resulting data.

On our code, we need to explicitly ask for the request body (the response you see on your browser) and store it in a variable called $body. You should now be seeing something like the following data displayed on your front page:

We’re doing great! What we are seeing, is the raw JSON response we get from the API. We are now going to parse this JSON data and display it inside some HTML with the following additions to our code:

function cryptotickerCreate( $atts ) {

  $atts = shortcode_atts(
    array( 'currency' => 'EUR' ),
    $atts
  );

  $coinmarketcapAPI = "https://api.coinmarketcap.com/v2/ticker/1/?convert=" . $atts['currency'];
  $response = wp_remote_get( $coinmarketcapAPI );
  $body = $response['body']; 
  $body = json_decode($body);

  $content = '<div class="text-center"><p class="btn btn-primary"><i class="fa fa-btc"></i> BitCoin Price</p><br/>';

  foreach ( $body->data->quotes as $key => $value) {
    $content .= '<p class="btn btn-secondary">' . $key . ': <i class="fa fa-' . strtolower($key) . '"></i> ' . floor($value->price) . '</p>';
  }

  $content .= '</div>';

  return $content;

}
add_shortcode( 'cryptoticker', 'cryptotickerCreate' );

Let’s go over these additions and see what they do.

First of all, we need to replace the hardcoded currency query parameter with the one provided by the user as a shortcode attribute:

The $atts[‘currency’] variable holds the shortcode parameter as placed by the user in the Text Block: [[cryptoticker currency=”EUR”]].

Next, we need to parse the JSON response using the PHP json_decode function.

Following the json_decode line, we are creating a $content variable that will be holding the resulting HTML which will be displayed on our front page. We add some CSS classes from our theme in order to style the content.

In our foreach loop, we iterate over the JSON data.quotes entries which hold the current USD and EUR prices of Bitcoin and add the values in a <p> tag along with some <i> tags containing the Font Awesome icons for the currency symbols. You can check the raw JSON response again, in order to get an idea of how our data parsing works.

Note, how we use the PHP floor function to convert the floating number prices (e.g. 8,3039.342) to integers.

Our shortcode works as expected but we still have to use a Text Block and write the shortcode by hand to make it available on our Page.

We will use the WPBakery Shortcode Mapper to convert our shortcode into a Page Builder element for easy access.

First, we go to Dashboard > WPBakery Page Builder > Shortcode Mapper.

Now click on Map Shortcode, enter the shortcode text (see next screenshot) along with the attribute and click on Parse Shortcode.

On the next screen, add a Description, e.g. “A Bitcoin ticker shortcode” and a description for the currency attribute, which accepts three currencies “Available currencies: EUR, GBP and JPY” and click Save Changes.

Your Shortcode is now ready and available as a Page Builder Element called Cryptoticker. Enjoy!