Discover in this tutorial how to get and display the latest CPT entries from any remote WordPress installation using the REST API.
And today you are going to see how you can display the latest posts from any type of CPT and from the domain of your choice.
Let’s take a look at it:
Instructions for displaying the latest posts from a CPT on the WordPress installation of your choice using the REST API
To get the information about the latest entries you are going to use the REST API endpoint that gives you access to that information.
In addition, you are going to encapsulate this data inside a shortcode, with the parameters of domain, CPT and number of entries per page, so you can display the entries wherever you want.
Add the following code at the end of functions.php or in your functionality plugin:
To see this and another 1097 code snippets of this website, login or subscribe here.
With this code you create a shortcode that allows you to display a list with all the posts of a remote WordPress installation using the shortcode [posts_listing].
The shortcode has 3 parameters:
- Domain: where you indicate the domain from which you want to get the entries. For example:
domain="nbadiola.com". - Post Type: where you indicate the type of post you want to get. It can be any Custom Post Type or entry or page. For example:
cpt="newsletter". - Number of posts per page: where you indicate the number of posts you want to display. For example:
per_page="6".
That is, this shortcode[cg_post_list domain="nbadiola.com" cpt="newsletter" per_page="6"] would get 6 newsletter entries from the nbadiola.com website.
You could use any domain that uses WordPress and doesn’t have the REST API disabled, but as always I recommend using the code “to do good”. 😉
At the API level you use the wp_remote_request function to get the endpoint for the entries (with the GET method) and once you get the information sent by the API you use the wp_remote_retrieve_body functions to extract the data from the body and json_decode to decode it.
And when you have the array with the data, you use a loop (foreach) to extract the information you are interested in.
In this case, the title [title->rendered] > with link to it [link] > with link to it [link] > and the featured image and the featured image.
To get the featured image you could use [featured_media] but the limitation it has is that this option does not allow you to choose the size of the image. This is not optimal performance-wise, since you don’t want to use a 1600px wide image if you are going to display it in a grid where it is going to be max 300px.
So you use the ?_embed parameter and get the featured image with $remote_post->_embedded->{'wp:featuredmedia'}. In this case, you use the medium size but you can modify it to your needs. If you don’t know what sizes are available in your installation you can use this tutorial to get a list.
In addition, you wrap the list of posts in a div with the grid-posts class so that you can customize the layout and display them in grid format.
2. Apply grid layout to the posts loop
Add the following snippet to the end of the style.css file:
/* Posts grid */
.grid-posts {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
}With this you get to display the entries in grid format. You can play with the minmax value (150px) to change the number of columns displayed.
To be able to see the list in grid format there is only one step left.
3. Insert the shortcode where you want
Finally, just type[posts_listing domain="thedomain" cpt="thecpt" per_page="6"]
Conclusions
Now you know how to use the REST API to fetch and display the latest entries of a CPT (post or page) on the remote WordPress installation of your choice.
The WordPress REST API is very powerful and allows a wide range of options. You have more technical information about it on the official WordPress developer page.
If you have any question, please leave it in the comments. And if you want to give me a suggestion for future snippets, please send it through the contact form.
Benefits of being a subscriber. 🙂
