Step by Step Example

Here is a real world example of retrieving the latest Bitcoin price from Binance. We use this exact method on our demo page.

Step 1: Add the Binance API in our setup

Click on the WPGetAPI menu in your sidebar to be taken to the Setup page.

  • API Name – we can call this whatever we like, Binance obviously makes sense
  • API ID – we need a unique API ID and again binance makes sense
  • Base URL – this is the base URL of the Binance API  which is https://api.binance.com as described in the Binance docs

Now click on the Save button at the bottom of the page and you should now see a new Binance tab at the top of the page.

Step 2: Configure our endpoint settings

Click on the Binance tab and you will see something like the below. We will just leave the Timeout and SSL Verify fields as they are for now. We want to scroll down to the Endpoints section and fill in the details for our endpoint within Endpoint 1.

We are using the Symbol Price Ticker endpoint as shown here in the Binance API docs – https://binance-docs.github.io/apidocs/spot/en/#symbol-price-ticker

The fields that we need to fill in are:

  • Unique ID – a unique ID for our endpoint that will be used in the template tag or shortcode. price sounds pretty good
  • Endpoint – this is the actual endpoint from Binance that we will connect to which is /api/v3/ticker/price
  • Method – as shown in the Binance docs, this is a GET request
  • Results Format – we will use the template tag later on to get our data, so setting this to array data is the best option
  • Query String – we need to add the symbol parameter which in this case is BTCTUSD. This tells the endpoint to return the price for BTCTUSD which is the Bitcoin price in USD

Once you have added all your details, copy the green Template Tag which we will use to paste into our template.

We can click the blue Save button at the bottom of the page. We should now be able to connect to the Binance API and endpoint, but that won’t happen until we add the shortcode or the template tag to one of our pages. We will use the template tag as it offers greater flexibility.

Step 3: Create page template & connect to API

For our demo page, we simply created a page template and named it demo-page.php and then applied this template to our demo page. You can see the entire page template below.

<?php if ( ! defined( 'ABSPATH' ) ) { exit; }

/**
 * Template Name: Demo Page
 */

get_header(); ?>
	
<div id="layout" class="layout-page demo-page">

	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> itemtype="https://schema.org/WebPage" itemscope="itemscope">

		<div class="entry-content" itemprop="text">

			<div class="tile-row">

				<?php // do our api calls
				$binance= wpgetapi_endpoint( 'binance', 'price', array('debug' => false) );
				$quote = wpgetapi_endpoint( 'quotable', 'random', array('debug' => false) );
				?>

				<div class="demo-tile binance">
					<div class="internal">
						<h4>Bitcoin Price <span>Cached for 30 seconds</span></h4>
						<p>$<?php echo number_format( $binance['price'], 2 ); ?></p>
					</div>
				</div>

				<div class="demo-tile quote">
					<div class="internal">
						<h4>Random Quote <span>Cached for 30 seconds</span></h4>
						<p>"<?php esc_html_e( $quote['content'] ) ?>"</p>
						<span><?php esc_html_e( $quote['author'] ) ?></span>
					</div>
				</div>

			</div>

			<h3><strong>Example 1: Latest Binance price</strong></h3>

			<p>In the first example we are connecting to the Binance API to get the latest Bitcoin price. We have written a <a target="_blank" href="https://wpgetapi.com/docs/step-by-step-example/">step by step guide</a> on how we have done this. We have also used the <a href="https://wpgetapi.com/downloads/pro-plugin/">Pro Plugin</a> to cache the call for 30 seconds, just to avoid hitting the Binance API too often.</p>


			<h3><strong>Example 2: Random quotes</strong></h3>
			<p>In the second example we are connecting to the Quotable API to return a random quote. You can find details on this API at <a href="https://github.com/lukePeavey/quotable" target="_blank" rel="noopener">https://github.com/lukePeavey/quotable</a>. We have also used the <a href="https://wpgetapi.com/downloads/pro-plugin/">Pro Plugin</a> to cache the call for 30 seconds.</p>

			<h3><strong>Code Snippet</strong></h3>
			<p>The code snippet below is the exact code we are using in this demo page. It demonstrates the use of the template tag function for easily outputting and formatting data.</p>
			<?php the_content(); ?>

		</div>
	</article>

</div>

<?php get_footer();

 

In our page template we have pasted the template tag that we copied earlier and assigned it to the $binance variable. Because we have set the Results Format to array data, we now have the results of the API call in an array that looks something like the below.

As we can see, the API returns 2 keys: ‘symbol’ and ‘price’. We can now use $binance[‘price’] to get our price.

Binance returns the price in a raw format so we have used the number_format() function to give it a more human readable format and have then added the $ symbol to the front of our price.

Table of Contents
Go to top