<article class="api-post-container">
  <h1 class="api-post-title">Placeholder Title</h1>
  <p class="api-post-meta">By <span class="api-post-meta__author">J Bloggs</span> | Posted on <span class="api-post-meta__date">01/01/2017</span></p>
  <div class="api-post-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Modo etiam paulum ad dexteram de via declinavi, ut ad Pericli sepulcrum accederem. Hoc est non modo cor non habere, sed ne palatum quidem. Utilitatis causa amicitia est quaesita. Quae hic rei publicae vulnera inponebat, eadem ille sanabat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Modo etiam paulum ad dexteram de via declinavi, ut ad Pericli sepulcrum accederem. Hoc est non modo cor non habere, sed ne palatum quidem. Utilitatis causa amicitia est quaesita. Quae hic rei publicae vulnera inponebat, eadem ille sanabat.</p>
  </div>
</article>
body {
  background-color: #fafafa;
  color: #333;
  font: 1.2em/1.5 Open Sans, sans-serif;
}

.api-post-container {
  padding: 1em;
  max-width: 40em;
  margin: 0 auto;
}

.api-post-meta {
  font-size: 0.8em;
  border-bottom: 1px solid #eee;
  padding-bottom: 1em;
}
// WordPress endpoint to request
const endpoint = 'https://12devsofxmas.co.uk/wp-json/wp/v2/posts?_embed';

// Setup HTTP request to send to WordPress
const request = new XMLHttpRequest();
request.open( 'GET', endpoint, true );
request.onload = function() {
  
  // If our request was successful...
	if ( request.status >= 200 && request.status < 400 ) {
    
    // Convert the JSON string into an array of JSON objects
		const data = JSON.parse( request.responseText );
    
    // Grab the most recent post
    const post = data[0];
    
    // Format date
    const date = new Date( post.date );
    
    // Find the placeholder elements we want to populate
    const titleEl   = document.querySelector( '.api-post-title' ),
          authorEl  = document.querySelector( '.api-post-meta__author' ),
          dateEl    = document.querySelector( '.api-post-meta__date' ),
          contentEl = document.querySelector( '.api-post-content' );    
    
    // Swap out the placeholder content with the post content
    titleEl.innerHTML   = post.title.rendered;
    authorEl.innerHTML  = post._embedded.author[0].name;
    dateEl.innerHTML    = date.toLocaleDateString();
    contentEl.innerHTML = post.content.rendered;
    
  }
};

// Send HTTP request
request.send();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.