Skip to content

Display posts from a WordPress site on an external site with the WP REST API

License

Notifications You must be signed in to change notification settings

hwdsb/wp-rest-api-post-getter

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Get WP Posts Using REST API and Javascript

###Note For a full tutorial on how to use these files, I've added created a detailed guide.

###Overview

The files in this repository can be used to display posts using the WP REST API from a WordPress site on an external site. You can see a minimalist demo on this approach on my site.

###What It Does

  • Gets a thumbnail of the featured media associated with the post (if present)
  • Gets the post title
  • Adds link to the post title that takes user to post on WP site
  • Gets the creation date of the post
  • Gets the post excerpt
  • Lists most recent 2 posts
  • Has Show More button that allows user to click and see next 2 posts and so forth

###How to Use It

  1. Activate the WP REST API v2 plugin on the WP site
  2. Download or clone this repository
  3. Open script.js in your favorite editor
  4. On line 2, copy and paste the domain for the WP site you want to get posts from and add "/forms/wp-json/wp/v2" to the path like this
var endpoint = "https://yourdomain.com/wp-json/wp/v2",
  1. Upload the three Javascript files to your external site
  2. Copy the relevant HTML and paste it into your template page(s)
  3. Add styles and reorganize as needed

###Tips

  • To change the number of posts that display, open script.js and change the value on line 3. For example, this shows 2 posts:
itemsPerPage = 2,
  • Delete this line to remove the loading message
<div class="loading" v-show="loading">loading...</div>

About

Display posts from a WordPress site on an external site with the WP REST API

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 43.9%
  • SCSS 21.4%
  • Less 19.5%
  • CSS 15.0%
  • HTML 0.2%