Retrieving Articles with the WP API

Scenario: I am building components that need news stories, and I don’t want to generate dummy content. The solution is to use the WordPress API like an RSS feed to display the latest stories from another website.

Getting Started

Here is a list of what you will need to get started:

• External APIs for Etch Plugin or other API query solution
• The API endpoint – This is typically my-site.com/wp-json/wp/v2/
• The post type – posts, articles, events, etc.
• URL Parameters to consider
  • per_page – the number of items to retrieve
  • _embed=1 – this is needed for featured image and other embedded content

Once you have these in place and retrieved the data, the next step is typically to build and populate your dynamic data. While all the fields are essentially the same, the API handles some of them a little differently. Here are the fields I typically use:

• Title – item.title.rendered
• Link – item.link
• Featured Image (_embed=1) – item._embedded[“wp:featuredmedia”][0].source_url
• Date – item.date (you’ll want to output item.date.dateFormat(‘F j, Y’) or other format)
• Category loop – item._embedded[“wp:term”][0].map(cat => cat.name)

Category loop example:

  {#loop item._embedded["wp:term"][0].map(cat => cat.name) as cats}
    <li class="news-grid__meta">{cats.name}</li>
  {/loop}

  {#loop item._embedded["wp:term"][0].map(cat => cat.name) as cats}
    <li class="news-grid__meta">{cats.name}</li>
  {/loop}

Examples

Etch Changelog on FW Foundry

FW Cafe articles in the component demo.

ETCHucate articles on FW Cafe

VA Events on VA News (not Etch, but a demo of the API)