I wanted to embed a preview of the latest posts from this blog on my main website.

The problem was that this blog runs on WordPress and my website is a custom PHP site with Bootstrap.

WordPress has a built in API (wordpress-site.com/wp-json/).

So I wrote a PHP script to pull the information I wanted from the API (Post Title, URL, Date and the Featured Image).

<?php
//Get the post number
$post = $_GET['post'];
//Use CURL to get the latest post information
$curl = curl_init();
$wp_api_url = "http://wordpress-site.com/wp-json/wp/v2/posts?per_page=3"; 
curl_setopt_array($curl, array(
 CURLOPT_URL => $wp_api_url,
 CURLOPT_RETURNTRANSFER => true,
 CURLOPT_ENCODING => "",
 CURLOPT_MAXREDIRS => 10,
 CURLOPT_TIMEOUT => 30,
 CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
 CURLOPT_CUSTOMREQUEST => "GET",
));

$response = curl_exec($curl);
$err = curl_error($curl);

//Decode the JSON response
$json = json_decode($response, true);

//Save all the post information into varibles
$post0_link = $json[0]['link'];
$post0_title = $json[0]['title']['rendered'];
$post0_imageraw = $json[0]['_links']['wp:featuredmedia'][0]['href'];
$post0_date = $json[0]['date_gmt'];

$post1_link = $json[1]['link'];
$post1_title = $json[1]['title']['rendered'];
$post1_imageraw = $json[1]['_links']['wp:featuredmedia'][0]['href'];
$post1_date = $json[1]['date_gmt'];

$post2_link = $json[2]['link'];
$post2_title = $json[2]['title']['rendered'];
$post2_imageraw = $json[2]['_links']['wp:featuredmedia'][0]['href'];
$post2_date = $json[2]['date_gmt'];

//Create varibles to store the info from the desired post
$post_imageraw;
$post_title;
$post_link;
$post_date;

//Populate varibles based on post ID
switch ($post) {
 case 0:
 $post_imageraw = $post0_imageraw;
 $post_title = $post0_title;
 $post_link = $post0_link;
 $post_date = $post0_date;
 break;
 
 case 1:
 $post_imageraw = $post1_imageraw;
 $post_title = $post1_title;
 $post_link = $post1_link;
 $post_date = $post1_date;
 break;
 
 case 2:
 $post_imageraw = $post2_imageraw;
 $post_title = $post2_title;
 $post_link = $post2_link;
 $post_date = $post2_date;
 break;
 
 default:
 die("Invalid Post number. Must be between 0 and 2.");
 break;
}

//Use CURL to get the location of the featured image for the post
curl_setopt_array($curl, array(
 CURLOPT_URL => $post_imageraw,
 CURLOPT_RETURNTRANSFER => true,
 CURLOPT_ENCODING => "",
 CURLOPT_MAXREDIRS => 10,
 CURLOPT_TIMEOUT => 30,
 CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
 CURLOPT_CUSTOMREQUEST => "GET",
));

$response_image = curl_exec($curl);
$err_image = curl_error($curl);

curl_close($curl);

$json_image = json_decode($response_image, true);
$post_image = $json_image['source_url'];

//The title of the post may need to be clipped to prevent overflow
$maxPos = 60;
if (strlen($post_title) > $maxPos)
{
 $lastPos = ($maxPos - 3) - strlen($post_title);
 $post_title = substr($post_title, 0, strrpos($post_title, ' ', $lastPos)) . '...';
}

//Echo the formatted post information
//This will vary depending on your website css
echo '<div class="col-md-4 col-sm-6 portfolio-item"><;a href="';
echo $post_link;
echo '" class="portfolio-link" data-toggle="modal" target="_blank"><div class="portfolio-hover"><div class="portfolio-hover-content"><i class="fa fa-arrow-right fa-3x"></i></div></div><img src="';
echo $post_image;
echo '" class="img-responsive" alt="" style="max-height:260px; width:100%;"></a><div class="portfolio-caption"><h4 style="height:2em; text-overflow:clip; overflow:hidden;">';
echo $post_title;
echo '</h4><p class="text-muted">';
echo date('jS F Y',strtotime($post_date));
echo '</p></div></div>';
?>

To use the API you call wp-get-post.php?post=0, the post can be changed between 0, 1 or 2 with 0 being the newest and 2 being the oldest.

The WordPress API is slow and can take between 1 to 3 seconds to load in order to avoid slowing down my website I decided to use JavaScript to load the data into the page from the script when it is finished processing. This means that the page will load at the same speed, I will just display a loading message until it is loaded.

The HTML code for the loading placeholders can be seen below.

<div id="wp" class="row">
 <div class="col-lg-12 text-center">
 <h3>The latest posts from my blog</h3>
 <h3 class="section-subheading text-muted" style="margin-bottom: 25px!important;">I post projects weekly.</h3>
 </div
 </div>
 <div class="row">
 <div id="post0temp">
 <div class="col-md-4 col-sm-6 portfolio-item">
 <div class="portfolio-caption">
 <h4><div><i class="fa fa-refresh fa-spin"></i> Loading Post</div></h4>
 </div>
 </div>
 </div>
 <div id="post1temp">
 <div class="col-md-4 col-sm-6 portfolio-item">
 <div class="portfolio-caption">
 <h4><div><i class="fa fa-refresh fa-spin"></i> Loading Post</div></h4>
 </div>
 </div>
 </div>
 <div id="post2temp">
 <div class="col-md-4 col-sm-6 portfolio-item">
 <div class="portfolio-caption">
 <h4><div><i class="fa fa-refresh fa-spin"></i> Loading Post</div></h4>
 </div>
 </div>
 </div>
 </div>

The JavaScipt code below loads the posts into the page from the PHP script when the page has loaded.

<script type="text/javascript">;
 function loadPosts(){
 $('#post0temp').load('wp-get-post.php?post=0');
 $('#post1temp').load('wp-get-post.php?post=1');
 $('#post2temp').load('wp-get-post.php?post=2');
 }
 window.onload = function() {
 loadPosts();
 };
 </script>

The above code will require JQuery to work.

The loading placeholders can be seen below.

An example of the populated posts can be seen below.

An example of the code running can be seen at conorwalsh.net/#wp.

As always if you have any questions please don’t hesitate to ask,

Conor.