The title of this post may seem a little out there to many WP skeptics. It has gained a reputation for being a blog platform, and that can be a little hard to shake as that was its original function.

Or was it?

Let’s me take a moment to explain what I am hoping to prove out here, I believe that WP was always meant to be a PHP based CMS that would change the web. But with its humble beginnings on the open-source blog platform market, it has taken a while for that dream to be realized. 

When I came on the WP scene about 5 years ago I did not know where it had started from or what it’s original intent was, but I saw the potential and have been using it ever since.

Now to get down to brass API tacks!

The internet is becoming a world of API’s(Application Programming Interfaces), every company these days seems to offer some service or product to be delivered and consumed through whatever platform you have. This is a marvelous thing, if you are prepared to handle it! Accounting software, scheduling software, project planning, etc… the list goes on and on. These services all can be on your site with your branding, if you know how to use them. 

But!

The docs are confusing, the support is often un-helpful, not to mention having to try to figure out if it is even compatible with your current website. So where do you begin?

 

Let’s discuss the most common api, REST

REST(Representational State Transfer) is a standardized software development style that has a pre-defined set of rules for creating API’s that make it easy for us to know where and how to use them. This makes it easy to understand how we can access them and use them in any application, though the one we will be discussing today is PHP. 

So where does WordPress fit in?

Here’s the honest truth, I have tried all the major CMS platforms out there right now and WP is the best for multipurpose websites that consume dynamic data such as blog posts and API’s. 

Now the important thing here is to realize what WP is made of,

  • PHP
  • MySQL
  • HTML
  • CSS
  • JavaScript

Both PHP and JS are capable of consuming an API but there are some major differences to take into account here. 

JS is a browser side language, meaning everything that you do or pass to that API can be seen and read by everyone on the internet and there is very little that you can do to hide it.

PHP is a server side language, meaning that everything that you do or pass to that api is hidden unless you choose to send it to the browser through your HTML or JS.

So I think there is a clear winner here, PHP all the way!

So how do we get started?

Let’s start with a vital application called Postman, give it a google and install the latest version. This program will allow you to test the API outside of WP and then get the code from it that you need to connect it to WordPress!

So, let’s pick an API to test!

We are going to use the MealDB API here, https://www.themealdb.com/api.php

So let’s get our code to return a recipe in PHP, 

  1. Open postman and put https://www.themealdb.com/api/json/v1/1/random.php in the URL field and hit send
  2.  (optional) if your API mentions auth then follow the instructions to add the key to the header
  3.  You should now see the result’s box filled with a JSON array response
  4.  Now we are going to get the code for PHP, but keep this window up as we will be needing it later

Now, as seen in the picture below go ahead and hit the code button. Then in the dropdown choose PHP -> curl, which will give you a window with a bunch of code you need to copy. 

 

So now what…? On to WP!

So go ahead and get logged into your WP dashboard and if you have a child theme go to your functions.php, if not google child themes and get one installed!

We are going to append a random recipe with this code to the end of posts with the category randomrecipie, these recipies will always be random every time the page loads.

Here is the code to add to the bottom of your functions.php file:

function rando_recipie_append_content($content) {
    global $post;
    if (is_single() && in_category('randomrecipe')) { // replace with your category slug
        $curl = curl_init();
        curl_setopt_array($curl, array(
        CURLOPT_URL => "https://www.themealdb.com/api/json/v1/1/random.php",
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_ENCODING => "",
        CURLOPT_MAXREDIRS => 10,
        CURLOPT_TIMEOUT => 30,
        CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
        CURLOPT_CUSTOMREQUEST => "GET",
        CURLOPT_POSTFIELDS => "",
        CURLOPT_HTTPHEADER => array(
            "cache-control: no-cache"
        ),
        ));
        $response = curl_exec($curl);
        $err = curl_error($curl);
        curl_close($curl);
        if ($err) {
        echo "cURL Error #:" . $err;
        } else { // here is where we will process our JSON array
        $recipe = json_decode($response);
        $recipe = $recipe->meals[0];
        }
        ob_start(); // begin output buffer
        ?>
        <div class='recipe-card'>
            <div style="background:url(<?php echo $recipe->strMealThumb; ?>) no-repeat 50% 50%; background-size:cover; height: 150px"></div>
            <div class="recipe-card__body">
                <h1 class="recipe-card__heading"><?php echo $recipe->strMeal; ?></h1>
                
                <ul class="recipe-card__nav">
                <li>
                    <h3 class="active">Ingredients</h3>
                </li>
                <li>
                    <h3>Method</h3>
                </li>
                </ul>
                
                
                
                <ul class="recipe-card__ingredients">
                <li><?php echo $recipe->strMeasure1 . ' ' . $recipe->strIngredient1; ?></li>
                <li><?php echo $recipe->strMeasure2 . ' ' . $recipe->strIngredient2; ?></li>
                <li><?php echo $recipe->strMeasure3 . ' ' . $recipe->strIngredient3; ?></li>
                <li><?php echo $recipe->strMeasure4 . ' ' . $recipe->strIngredient4; ?></li>
                <li><?php echo $recipe->strMeasure5 . ' ' . $recipe->strIngredient5; ?></li>
                <li><?php echo $recipe->strMeasure6 . ' ' . $recipe->strIngredient6; ?></li>
                <li><?php echo $recipe->strMeasure7 . ' ' . $recipe->strIngredient7; ?></li>
                <li><?php echo $recipe->strMeasure8 . ' ' . $recipe->strIngredient8; ?></li>
                <li><?php echo $recipe->strMeasure9 . ' ' . $recipe->strIngredient9; ?></li>
                <li><?php echo $recipe->strMeasure10 . ' ' . $recipe->strIngredient10; ?></li>
                <li><?php echo $recipe->strMeasure11 . ' ' . $recipe->strIngredient11; ?></li>
                <li><?php echo $recipe->strMeasure12 . ' ' . $recipe->strIngredient12; ?></li>
                <li><?php echo $recipe->strMeasure13 . ' ' . $recipe->strIngredient13; ?></li>
                <li><?php echo $recipe->strMeasure14 . ' ' . $recipe->strIngredient14; ?></li>
                <li><?php echo $recipe->strMeasure15 . ' ' . $recipe->strIngredient15; ?></li>
                <li><?php echo $recipe->strMeasure16 . ' ' . $recipe->strIngredient16; ?></li>
                <li><?php echo $recipe->strMeasure17 . ' ' . $recipe->strIngredient17; ?></li>
                <li><?php echo $recipe->strMeasure18 . ' ' . $recipe->strIngredient18; ?></li>
                <li><?php echo $recipe->strMeasure19 . ' ' . $recipe->strIngredient19; ?></li>
                <li><?php echo $recipe->strMeasure20 . ' ' . $recipe->strIngredient20; ?></li>
            </ul>
            <ul class="recipe-card__method">
                <li><?php echo $recipe->strInstructions; ?></li>
            </ul>
            </div>
            <h4> Find the recipe <a href="<?php echo $recipe->strSource; ?>"> here!</a></h4>
            </div>
    <?php
    $output = ob_get_clean();
    $content = $content . $output; // add output buffer to end of content
    }
return $content; // send content to page
}
add_action('the_content', 'rando_recipie_append_content');

Also, paste this into your style.css in the child theme:


.recipe-card {
-webkit-box-shadow: 0px 0px 20px 1px rgba(240,241,243,1);
-moz-box-shadow: 0px 0px 20px 1px rgba(240,241,243,1);
box-shadow: 0px 0px 20px 1px rgba(240,241,243,1);
border:1px solid #f0f1f3;
width: 300px;
margin: 50px auto;
}
.recipe-card__body {
padding: 20px;
}
.recipe-card__heading {
padding: 0;
margin: 0 0 0;
color: #444;
}
.recipe-card__subhead {
font-size: 13px;
color: #555;
margin-bottom: 30px;
}
.recipe-card__ingredients {
list-style: none;
margin: 0;
padding: 0;
margin-left: 10px;
column-count: 1;
li {
margin-bottom: 5px;
}
li:before {
content: '\2022';
color: #eb9376;
margin-right: 5px;
}
}

.recipe-card__nav {
margin: 0 0 20px;
padding: 0;
border-bottom: 1px solid #eb9376;
li {
display: inline-block;
margin-right: 30px
}
h3 {
margin: 0;
padding: 0;
}
h3:after {
content: '';
display: block;
width: 0%;
padding-top: 10px;
margin: 0 auto;
border-bottom: 5px solid #eb9376;
transition: width 250ms ease-in-out 0s;
}
h3:hover {
cursor: pointer;
}
h3:hover:after, h3.active:after {
width: 100%;
}
}

@media (min-width:599px) {
.recipe-card {
width: 600px
}
.recipe-card__ingredients {
column-count: 2
}
}

And if you create a post with the category above you should now see… this!

 

SO! That was fun right?
But this is just the beginning of what we can do with API’s in WordPress.
Stay tuned for part 2 and please post questions or comments down below!