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
- Login to your WordPress site and add the WP REST API V2 plugin
- Activate the plugin
- Find your route and define any endpoints. For our purposes, we’re going to retrieve all posts so we will use
For example, to get all posts for this site, I will use
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/
For example, we can grab just one post with the ID 2985 like this
Or, if we want to get posts with tag ID 139
For the full reference you can see the WP REST API documentation for posts
- 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.
- Clone or download the tutorial files located here
- Open script.js in your favorite editor (Brackets is pretty great)
- In Line 2, change the route to the one you identified in the Getting Started section above
- Hit Save
- 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.
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.
- Open index.html and copy everything between the <body> tags
- Paste that HTML wherever you would like inside your webpage
- 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 site
Notice that I have removed the image thumbnail and the excerpt. I’ve also moved the date before the post title.