Display Posts with WP REST API

Display WordPress Posts on Another Site with WP REST API

API, Data, Design, Tech Tips Comments (6)

Overview

Have a WordPress site and want to include your posts on an external site? In this tutorial, I will show you how to use the WordPress REST API to display your posts on a static site with just HTML, CSS, and Javascript.

There are several scenarios where this might be useful but here are the two directly applicable to this tutorial:

  • You want to display a feed of posts on static web hosting (e.g., GitHub Pages, AWS S3, etc.) for your professional web presence
  • You want to use posts from a particular author, category, or tag for separate site(s)
    Skill Level: Beginner

Getting Started

Update 3/31/17: If you are using WP 4.7 or above you can skip to step 3. The WP REST API is now part of core. No need for a plugin.

  1. Login to your WordPress site and add the WP REST API V2 plugin
  2. Activate the plugin
    Activate WP REST API Plugin
  3. Find your route and define any endpoints. For our purposes, we’re going to retrieve all posts so we will use
    http://example.com/wp-json/wp/v2/posts/

    For example, to get all posts for this site, I will use

    http://digitalborn.org/wp-json/wp/v2/posts

    Go ahead and copy and paste that URL into your browser. You’ll get a bunch of JSON data. That’s exactly what we want.

    Note that you can narrow down your results by adding to the route. Quick terminology refresher:

    Base path of API: http://example.com/wp-json/
    Route: wp/v2/posts

    For example, we can grab just one post with the ID 2985 like this

    http://digitalborn.org/wp-json/wp-v2/posts/2985

    Or, if we want to get posts with tag ID 139

    http://digitalborn.org/wp-json/wp/v2/posts?tags=139

    For the full reference you can see the WP REST API documentation for posts

  4. Test the route in your browser. If you get post data, then we can move to the next step.Note: Only public posts will display. You can also display private posts but this is more complex and we won’t deal with private posts in this tutorial.

Get the Sample Files

I’ve added some files to get you started that allow you to simply paste the route you identified above and display posts.

  1. Clone or download the tutorial files located herehttps://github.com/nathanegraham/wp-rest-api-post-getter

    For those using the GitHub client you will click Open in Desktop. For those who do not use GitHub, just click Download Zip and then extract/unzip the filesGitHub repo download

  2. Open script.js in your favorite editor (Brackets is pretty great)
  3. In Line 2, change the route to the one you identified in the Getting Started section above
  4. Hit Save
  5. Now open index.html in your browser

Putting It All Together

Now that you have your JSON post data and you have the files to display this data on a webpage, you can add it to your site.

  1. Upload the Javascript files to your site’s directory.
    If you don’t have static web hosting I would recommend using AWS S3 or GitHub Pages. Both are free and easy to set up. I won’t go into the details but you can find instructions for AWS S3 site hosting here and GitHub Pages hosting here.
  2. Open index.html and copy everything between the <body> tags
  3. Paste that HTML wherever you would like inside your webpage
  4. Now you will need to tweak the styles and formatting to match the rest of your existing site.For an example of a modified version of of the HTML in this tutorial, see my sitehttp://nathanegraham.github.io/

    Notice that I have removed the image thumbnail and the excerpt. I’ve also moved the date before the post title.

» API, Data, Design, Tech Tips » Display WordPress Posts on Another...
On June 20, 2016
By
, ,

6 Responses to Display WordPress Posts on Another Site with WP REST API

  1. Ginnie says:

    Hi Nathan, great article! How did you achieve displaying the post’s date in human readable format instead of yyyy-mm-ddThh:ii:ssZ?

    • Hi Ginnie, Thanks! To parse the date I used something like the below, which you can find in the script.js file here:

      https://github.com/nathanegraham/wp-rest-api-post-getter/blob/master/script.js

      Does that answer your question?

      Note that I have my time and date format set like this:

      Time and Date settings


      Vue.filter('formatDate', function (date_str) {
      var year = date_str.substr(0,4),
      month = parseInt(date_str.substr(5,2)),
      day = date_str.substr(8,2),
      months = ['', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
      return months[month] + " " + day + ", "+year;
      });

  2. Mel says:

    Great article! I need to use {{item.featured_media}} for displaying the post thumbnail, but am only getting back the image id. I know I need to add and change parameters to vue.directive to make this work, but am not sure of the syntax to do so. Any advice? Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *

« »